React event mechanism source code analysis

Principle
Source code analysis

Delegated event binding

listenToAllSupportedEvents
listenToNativeEvent
addTrappedEventListener

No delegate event binding required

setInitialProperties
listenToNonDelegatedEvent

Event Handler

createEventListenerWrapperWithPriority
dispatchEvent
dispatchEventsForPlugins
extractEvents
accumulateSinglePhaseListeners
processDispatchQueue
processDispatchQueueItemsInOrder
executeDispatch

Conclusion

Small Thoughts

The event mechanism in React v17 has undergone major changes, and I think it is quite different from v16.

The React version analyzed in this article is 17.0.1, and the application is created using ReactDOM.render, without any priority related information.

Principle

Events in React are divided into delegated events (DelegatedEvent) and non-delegated events (NonDelegatedEvent). When a delegated event is created by fiberRoot, it will bind almost all event processing functions to the DOM element of the root node, while non-delegated events will only bind the processing functions to the DOM element itself.

At the same time, React divides events into three types - discreteEvent, userBlockingEvent, and continuousEvent. They have different priorities and use different callback functions when binding event processing functions.

React events are built on the native basis and simulate a set of bubbling and capturing event mechanisms. When a DOM element triggers an event, it will bubble to the processing function bound to the root node of React, and obtain the DOM object that triggered the event and the corresponding Fiber node through the target. The Fiber node traverses to the upper parent, collects an event queue, and then traverses the queue to trigger the event processing function corresponding to each Fiber object in the queue. The forward traversal simulates bubbling, and the reverse traversal simulates capturing, so the synthetic event is triggered after the native event.

The event handling function corresponding to the Fiber object is still stored in props. The collection is just taken out of props, and it is not bound to any element.

Source code analysis

The following source code is only a brief analysis of the basic logic, aiming to clarify the triggering process of the event mechanism and remove a lot of process-irrelevant or complex code.

Delegated event binding

This step occurs when ReactDOM.render is called. When fiberRoot is created, all supported events are listened on the DOM element of the root node.

function createRootImpl(
  container: Container,
  tag: RootTag,
  options: void | RootOptions,
) {
  // ...
  const rootContainerElement =
        container.nodeType === COMMENT_NODE ? container.parentNode : container;
  // Listen to all supported events listenToAllSupportedEvents(rootContainerElement);
  // ...
}

listenToAllSupportedEvents

When binding an event, the corresponding eventName is obtained through a Set variable named allNativeEvents. This variable is collected in a top-level function, and nonDelegatedEvents is a predefined Set.

export function listenToAllSupportedEvents(rootContainerElement: EventTarget) {
  allNativeEvents.forEach(domEventName => {
    // Exclude events that do not require delegation if (!nonDelegatedEvents.has(domEventName)) {
      // Bubble listenToNativeEvent(
        domEventName,
        false,
        ((rootContainerElement: any): Element),
        null,
      );
    }
    // Capture listenToNativeEvent(
      domEventName,
      true,
      ((rootContainerElement: any): Element),
      null,
    );
  });
}

listenToNativeEvent

The listenToNativeEvent function will mark the event name in the DOM element before binding the event, and will bind it only when it is judged to be false.

export function listenToNativeEvent(
  domEventName: DOMEventName,
  isCapturePhaseListener: boolean,
  rootContainerElement: EventTarget,
  targetElement: Element | null,
  eventSystemFlags?: EventSystemFlags = 0,
): void {
  let target = rootContainerElement;
	// ...
  // Store a Set on the DOM element to identify the events that the current element listens to const listenerSet = getEventListenerSet(target);
  // Event identification key, string concatenation processing const listenerSetKey = getListenerSetKey(
    domEventName,
    isCapturePhaseListener,
  );

  if (!listenerSet.has(listenerSetKey)) {
    // Mark as capture if (isCapturePhaseListener) {
      eventSystemFlags |= IS_CAPTURE_PHASE;
    }
    // Bind event addTrappedEventListener(
      target,
      domEventName,
      eventSystemFlags,
      isCapturePhaseListener,
    );
    // Add to set
    listenerSet.add(listenerSetKey);
  }
}

addTrappedEventListener

The addTrappedEventListener function will obtain the listener function of the corresponding priority through the event name, and then hand it over to the lower-level function to handle the event binding.

This listener function is a closure function, which can access the three variables targetContainer, domEventName, and eventSystemFlags.

