React Synthetic Events Explained

React synthetic events refer to react simulating a Dom event flow using js. (The fiber tree simulates the Dom tree structure) The event flow of synthetic events is captured and bubbled in the fiber tree.

Start by clicking the input box

When you click on the input box, react listens to the focus event (Note 2) (Note 3) at the root node (Note 1).

How to find the corresponding virtual Dom from native events?

At this point, the only information react gets is the native event object (nativeEvent). React uses the Dom (eventTarget) corresponding to nativeEvent to go up along the Dom tree to find the Dom node (Note 4) (Note 5) managed by react that is closest to the eventTarget, and obtains the corresponding fiber A.

Then, through the event plug-in (Note 6), create a synthetic event (Note 7) A. Synthetic event A is considered by React as the event source in the simulated event flow, and fiber A is considered by React as the event target.

Synthetic event stream?

Collect all host type fibers from fiber A upward (until the top-level fiber HostComponent). Then the collected fiber array is traversed from back to front (capture), and then from front to back (bubble). Each time the traversal is performed, the focus event bound to the fiber node of the current traversal item is collected (Note 8). Afterwards (after the event plugin is completed, that is, the synthetic event is generated), the foucs callbacks will be executed in the order of collection. This is how react simulates the event flow.

Extensions

Clicking the input box causes multiple events

In addition to focus, other events are also triggered - click, etc. React listens to different types of events at the root node. Each time an event is listened to, it will be dispatched once. For multiple types of events, it will be dispatched multiple times. Clicking the input box will trigger focus and click successively. When the focus event is dispatched, the click event will be dispatched. Each time an event is dispatched, the pending synchronization task queue (flushSyncCallBackQueue) is processed.

Unexpected render?

In NoMode mode, if events are dispatched multiple times and each event changes the state (such as calling setState), the corresponding component will be rendered multiple times. In this example, if you click the input box, and if you bind the focus event and click event to the input and the event callbacks call setState, the input will render twice.

Why does the input in react become a controlled component after setting the value?

In react, when the value attribute is set for input, the value of the input box will not change no matter what is entered in the input box. Unless you change the state of the input component. After processing the simulated event stream, react will call methods to reset some unexpected effects. For example, in this scenario, after you enter a value in the input, the input box will display the value you entered, but the input value will be immediately updated by the value property of the corresponding fiber (finishEventHander resets the controlled component). If no value is set for the input it will be ignored.

Why are synthetic event properties sometimes inaccessible?

Because react releases the synthetic event object after the event flow (captures the bubbling) is completed (SyntheticEvent.prototype.destructor resets the properties of the synthetic event object).

How does React simulate preventing event bubbling and default behavior?

React executes callbacks in the order of event flow. Before execution, it checks whether the current synthetic event object is in a state that prevents bubbling. If so, it terminates the event flow. React's synthetic event object prototype enhances native functions. The native event method's bubbling prevention and default behavior prevention are encapsulated (the native event method is also called internally).

Notes

Note 1: The root node is document in react-v16 and the mount container Dom in react-v17
Note 2: The focus event is not a bubbling event, and react listens to non-bubbling events in the capture phase. Note 3: The root node listens to all events, except for special exceptions such as submit, reset, invalid, and media events. Note 4: When react mounts the fiber tree on the Dom tree, each host type fiber node corresponds to the Dom node one by one and is linked. Note 5: The upward search is because the child Dom node may not be managed by react, such as the third-party scrolling plug-in. Note 6: In order to simulate Dom events, react supplements Note 7: An instance of a constructor inside react. Some properties of the synthetic event come from nativeEvent. Synthetic events are associated with fibers. Note 8: They are collected rather than executed. Because react does batch processing for a certain type of event

The above is the detailed content of the detailed explanation of React synthetic events. For more information about React synthetic events, please pay attention to other related articles on 123WORDPRESS.COM!