深入分析React源碼中的合成事件

Posted on by

熱身準備

明確幾個概念

在[email protected]版本中：

  • 所有事件都是委托在id = root的DOM元素中（網上很多說是在document中，17版本不是瞭）；
  • 在應用中所有節點的事件監聽其實都是在id = root的DOM元素中觸發；
  • React自身實現瞭一套事件冒泡捕獲機制；
  • React實現瞭合成事件SyntheticEvent；
  • React在17版本不再使用事件池瞭（網上很多說使用瞭對象池來管理合成事件對象的創建銷毀，那是16版本及之前）；
  • 事件一旦在id = root的DOM元素中委托，其實是一直在觸發的，隻是沒有綁定對應的回調函數；

盜用一張官方圖，按官方解釋，之所以會將事件委托從document中移到id = root的DOM元素，是為瞭可以更加安全地進行新舊版本 React 樹的嵌套。

感興趣的可以訪問：React中文網站 。

事件系統角色劃分

  • 事件註冊：registerEvents；
  • 事件監聽：listenToAllSupportedEvents；
  • 事件合成：SyntheticBaseEvent；
  • 事件派發：dispatchEvent；

事件註冊

事件註冊是自執行的，也就是React自身進行調用的：

// 註冊React事件
registerSimpleEvents();  
registerEvents$2();
registerEvents$1();
registerEvents$3();
registerEvents();

React事件就是在組件中調用的onClick這種寫法的事件。上面分為5個函數寫，主要是區分不同的事件註冊邏輯，但是最後都會添加到allNativeEvents的Set數據結構中。

registerSimpleEvents

這裡會註冊大部分事件，它們在React被定義為頂級事件。

它們分為三類：

  • 離散事件：discreteEvent，常見的如：click, keyup, change；
  • 用戶阻塞事件：userBlocking，常見的如：dragEnter, mouseMove, scroll；
  • 連續事件：continuous，常見的如：error, progress, load, ； 它們的優先級排序：

0：離散事件， 1：用戶阻塞事件， 2：連續事件

它們會註冊冒泡和捕獲階段兩個事件。

registerEvents$2

註冊類似onMouseEnter，onMouseLeave單階段事件，隻註冊冒泡階段事件。

registerEvents$1

註冊onChange相關事件，註冊冒泡和捕獲階段兩個事件。

registerEvents$3

註冊onSelect相關事件，註冊冒泡和捕獲階段兩個事件。

registerEvents

註冊onBeforeInput，onCompositionUpdate等相關事件，註冊冒泡和捕獲階段兩個事件。相關參考視頻講解：進入學習

事件監聽

在React源碼系列之二：React的渲染機制曾提到過，React在開始渲染前，會為應用創建一個fiberRoot作為應用的根節點。在創建fiberRoot還會做一件事，就是

listenToAllSupportedEvents(rootContainerElement);

從字面就能理解這個函數是做事件監聽的，其中rootContainerElement參數就是應用中的id = root的DOM元素。

該函數主要遍歷上面事件註冊添加到allNativeEvents的事件，按照一定規則，區分冒泡階段，捕獲階段，區分有無副作用進行監聽，監聽的api還是addEventListener:

// 監聽冒泡階段事件
function addEventBubbleListener(target, eventType, listener) {
  target.addEventListener(eventType, listener, false);
  return listener;
}
// 監聽捕獲階段事件
function addEventCaptureListener(target, eventType, listener) {
  target.addEventListener(eventType, listener, true);
  return listener;
}

代碼中的target就是id = root的DOM元素。

註意，上面監聽的listener是一個事件派發器，並不是真實的瀏覽器事件或你寫的事件回調函數。 不要搞混淆瞭。

事件派發

上面提到，事件一旦在id = root的DOM元素中委托，其實是一直在觸發的，隻是沒有綁定對應的回調函數。

意思是，當我們把鼠標移入我們的應用頁面中時，這時就在派發事件瞭，因為頁面的DOM元素是有監聽mousemove之類的事件的。