function addTrappedEventListener(
  targetContainer: EventTarget,
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  isCapturePhaseListener: boolean,
  isDeferredListenerForLegacyFBSupport?: boolean,
) {
  // Get the corresponding listener according to the priority
  let listener = createEventListenerWrapperWithPriority(
    targetContainer,
    domEventName,
    eventSystemFlags,
  );

  if (isCapturePhaseListener) {
    addEventCaptureListener(targetContainer, domEventName, listener);
  } else {
    addEventBubbleListener(targetContainer, domEventName, listener);
  }
}

The addEventCaptureListener function and the addEventBubbleListener function call the native target.addEventListener to bind events.

This step is to loop a Set containing event names and bind the processing function corresponding to each event to the root node DOM element.

No delegate event binding required

Events that do not require delegation also include events of media elements.

export const nonDelegatedEvents: Set<DOMEventName> = new Set([
  'cancel',
  'close',
  'invalid',
  'load',
  'scroll',
  'toggle',
  ...mediaEventTypes,
]);
export const mediaEventTypes: Array<DOMEventName> = [
  'abort',
  'canplay',
  'canplaythrough',
  'durationchange',
  'emptied',
  'encrypted',
  'ended',
  'error',
  'loadeddata',
  'loadedmetadata',
  'loadstart',
  'pause',
  'play',
  'playing',
  'progress',
  'ratechange',
  'seeked',
  'seeking',
  'stalled',
  'suspend',
  'timeupdate',
  'volumechange',
  'waiting',
];

setInitialProperties

The setInitialProperties method will bind directly to the DOM element itself without delegation, and will also set the style and some incoming DOM attributes.

export function setInitialProperties(
  domElement: Element,
  tag: string,
  rawProps: Object,
  rootContainerElement: Element | Document,
): void {
  let props: Object;
  switch (tag) {
    // ...
    case 'video':
    case 'audio':
      for (let i = 0; i < mediaEventTypes.length; i++) {
        listenToNonDelegatedEvent(mediaEventTypes[i], domElement);
      }
      props = rawProps;
      break;
    default:
      props = rawProps;
  }
  // Set DOM attributes, such as style...
  setInitialDOMProperties(
    tag,
    domElement,
    rootContainerElement,
    props,
    isCustomComponentTag,
  );
}

In the switch, the corresponding events will be bound according to the different element types. Only the processing of video elements and audio elements is left here. They will traverse mediaEventTypes to bind the events to the DOM elements themselves.

listenToNonDelegatedEvent

The logic of the listenToNonDelegatedEvent method is basically the same as the listenToNativeEvent method in the previous section.

export function listenToNonDelegatedEvent(
  domEventName: DOMEventName,
  targetElement: Element,
): void {
  const isCapturePhaseListener = false;
  const listenerSet = getEventListenerSet(targetElement);
  const listenerSetKey = getListenerSetKey(
    domEventName,
    isCapturePhaseListener,
  );
  if (!listenerSet.has(listenerSetKey)) {
    addTrappedEventListener(
      targetElement,
      domEventName,
      IS_NON_DELEGATED,
      isCapturePhaseListener,
    );
    listenerSet.add(listenerSetKey);
  }
}

It is worth noting that although the event processing is bound to the DOM element itself, the bound event processing function is not the function passed in the code, and subsequent triggers will still collect the processing function for execution.

Event Handler

The event handling function refers to the default handling function in React, not the function passed in the code.

This function is created by the createEventListenerWrapperWithPriority method, and the corresponding steps are in the addTrappedEventListener above.

createEventListenerWrapperWithPriority

export function createEventListenerWrapperWithPriority(
  targetContainer: EventTarget,
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
): Function {
  // Get event priority from the built-in Map const eventPriority = getEventPriorityForPluginSystem(domEventName);
  let listenerWrapper;
  //Return different listeners according to different priorities
  switch (eventPriority) {
    case DiscreteEvent:
      listenerWrapper = dispatchDiscreteEvent;
      break;
    case UserBlockingEvent:
      listenerWrapper = dispatchUserBlockingUpdate;
      break;
    case ContinuousEvent:
    default:
      listenerWrapper = dispatchEvent;
      break;
  }
  return listenerWrapper.bind(
    null,
    domEventName,
    eventSystemFlags,
    targetContainer,
  );
}

The createEventListenerWrapperWithPriority function returns the listener corresponding to the event priority. These three functions all receive four parameters.

