React event system knowledge

React implements a synthetic event layer based on virtual DOM. The event handler we define will receive an instance of the synthetic event layer object, which is fully compliant with the W3C standard. There will not be any compatibility issues with IE standards. It has the same interface as native browser events and also supports event bubbling mechanism. All events are automatically bound to the outermost layer.

• Implementation mechanism of synthetic events

  React does not bind event handling functions directly to real nodes. Instead, all events are bound to the outermost layer of the structure and a unified event listener is used. This event listener maintains a mapping to save the event listening and processing functions inside all components. When an event occurs, it is first handled by this event listener, and then the event listener finds the real event handling function in the mapping and calls it. This simplifies the event processing and recycling mechanism, and greatly improves efficiency.

When using DOM native events in React, you must manually remove them when the component is uninstalled, otherwise memory leaks may occur, and when using the synthetic event system , you don’t need to, because React has already properly handled these issues for you internally.

Although synthetic events can solve the problem of memory leaks, in some cases, native time must be used to achieve this. Don't talk about mixing synthetic events and native events, but it can also be avoided by e.target judgment. In fact, React's synthetic event system is just a subset of the native DOM event system.

The above is the detailed content of React event system knowledge. For more information, please follow other related articles on the PHP Chinese website!