For example

When you use React, you’ve probably written code like this:

What if the list has 1,000 items?

React Event System

A few key concepts

concept operation advantages
Event delegation Delegate almost all events to document Reduce memory footprint and avoid frequent DOM manipulation
Synthetic events Encapsulation of native DOM event objects Performance is consistent across all browsers, achieving cross-browser compatibility
Object pooling Use object pools to manage the creation and destruction of synthetic event objects Convenient for unified management; Garbage collection and memory allocation during new object creation can be reduced, improving performance

  • What is the object pool? Object pool is actually a collection, which contains the collection of objects we need. These objects are managed by the object pool. If you need such objects, you can take them out of the pool, but you need to return them after using them.

  • When to use object pools? When the cost of initialization and instantiation is high and frequent instantiations are required but the number of instantiations is small, the use of object pool can achieve significant performance improvement.

In the process

Event registration → Event triggering → Event clearing

Source code analysis

Analyze the sample code with the example at the beginning.

1. Event registration

How did the event listener function we wrote on the attributes of the Li element end up binding to the native DOM? The following is an excerpt of the code

Event Registration Entry

Determine where events are finally registered

  • With event delegation, almost all events end up being delegated to either a Document or Fragment.

Gets the native DOM event name and how the event is bound

Bind event listeners for the bubbling phase

2. An event is triggered

What happens after the li element is clicked, and how is the event listener called?

Event execution entry

2.1 Generate synthesis events

Retrieves the synthesized event from the object pool

  • React caches all synthesized events in the object pool, which greatly reduces the creation and destruction time of objects and improves performance.

Simulation capture and bubbling

  • Generate synthetic events, will call accumulateTwoPhaseDispatches (event), the method call traverseTwoPhase will eventually.

  • All event listeners and their corresponding nodes are added to the event(composite event) property during the simulation.

2.2 Execution Events

Execute and clean up events sequentially

  • This is why when we need to read asynchronously from a synthesized event object, we need to execute event.persist(), or React will release the event here.

The callback function is actually executed

  • React does not care if stopPropagation was called when collecting the callback array. Instead, it checks to see if bubulation needs to be stopped during the event execution phase.

3. Event clearing How to clear events after they are executed?

Here’s another example: 🌰

1. Prevent bubbling when React events and native events are mixed

  • Call e.topPropagation () in the React event system to block React composite events and native events bound to Windows.

  • Call e.topPropagation () in the native event. If it is before document, all React events will be blocked.

1. What is the output after clicking button? (ABCDE sort)

2. Add e.topPropagation () to (1) and (2). (ABCDE sort)

2. Access events asynchronously

There is a fuzzy search box, in order to avoid frequent send requests, using setTimeout to add a 200 ms delay.