那問題來瞭，React是如何得知我們給事件綁定瞭回調函數並觸發對應的回調函數的？

帶著這個問題我們來研究下事件派發。

要講事件派發，還得提下事件監聽階段監聽的listener，它實際是下面這玩意：

function createEventListenerWrapperWithPriority(targetContainer, domEventName, eventSystemFlags) {
  var eventPriority = getEventPriorityForPluginSystem(domEventName);
  var listenerWrapper;

  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);
}

和事件註冊一樣，listener也分為dispatchDiscreteEvent, dispatchUserBlockingUpdate, dispatchEvent三種。它們之間的主要區別是執行優先級，還有discreteEvent涉及到要清除之前的discreteEvent問題，所以做瞭區分。但是它們最後都會調用dispatchEvent。

所以事件派發的角色應該是dispatchEvent

function dispatchEvent(domEventName, eventSystemFlags, targetContainer, nativeEvent) {

  var allowReplay = true;

  allowReplay = (eventSystemFlags & IS_CAPTURE_PHASE) === 0;
  // 如果有離散事件正在執行，會排隊，順序執行
  if (allowReplay && hasQueuedDiscreteEvents() && isReplayableDiscreteEvent(domEventName)) {
    domEventName, eventSystemFlags, targetContainer, nativeEvent);
    return;
  }
  // 嘗試事件派發，如果成功，就不用執行下面的代碼瞭
  var blockedOn = attemptToDispatchEvent(domEventName, eventSystemFlags, targetContainer, nativeEvent);
  // 嘗試事件派發成功
  if (blockedOn === null) {
    if (allowReplay) {
      // 清除連續事件隊列
      clearIfContinuousEvent(domEventName, nativeEvent);
    }

    return;
  }

  if (allowReplay) {
    if (isReplayableDiscreteEvent(domEventName)) {

      queueDiscreteEvent(blockedOn, domEventName, eventSystemFlags, targetContainer, nativeEvent);
      return;
    }

    if (queueIfContinuousEvent(blockedOn, domEventName, eventSystemFlags, targetContainer, nativeEvent)) {
      return;
    } 

    clearIfContinuousEvent(domEventName, nativeEvent);
  } 

  dispatchEventForPluginEventSystem(domEventName, eventSystemFlags, nativeEvent, null, targetContainer);
}

介紹下dispatchEvent的幾個參數：

  • domEventName： DOM事件名稱，如：click，不是onClick；
  • eventSystemFlags：事件系統標記；
  • targetContainer：id=root的DOM元素；
  • nativeEvent：原生事件（來自addEventListener)；

在attemptToDispatchEvent中， 根據nativeEvent.target找到真正觸發事件的DOM元素，並根據DOM元素找到對應的fiber節點，判斷fiber節點的類型以及是否已渲染來決定是否要派發事件。

在一系列判斷通過後，就開始真正的事件處理瞭：

function dispatchEventsForPlugins(domEventName, eventSystemFlags, nativeEvent, targetInst, targetContainer) {
  // 獲取觸發事件的DOM元素
  var nativeEventTarget = getEventTarget(nativeEvent);
  // 初始化事件派發隊列
  var dispatchQueue = [];
  // 合成事件
  extractEvents$5(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget, eventSystemFlags);
  // 按事件派發隊列執行事件派發
  processDispatchQueue(dispatchQueue, eventSystemFlags);
}

在extractEvents$5中會進行事件合成，放在下面單獨講。

在processDispatchQueue會根據事件階段（冒泡或捕獲）來決定是正序還是倒序遍歷合成事件中的listeners。

接下來就比較簡單瞭。 遍歷listeners執行上面的listener。

合成事件

在合成事件中，會根據domEventName來決定使用哪種類型的合成事件。

以click為例，當我們點擊頁面的某個元素時，React會根據原生事件nativeEvent找到觸發事件的DOM元素和對應的fiber節點。並以該節點為孩子節點往上查找，找到包括該節點及以上所有的click回調函數創建dispatchListener，並添加到listeners數組中。

