React 合成事件的源碼實(shí)現(xiàn)

大家好，我是前端西瓜哥。今天嘗試學(xué)習(xí) React 事件的源碼實(shí)現(xiàn)。

React 版本為 18.2.0

React 中的事件，是對(duì)原生事件的封裝，叫做合成事件。抽象出一層合成事件，是為了做兼容，抹平不同瀏覽器之間的差異。

下面會(huì)從兩個(gè)方面進(jìn)行源碼的解讀：

事件綁定
事件觸發(fā)
事件綁定
首先是 React 項(xiàng)目過程啟動(dòng)時(shí)，調(diào)用 listenToAllSupportedEvents 方法，做合成事件的綁定。

// 對(duì)應(yīng)方法 `ReactDOM.createRoot()
function createRoot(container, CreateRootOptions) {
  const rootContainerElement =
    container.nodeType === COMMENT_NODE
      ? (container.parentNode: any)
      : container;

  // 綁定支持的事件
  listenToAllSupportedEvents(rootContainerElement);
}
listenToAllSupportedEvents 方法核心實(shí)現(xiàn)為：

function listenToAllSupportedEvents(rootContainerElement) {
  allNativeEvents.forEach(domEventName => {
    // 是否為會(huì)冒泡的事件
    if (!nonDelegatedEvents.has(domEventName)) {
      // 第二個(gè)參數(shù)是 isCapturePhaseListener
      // false 表示綁定在 “冒泡階段”
      listenToNativeEvent(domEventName, false, rootContainerElement);
    }
    listenToNativeEvent(domEventName, true, rootContainerElement);
  }
}
allNativeEvents 是一個(gè)集合（Set），保存所有的原生 DOM 事件名。會(huì) 調(diào)用不同事件插件的初始化。

事件插件有：

SimpleEventPlugin；
EnterLeaveEventPlugin；
ChangeEventPlugin；
SelectEventPlugin；
BeforeInputEventPlugin
這些事件插件對(duì)象暴露有 registerEvents 和 extractEvents 方法。registerEvents 用于初始化原生事件和對(duì)應(yīng) React 事件，其中一個(gè)操作就是往 allNativeEvents 加原生事件名。

nonDelegatedEvents 也是一個(gè)集合（Set），保存不支持冒泡的事件，即不能進(jìn)行事件委托，比如 cancel、scroll、媒體事件等。

對(duì)于支持冒泡的事件，捕獲階段和綁定階段都綁定；對(duì)于不支持冒泡的事件，只綁定捕獲階段，且會(huì) 在目標(biāo)元素上綁定事件。



listenToNativeEvent 里面調(diào)用了一層又一層的函數(shù)，人已經(jīng)麻了。為了方便理解，這里將這些嵌套的函數(shù)拍平，丟掉一些次要的分支，得到下面核心代碼：

function listenToNativeEvent() {
  const listener = dispatchEvent.bind(
    null,
    domEventName,
    eventSystemFlags,
    targetContainer,
  );

  if (isCapturePhaseListener) {
    // 捕獲階段的事件委托
    targetContainer.addEventListener(domEventName, listener, true);  
  } else {
    // 冒泡階段的事件委托
    targetContainer.addEventListener(domEventName, listener, false);
  }
}
事件觸發(fā)
現(xiàn)在我們給一個(gè)按鈕綁定 React 的 mousedown 事件，然后觸發(fā)。

調(diào)用棧為：



鏈路很長，只說核心的。

首先 執(zhí)行 dispatchEventForPluginEventSystem，這里用 batchedUpdates 批量更新策略執(zhí)行了 dispatchEventsForPlugins。

function dispatchEventForPluginEventSystem(
  domEventName,
  eventSystemFlags,
  nativeEvent,
  targetInst,
  targetContainer,
) {
  batchedUpdates(() =>
    dispatchEventsForPlugins(
      domEventName,
      eventSystemFlags,
      nativeEvent,
      ancestorInst,
      targetContainer,
    ),
  );
}
dispatchEventsForPlugins 方法下，做的事情：

首先用 extractEvents 遞歸 Fiber 樹，從目標(biāo)節(jié)點(diǎn)往上找到根節(jié)點(diǎn)，取出 props 中所有的相同事件（這里是 onMousedown），加到 dispatchQueue 隊(duì)列上；






然后調(diào)用 processDispatchQueue 去按照一定順序執(zhí)行（冒泡階段時(shí)順序，捕獲階段時(shí)倒序）。
function dispatchEventsForPlugins(
  domEventName,
  eventSystemFlags,
  nativeEvent,
  targetInst,
  targetContainer,
) {
  const nativeEventTarget = getEventTarget(nativeEvent);
  const dispatchQueue = [];
  // 1. 找到所有需要執(zhí)行的事件
  extractEvents(
    dispatchQueue,
    domEventName,
    targetInst,
    nativeEvent,
    nativeEventTarget,
    eventSystemFlags,
    targetContainer,
  );
  // 2. 按一定順序執(zhí)行
  processDispatchQueue(dispatchQueue, eventSystemFlags);
}
首先是 調(diào)用 extractEvents，該方法會(huì)調(diào)用不同的事件插件對(duì)象的 extractEvents 方法。

function extractEvents(...) {
  SimpleEventPlugin.extractEvents(...);

  if (shouldProcessPolyfillPlugins) {
    EnterLeaveEventPlugin.extractEvents(...);
    ChangeEventPlugin.extractEvents(...);
    SelectEventPlugin.extractEvents(...);
    BeforeInputEventPlugin.extractEvents(...);
  }
}
這里以 SimpleEventPlugin  事件插件對(duì)象的 extractEvents 方法為例，做了下面事情：

// 這個(gè) extractEvents 是 SimpleEventPlugin 下的方法
function extractEvents(
  dispatchQueue,
  domEventName,
  targetInst,
  nativeEvent,
  nativeEventTarget,
  eventSystemFlags,
  targetContainer,
) {
  // 先默認(rèn)一個(gè)合成對(duì)象構(gòu)造函數(shù)
  let SyntheticEventCtor = SyntheticEvent;
  switch (domEventName) {
    // ...
    case 'mousedown':
      // 構(gòu)造函數(shù)替換為 合成鼠標(biāo)事件構(gòu)造函數(shù)
      SyntheticEventCtor = SyntheticMouseEvent;
      break;
  }
 
  // 是否為捕獲階段
  const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
 
  // 遞歸找到所有的 listeners
  const listeners = accumulateSinglePhaseListeners(
    targetInst,
    reactName,
    nativeEvent.type,
    inCapturePhase,
    accumulateTargetOnly,
    nativeEvent,
  );
  // 實(shí)例化合成事件對(duì)象，后面要傳到 listener 里
  const event = new SyntheticEventCtor(
    reactName,
    reactEventType,
    null,
    nativeEvent,
    nativeEventTarget,
  );
  // 給隊(duì)列加上 合成對(duì)象實(shí)例，和 listeners
  dispatchQueue.push({event, listeners});
}
dispatchQueue 隊(duì)列的元素是一個(gè)對(duì)象，有 event 和 listeners 兩個(gè)屬性。event 是合成對(duì)象實(shí)例。listeners 是一個(gè)對(duì)象數(shù)組，由多個(gè) listener 組成。

dispatchQueue 長下面這個(gè)樣子：



然后就是將隊(duì)列里的函數(shù)拿去執(zhí)行。

processDispatchQueue 方法會(huì)將隊(duì)列里的不同事件的 listeners 數(shù)組拿去執(zhí)行。

export function processDispatchQueue(dispatchQueue, eventSystemFlags) {
  const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
  for (let i = 0; i < dispatchQueue.length; i++) {
    // 取出不同的事件
    const {event, listeners} = dispatchQueue[i];
    // 每個(gè)事件的 listeners 按一定順序執(zhí)行
    processDispatchQueueItemsInOrder(event, listeners, inCapturePhase);
  }
}
processDispatchQueueItemsInOrder 是按一定順序執(zhí)行的，因?yàn)槭录东@和冒泡階段的順序是相反的，所以代碼邏輯中會(huì)有兩種執(zhí)行方向。

