React binding events have their own set of mechanisms:

  • Almost all events to proxydocumentTo achieve the purpose of performance optimization
  • There is a uniform distribution function for each type of eventdispatchEvent
  • Event objects are synthetic events, not native

Such as the following code:

<div className="testDom" onClick={this.testDomClick()}><div>
Copy the code

Instead of binding the Click event directly to the DOM, React bubbles the event on top of the Document. React then encapsulates the event into formal function processing runs and processing.

React internal event system implementation can be divided into two phases: event registration and event triggering.

React synthesis event

If too many event handlers are bound to the DOM, the overall page response and memory footprint can suffer. React implements an intermediate layer, SyntheticEvent, to avoid this kind of DOM event abuse and to mask the event system differences between the underlying browsers.

  1. React does not bind the Click time to the DOM when the user adds functions for onClick.
  2. Instead, it listens for all supported events at document, and when the event happens and bubbles up to document, React encapsulates the event content into a middle layer called SyntheticEvent.
  3. So when an event is triggered, the function is specified to execute using the uniform dispatch function dispatchEvent.

What is the order of execution of composite events and native events? Can you mix them?

1. All React events are distributed uniformly through Document. React events are handled only after the actual Dom triggers the event and bubbles up to the Document.

2. So the native event is executed first, then the React composite event, and finally the event that is actually mounted on the Document

3.React events and native events should not be mixed. If the stopPropagation method is executed in the native event, other React events will become invalid. Because all element events will not bubble up to the document, all React events will not be triggered.