function fn(
  domEventName,
  eventSystemFlags,
  container,
  nativeEvent,
) {
  //...
}

When returning, bind is passed in 3 parameters, so the returned function is a processing function that only receives nativeEvent, but can access the first 3 parameters.

The dispatchEvent method is actually called internally by the dispatchDiscreteEvent method and the dispatchUserBlockingUpdate method.

dispatchEvent

A lot of code has been removed here, only the code that triggers the event is shown.

export function dispatchEvent(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  targetContainer: EventTarget,
  nativeEvent: AnyNativeEvent,
): void {
  // ...
  // Trigger event attemptToDispatchEvent(
    domEventName,
    eventSystemFlags,
    targetContainer,
    nativeEvent,
  );
  // ...
}

The attemptToDispatchEvent method still handles a lot of complex logic, and there are several layers of function call stack. We will skip all of them and only look at the key trigger function.

dispatchEventsForPlugins

The dispatchEventsForPlugins function collects the processing functions corresponding to the nodes at each level that trigger the event, that is, the functions we actually pass into JSX, and executes them.

function dispatchEventsForPlugins(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  nativeEvent: AnyNativeEvent,
  targetInst: null | Fiber,
  targetContainer: EventTarget,
): void {
  const nativeEventTarget = getEventTarget(nativeEvent);
  const dispatchQueue: DispatchQueue = [];
  // Collect listeners to simulate bubbling extractEvents(
    dispatchQueue,
    domEventName,
    targetInst,
    nativeEvent,
    nativeEventTarget,
    eventSystemFlags,
    targetContainer,
  );
  //Execution queue processDispatchQueue(dispatchQueue, eventSystemFlags);
}

extractEvents

The extractEvents function mainly creates corresponding synthetic events for different types of events, and collects the listeners of nodes at each level to simulate bubbling or capturing.

The code here is longer and a lot of irrelevant code has been deleted.

function extractEvents(
  dispatchQueue: DispatchQueue,
  domEventName: DOMEventName,
  targetInst: null | Fiber,
  nativeEvent: AnyNativeEvent,
  nativeEventTarget: null | EventTarget,
  eventSystemFlags: EventSystemFlags,
  targetContainer: EventTarget,
): void {
  const reactName = topLevelEventsToReactNames.get(domEventName);
  let SyntheticEventCtor = SyntheticEvent;
  let reactEventType: string = domEventName;
	// Create different synthetic events according to different events switch (domEventName) {
    case 'keypress':
    case 'keydown':
    case 'keyup':
      SyntheticEventCtor = SyntheticKeyboardEvent;
      break;
    case 'click':
    // ...
    case 'mouseover':
      SyntheticEventCtor = SyntheticMouseEvent;
      break;
    case 'drag':
    // ...
    case 'drop':
      SyntheticEventCtor = SyntheticDragEvent;
      break;
    // ...
    default:
      break;
  }
  // ...
  // Collect listeners at each level
  const listeners = accumulateSinglePhaseListeners(
    targetInst,
    reactName,
    nativeEvent.type,
    inCapturePhase,
    accumulateTargetOnly,
  );
  if (listeners.length > 0) {
    // Create a synthetic event const event = new SyntheticEventCtor(
      reactName,
      reactEventType,
      null,
      nativeEvent,
      nativeEventTarget,
    );
    dispatchQueue.push({event, listeners});
  }
}

accumulateSinglePhaseListeners

The accumulateSinglePhaseListeners function traverses the upper layer to collect a list that will be used to simulate bubbling later.

export function accumulateSinglePhaseListeners(
  targetFiber: Fiber | null,
  reactName: string | null,
  nativeEventType: string,
  inCapturePhase: boolean,
  accumulateTargetOnly: boolean,
): Array<DispatchListener> {
  const captureName = reactName !== null ? reactName + 'Capture' : null;
  const reactEventName = inCapturePhase ? captureName : reactName;
  const listeners: Array<DispatchListener> = [];

  let instance = targetFiber;
  let lastHostComponent = null;

  // Traverse the fiber node that triggers the event to collect DOM and listeners
  while (instance !== null) {
    const {stateNode, tag} = instance;
    // Only HostComponents have listeners (ie <div>)
    if (tag === HostComponent && stateNode !== null) {
      lastHostComponent = stateNode;

      if (reactEventName !== null) {
        // Get the incoming event listener function from props on the fiber node const listener = getListener(instance, reactEventName);
        if (listener != null) {
          listeners.push({
            instance,
            listener,
            currentTarget: lastHostComponent,
          });
        }
      }
    }
    if (accumulateTargetOnly) {
      break;
    }
    // Continue upwardinstance = instance.return;
  }
  return listeners;
}