一條鏈路中的 listener 拿到的都是同一個(gè) event。執(zhí)行 event.stopPropagation() 后，event.isPropagationStopped() 就一定會(huì)返回 true，然后鏈路就會(huì)被中斷。

function processDispatchQueueItemsInOrder(event, dispatchListeners, inCapturePhase) {
  let previousInstance;
  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 {
    // 冒泡階段為順序
    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;
    }
  }
}
結(jié)尾
把源碼細(xì)節(jié)丟掉，總結(jié)一下原理。

在 React 項(xiàng)目啟動(dòng)時(shí)，React 會(huì)在 ReactDOM 掛載的根節(jié)點(diǎn)上綁定事件，做事件委托，自己模擬瀏覽器的事件流，實(shí)現(xiàn)一套 React 事件流。

根節(jié)點(diǎn)綁定的通常是兩個(gè)事件，一個(gè)用于模擬捕獲階段，一個(gè)模擬冒泡階段。（但有些事件比較特別，是不能捕獲冒和泡的，比如 scroll 事件，這種事件只會(huì)綁定一個(gè)事件模擬捕獲階段，且不支持事件委托）

用戶觸發(fā)了 React 事件，這里假設(shè)為 mousedown 的冒泡階段。前面綁定的函數(shù)通過事件委托拿到了原生事件名，以及目標(biāo)元素?；谒鼈儯葎?chuàng)建一個(gè)合成事件對(duì)象，再從 fiber 樹中不停往根節(jié)點(diǎn)找，將這些 fiberNode 的 props 的 onMousedown 放到一個(gè)隊(duì)列中。

收集完畢后，我們根據(jù)當(dāng)前是事件捕獲還是冒泡階段，選擇方向去遍歷同步執(zhí)行。捕獲階段是從根節(jié)點(diǎn)到目標(biāo)節(jié)點(diǎn)，冒泡則相反。另外，可以通過 event.stopPropagation() 阻止事件冒泡。

我是前端西瓜哥，歡迎關(guān)注我，學(xué)習(xí)更多前端知識(shí)。

作者：前端西瓜哥


歡迎關(guān)注微信公眾號(hào) ：web技術(shù)學(xué)苑