React event system. The React event system emulates the browser event system to implement event triggering logic to achieve compatibility between different browsers. This article combs the concrete implementation process from two stages of event registration and response

Front knowledge

Browser events

The triggering phase of the event

  1. Capture phase (the root element receives the event first)
  2. Target phase (target element capture event)
  3. Bubble phase (passes from the element that triggered the event up to the root node)

The browser listens to the event API

target.addEventListener(type, listener, Options) Options * caputre Boolean True Triggers in the capture phase false Triggers in the bubble phase * once Boolean true means that the listener will be called only once after being added and removed after being called * Passive Boolean True Indicates that the listener should not call the preventDefault() method. Target.addeventlistener (type, listener, UseCapture) * useCapture Boolean True fires in capture phase false fires in bubble phaseCopy the code

Event delegation

Event delegation is a general way to implement event handling. Using the browser event bubbling (or capturing) process to implement the event processing logic on the target element’s parent can reduce memory consumption to a certain extent. React implements event handling based on event delegates.

  • Event. target gets the element that actually fires the event
  • Event.currenttarget points to the element that binds the event

React event system

The React event system simulates the browser event system based on the event delegate mechanism.

Synthetic events

React uses SyntheticEvents to simulate the implementation of low-level events. The underlying event objects can be obtained through nativeEvents passed into React objects.

  1. React syntheticEvents can better implement cross-platform logic. React renderers on different platforms can encapsulate specific Syntheticevents.
  2. React is better for performance optimization. For example, when React events were reused before 17, you had to actively call PERSIST to persist React syntheticevents. React 17 removed this logic.

Event listeners

In React 17, the event delegate is bound to the Root element of the React application. ReactDom.render => legacyRenderSubtreeIntoContainer => legacyCreateRootFromDOMContainer => createLegacyRoot => createRootImpl => listenToAllSupportedEvents(rootContainerElement) The above carding the React in rendering code call logic, for the first time focus on the processing logic of listenToAllSupportedEvents, completed the page here root element of corresponding incident encapsulates logic.

Register supported events

Bind the corresponding event callback function to the root element

Bind event logic

In the concrete binding event logic, two main things are done:

  1. Generate response logic for different dispatch events based on the priority of the event name
  2. The callback function generated in the capture phase binding 1

Incident response

React’s event response process deals with different priority event distribution logic in the bubble phase. Suppose we have the following page structure:

In the page structure above, the CLICK event is bound to the DIV of the App component. The react event system responds to the div’s click response using the trigger logic.

The priority of the click event in response corresponds toDiscreteEventPriority, the corresponding event distribution function isdispatchDiscreteEvent, on dispatchDiscreteEventdispatchEventTo complete the dispatch processing of events. The main call in dispatchEventattemptToDispatchEventTo realize the event distribution processing

attemptToDispatchEventThe actual event trigger element and fiber node are retrieved from the native event object and the event processing logic is initiated.

dispatchEventForPluginEventSystemDispatchEventsForPlugins is finally called to complete the event triggering logic.

dispatchEventsForPluginsBasically, we get the corresponding event listener function from the trigger element and execute it in sequence.

The React event


Incident response

The relationship between synthesized events and native events in React

React’s event system is based on the callback processing logic of the event triggered by the native event system in the capture phase. The processing logic of the native event will affect the triggering logic of the composite event. Let’s look at the relationship between them through several examples.

  1. StopPropagation of native events affects the triggering logic of composite events.
  2. With isBatchingEventUpdates enabled, the update logic is merged during the same event processing.


Welcome to follow my wechat official account and learn together