React Design Patterns and Best Practices by Carlos Santana Roldán

Author:Carlos Santana Roldán
Language: eng
Format: epub
Tags: COM051260 - COMPUTERS / Programming Languages / JavaScript, COM060080 - COMPUTERS / Web / General, COM060160 - COMPUTERS / Web / Web Programming
Publisher: Packt Publishing
Published: 2019-03-29T13:49:17+00:00

this.handleEvent = this.handleEvent.bind(this);

}

Second, we implement the generic event handler:

handleEvent(event) {

switch (event.type) {

case 'click':

console.log('clicked');

break;

case 'dblclick':

console.log('double clicked');

break;

default:

console.log('unhandled', event.type);

}

}

The generic event handler receives the event object and switches on the event type to fire the right action. This is particularly useful if we want to call a function on each event (for example, analytics) or if some events share the same logic.

Finally, we attach the new event listener to the onClick and onDoubleClick attributes:

render() {

return (

<button

onClick={this.handleEvent}

onDoubleClick={this.handleEvent}

>

Click me!

</button>

);

}

From this point on, whenever we need to create a new event handler for the same component, instead of creating a new method and binding it, we can just add a new case to the switch.

A couple more interesting things to know about events in React are that synthetic events are reused and that there is a single global handler. The first concept means that we cannot store a synthetic event and reuse it later because it becomes null right after the action. This technique is very good in terms of performance, but it can be problematic if we want to store the event inside the state of the component for some reason. To solve this problem, React gives us a persist method on the synthetic events, which we can call to make the event persistent so that we can store it and retrieve it later.

The second very interesting implementation detail is again about performance, and it regards the way React attaches the event handlers to the DOM.

Whenever we use the on attributes, we are describing to React the behavior we want to achieve, but the library does not attach the actual event handler to the underlying DOM nodes.

What it does instead is attach a single event handler to the root element, which listens to all the events, thanks to event bubbling. When an event we are interested in is fired by the browser, React calls the handler on the specific components on its behalf. This technique is called event delegation and is used for memory and speed optimization.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.