The final data structure is as follows:

The data structure of dispatchQueue is an array of type [{ event,listeners }].

The listeners are data collected layer by layer, of type [{ currentTarget, instance, listener }]

processDispatchQueue

The dispatchQueue will be traversed in the processDispatchQueue function.

export function processDispatchQueue(
  dispatchQueue: DispatchQueue,
  eventSystemFlags: EventSystemFlags,
): void {
  const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
  for (let i = 0; i < dispatchQueue.length; i++) {
    const {event, listeners} = dispatchQueue[i];
    processDispatchQueueItemsInOrder(event, listeners, inCapturePhase);
  }
}

Each item in the dispatchQueue is traversed and executed in the processDispatchQueueItemsInOrder function.

processDispatchQueueItemsInOrder

function processDispatchQueueItemsInOrder(
  event: ReactSyntheticEvent,
  dispatchListeners: Array<DispatchListener>,
  inCapturePhase: boolean,
): void {
  let previousInstance;
  // Capture if (inCapturePhase) {
    for (let i = dispatchListeners.length - 1; i >= 0; i--) {
      const {instance, currentTarget, listener} = dispatchListeners[i];
      if (instance !== previousInstance && event.isPropagationStopped()) {
        return;
      }
      executeDispatch(event, listener, currentTarget);
      previousInstance = instance;
    }
  } else {
  // Bubble for (let i = 0; i < dispatchListeners.length; i++) {
      const {instance, currentTarget, listener} = dispatchListeners[i];
      if (instance !== previousInstance && event.isPropagationStopped()) {
        return;
      }
      executeDispatch(event, listener, currentTarget);
      previousInstance = instance;
    }
  }
}

The processDispatchQueueItemsInOrder function will simulate bubbling and capturing by traversing forward and reverse according to the judgment.

executeDispatch

The listener will be executed in the executeDispatch function.

function executeDispatch(
  event: ReactSyntheticEvent,
  listener: Function,
  currentTarget: EventTarget,
): void {
  const type = event.type || 'unknown-event';
  event.currentTarget = currentTarget;
  listener(event);
  event.currentTarget = null;
}

Conclusion

This article aims to clarify the execution of the event mechanism. It simply lists the code logic according to the function execution stack. It is difficult to understand it without comparing the code. The principle is explained at the beginning.

React's event mechanism is obscure and complex. It makes a lot of judgments based on different situations, and there are also priority-related codes and synthetic events. I haven't explained them one by one here. Of course, the reason is that I haven't read it yet.

I usually use React to write simple mobile pages. My boss used to complain that the loading speed was not fast enough, but there was nothing I could do. As far as my work was concerned, it didn’t matter whether there was Cocurrent or not. The synthetic events were more complicated and were completely unnecessary. However, the authors of React were very creative. If I hadn’t read the source code, I would never have thought that they had simulated a set of event mechanisms.

Small Thoughts

Why can stopPropagation of native events prevent the delivery of synthetic events?

I had never thought about these questions before, but I thought about them after reading the source code today.

Because synthetic events are collected and triggered after native events are triggered, when native events call stopPropagation to prevent transmission, they cannot reach the root node at all, and cannot trigger the processing function bound to React, and naturally synthetic events will not be triggered. Therefore, native events do not prevent the transmission of synthetic events, but prevent the execution of event functions bound in React.

<div native onClick={(e)=>{e.stopPropagation()}}>
  <div onClick={()=>{console.log("synthetic event")}}>synthetic event</div>
</div>

For example, in this example, after the native onClick blocks the transmission, the console will not even type out the four words "synthetic event".

The above is the detailed content of the React event mechanism source code analysis. For more information about the React event mechanism source code, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

React Synthetic Events Explained
The implementation of event binding this in React points to three methods
Reasons and solutions for the failure of React event throttling effect
Detailed analysis of React forms and events
React Learning: JSX and React Event Example Analysis
Learn event throttling and anti-shaking in React through examples
Detailed analysis of the problem of preventing event bubbling in React
Detailed explanation of the use of the reactor event manager in Python's Twisted framework
Understanding of React synthetic events and native events

<<: Linux tutorial on replacing strings using sed command

>>: Example of how to identify the user using a linux Bash script