First, review the event flow under native DOM. The propagation process of an event goes through the following three stages:

  • Event capture phase
  • The target stage
  • Event bubbling phase

Performance optimization idea under DOM events: Event delegate, obtain the DOM node of the actual event through E. target

The action of taking advantage of the bubbling nature of events like this, combining the same type of listening logic from multiple child elements onto the parent element managed by a listener function, is event delegate. Through event delegation, we can reduce memory overhead, simplify registration steps, and greatly improve development efficiency.

This was the inspiration for the React composite event.

How does the React event system work

React’s event system follows the idea of event delegation. In React, except for a few special non-bubbling events (such as media-type events) that cannot be handled by the event system, most events are not bound to specific elements. Instead, they are bound to the document of the page. When events are fired on specific DOM nodes, they eventually bubble up to the Document, which is bound to a unified event handler that distributes the event to specific component instances.

React first wraps events before distributing them, wrapping native DOM events as composite events.

React is a custom event object that complies with the W3C specification. It smooths out differences between browsers at the bottom and exposes developers to a unified, stable event interface that is identical to DOM native events at the top. Developers can now focus on business logic instead of onerous compatibility issues.

Although the synthesized event is not a native DOM event, it retains a reference to the native DOM event

The binding of events is done during component mounting

React 17 Event changes

  • Change the event delegate

The react event system is mounted on document. In order to support mixed use, the react event system will be modified to the rootNode you mount. This will cause some problems, such as e.topPropagation (). Right now it only blocks rootnodes, but most of the time it doesn’t matter

  • The onScroll event is no longer bubbling to prevent some confusion.
  • The React onFocus and onBlur events have been switched to the native FocusIn and FocusOut events underneath. They more closely resemble React’s existing behavior and sometimes provide additional information.
  • Capture events (for example, onClickCapture) now use capture listeners in the actual browser
  • Remove event pooling, which on current browsers does not improve performance and can cause headaches by reusing event objects.
  • The bottom layer of the Focus event is switched to FocusIn, with no change in behavior
  • UseEffect callback changed to asynchronous invocation