// dispatchListener
{
    instance: instance,  // 事件所在的fiber節點
    listener: listener,  // 事件回調函數
    currentTarget: currentTarget  // 事件對應的DOM元素
  }

當向上查找完成後，會基於click類型的合成事件類創建事件

// 創建合成事件實例
var _event = new SyntheticEventCtor(reactName, reactEventType, null, nativeEvent, nativeEventTarget);
// 事件派發隊列添加事件
dispatchQueue.push({
  event: _event,   // 合成事件實例
  listeners: _listeners  // 同類型事件的集合數組
});

看下SyntheticEventCtor

// Interface根據事件類型有所不同
function createSyntheticEvent(Interface) {
  // 合成事件構造函數
  function SyntheticBaseEvent(reactName, reactEventType, targetInst, nativeEvent, nativeEventTarget) {
    this._reactName = reactName;
    this._targetInst = targetInst;
    this.type = reactEventType;
    this.nativeEvent = nativeEvent;
    this.target = nativeEventTarget;
    this.currentTarget = null;
    // React根據不同事件類型寫瞭對應的屬性接口，這裡基於接口將原生事件上的屬性clone到構造函數中
    for (var _propName in Interface) {... }

    var defaultPrevented = nativeEvent.defaultPrevented != null ? nativeEvent.defaultPrevented : nativeEvent.returnValue === false;

    if (defaultPrevented) {
      this.isDefaultPrevented = functionThatReturnsTrue;
    } else {
      this.isDefaultPrevented = functionThatReturnsFalse;
    }

    this.isPropagationStopped = functionThatReturnsFalse;
    return this;
  }

  _assign(SyntheticBaseEvent.prototype, {
    // 阻止默認事件
    preventDefault: function () {...},
    // 阻止捕獲和冒泡階段中當前事件的進一步傳播
    stopPropagation: function () {...},
    // 合成事件不使用對象池瞭，這個事件是空的，沒有意義，保存是為瞭向下兼容不報錯。
    persist: function () {},

    isPersistent: functionThatReturnsTrue
  });

  return SyntheticBaseEvent;
}

看到這裡，我們基本能弄明白合成事件是個什麼東西瞭。

React合成事件是將同類型的事件找出來，基於這個類型的事件，React通過代碼定義好的類型事件的接口和原生事件創建相應的合成事件實例，並重寫瞭preventDefault和stopPropagation方法。

這樣，同類型的事件會復用同一個合成事件實例對象，節省瞭單獨為每一個事件創建事件實例對象的開銷，這就是事件的合成。

捕獲和冒泡

事件派發分為兩個階段執行， 捕獲階段和冒泡階段。

在上面事件合成中講過，React會根據事件觸發的fiber節點向上查找，將上面的同類型事件添加到隊列中，這樣天然就有瞭一個冒泡的順序，從最底層向上冒泡。如果倒序過來遍歷就是捕獲的順序。

所以，React實現冒泡和捕獲就很簡單瞭，隻需要根據事件派發的階段，判斷是冒泡階段還是捕獲階段來決定是正序遍歷listeners還是倒序遍歷就行瞭。

總結

說是講React的合成事件，實際上講瞭React的事件系統。做下總結：

React的事件系統分為幾個部分：

1.事件註冊；

2.事件監聽；

3.事件合成；

4.事件派發； 事件系統流程：

  • 在React代碼執行時，內部會自動執行事件的註冊；
  • 第一次渲染，創建fiberRoot時，會進行事件的監聽，所有的事件通過addEventListener委托在id=root的DOM元素上進行監聽；
  • 在我們觸發事件時，會進行事件合成，同類型事件復用一個合成事件類實例對象；
  • 最後進行事件的派發，執行我們代碼中的事件回調函數；

到此這篇關於深入分析React源碼中的合成事件的文章就介紹到這瞭,更多相關React合成事件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：