Menu
Right now, this is the way I understand event handling in React:
document layerEventPluginHub
SyntheticEvent
If my understanding of React internals is correct, and taking into account this part of the HTML spec:
Event objects are dispatched to an event target. But before dispatch can begin, the event object’s propagation path must first be determined.
Does React wait until the event bubbles up to document to create its SyntheticEvent? And if so, why? In the first step of the event's life, all info about its propagation path is known, so they could do it there.
276
Event Capturing in ReactActually both happen one after another: When a user interacts with an element, the DOM API traverses down the document (capturing phase) to the target element (target phase), only then the DOM API traverses up again (bubbling phase).
Benefits of using synthetic events:Cross browsers applications are easy to implement. Synthetic events are that ReactJS reuses these events objects, by pooling them, which increase the performance.
In order to work as a cross-browser application, React has created a wrapper same as the native browser in order to avoid creating multiple implementations for multiple methods for multiple browsers, creating common names for all events across browsers.
In React, form data is usually handled by the components. When the data is handled by the components, all the data is stored in the component state. You can control changes by adding event handlers in the onChange attribute and that event handler will be used to update the state of the variable.
One of the reasons is performance. Rather than attaching event listeners to every event you use inside the app, React attaches a single event listener for every event type to document. Then, when you create a, for example, onClick event on a div, it just adds that to it's internal event listener map. Once click on a div happens, React's listener on document node finds your event listener and calls it with SyntheticEvent.
This way, react doesn't have to re-create and clear listeners from DOM all the time, it just changes it's internal listener registry.
The other reason is that React's event bubbling works differently compared to DOM one in some cases. Portals in particular.
Take this for example:
const MyComponent = () => (
<div onClick={() => console.log('I was clicked!')}>
MyComponent
<SomeModalThatUsesPortalComponent>A modal</SomeModalThatUsesPortalComponent>
</div>
);
const SomeModalThatUsesPortalComponent = () => {
return ReactDOM.createPortal(
<div onClick={() => console.log('Modal clicked!')}>this.props.children</div>,
document.getElementById('myModalsPortal')
);
}
This would end up with following DOM:
<body>
<div>
My Component
</div>
<div id="myModalsPortal">
<div>A modal</div>
</div>
</body>
So in this case when using a Portal, DOM structure doesn't match the component structure exactly. Here is where bubbling behaviour diverges:
A modal will not trigger a native click event on MyComponent's divonClick handler on MyComponent's div, because modal is a child component of MyComponent
180
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
