深刻解析React Event實現原理

React 元素的事件處理和 DOM元素的很類似。可是有一點語法上的不一樣:

• React事件綁定屬性的命名採用駝峯式寫法，而不是小寫。
• 若是採用 JSX 的語法你須要傳入一個函數做爲事件處理函數，而不是一個字符串(DOM元素的寫法)

而且 React 本身內部實現了一個合成事件，使用 React 的時候一般你不須要使用 addEventListener 爲一個已建立的 DOM 元素添加監聽器。你僅僅須要在這個元素初始渲染的時候提供一個監聽器。

咱們看一下這是怎麼實現的

React 事件機制分爲 事件註冊，和事件分發，兩個部分

事件註冊

// 事件綁定
function handleClick(e) {
  e.preventDefault();
  console.log('The link was clicked.');
}
 
 return (
  <a href="#" rel="external nofollow" onClick={handleClick}>
   Click me
  </a>
 );

上述代碼中， onClick 做爲一個 props 傳入了一個 handleClick，在組件更新和掛載的時候，會對props處理， 事件綁定流程以下:

核心代碼：

在 ReactDOMComponent.js 進行組件加載 (mountComponent)、更新 (updateComponent) 的時候，調用 _updateDOMProperties 方法對 props 進行處理:

**ReactDOMComponent.js**
_updateDOMProperties: function(lastProps, nextProps, transaction) {
...
if (registrationNameModules.hasOwnProperty(propKey)) {
    if (nextProp) {
     // 若是傳入的是事件，去註冊事件
     enqueuePutListener(this, propKey, nextProp, transaction);
    } else if (lastProp) {
     deleteListener(this, propKey);
    }
   } 
...
}
 
// 註冊事件
function enqueuePutListener(inst, registrationName, listener, transaction) {
 var containerInfo = inst._nativeContainerInfo;
 var doc = containerInfo._ownerDocument;
  ...
  // 去doc上註冊
 listenTo(registrationName, doc);
  // 事務結束以後 putListener
 transaction.getReactMountReady().enqueue(putListener, {
  inst: inst,
  registrationName: registrationName,
  listener: listener,
 });
}

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提高思惟能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

看下綁定方法

ReactBrowserEventEmitter.js

listento

//registrationName:須要綁定的事件
//當前component所屬的document，即事件須要綁定的位置
listenTo: function (registrationName, contentDocumentHandle) {
  var mountAt = contentDocumentHandle;
  //獲取當前document上已經綁定的事件
  var isListening = getListeningForDocument(mountAt);
  ...
   if (...) {
   //冒泡處理 
   ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(...);
   } else if (...) {
    //捕捉處理
    ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(...);
   }
   ...
 },

走到最後其實就是 doc.addEventLister(event, callback, false);

能夠看出全部事件綁定在document上 因此事件觸發的都是ReactEventListener的dispatchEvent方法

回調事件儲存

listenerBank

react 維護了一個 listenerBank 的變量保存了全部的綁定事件的回調。 回到以前註冊事件的方法

function enqueuePutListener(inst, registrationName, listener, transaction) {
 var containerInfo = inst._nativeContainerInfo;
 var doc = containerInfo._ownerDocument;
 if (!doc) {
  // Server rendering.
  return;
 }
 listenTo(registrationName, doc);
 transaction.getReactMountReady().enqueue(putListener, {
  inst: inst,
  registrationName: registrationName,
  listener: listener,
 });
}

當綁定完成之後會執行putListener。

var listenerBank = {};
var getDictionaryKey = function (inst) {
//inst爲組建的實例化對象
//_rootNodeID爲組件的惟一標識
 return '.' + inst._rootNodeID;
}
var EventPluginHub = {
//inst爲組建的實例化對象
//registrationName爲事件名稱
//listner爲咱們寫的回調函數，也就是列子中的this.autoFocus
 putListener: function (inst, registrationName, listener) {
  ...
  var key = getDictionaryKey(inst);
  var bankForRegistrationName = listenerBank[registrationName] || (listenerBank[registrationName] = {});
  bankForRegistrationName[key] = listener;
  ...
 }
}

EventPluginHub在每一個React中只實例化一次。也就是說，項目組全部事件的回調都會儲存在惟一的listenerBank中。

事件觸發

註冊事件流程圖所示，全部的事件都是綁定在Document上。回調統一是ReactEventListener的dispatch方法。 因爲冒泡機制，不管咱們點擊哪一個DOM，最後都是由document響應（由於其餘DOM根本沒有事件監聽）。也便是說都會觸發 ReactEventListener.js 裏的 dispatch方法。

咱們先看一下事件觸發的流程圖：

dispatchEvent: function (topLevelType, nativeEvent) {
  if (!ReactEventListener._enabled) {
   return;
  }
  // 這裏獲得TopLevelCallbackBookKeeping的實例對象，本例中第一次觸發dispatchEvent時
  // bookKeeping instanceof TopLevelCallbackBookKeeping
  // bookKeeping = TopLevelCallbackBookKeeping {topLevelType: "topClick", nativeEvent: "click", ancestors: Array(0)}
  var bookKeeping = TopLevelCallbackBookKeeping.getPooled(topLevelType, nativeEvent);
  try {
   // Event queue being processed in the same cycle allows
   // `preventDefault`.
   // 接着執行handleTopLevelImpl(bookKeeping)
   ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping);
  } finally {
   // 回收
   TopLevelCallbackBookKeeping.release(bookKeeping);
  }
 }
 
function handleTopLevelImpl(bookKeeping) {
 var nativeEventTarget = getEventTarget(bookKeeping.nativeEvent);
 // 獲取當前事件的虛擬dom元素
 var targetInst = ReactDOMComponentTree.getClosestInstanceFromNode(nativeEventTarget);
 
 var ancestor = targetInst;
 do {
  bookKeeping.ancestors.push(ancestor);
  ancestor = ancestor && findParent(ancestor);
 } while (ancestor);
 
 for (var i = 0; i < bookKeeping.ancestors.length; i++) {
  targetInst = bookKeeping.ancestors[i];
  // 這裏的_handleTopLevel 對應的就是ReactEventEmitterMixin.js裏的handleTopLevel
  ReactEventListener._handleTopLevel(bookKeeping.topLevelType, targetInst, bookKeeping.nativeEvent, getEventTarget(bookKeeping.nativeEvent));
 }
}
 
// 這裏的findParent曾經給我帶來誤導，我覺得去找當前元素全部的父節點，但其實不是的，
// 咱們知道通常狀況下，咱們的組件最後會被包裹在<div id='root'></div>的標籤裏
// 通常是沒有組件再去嵌套它的，因此一般返回null
/**
 * Find the deepest React component completely containing the root of the
 * passed-in instance (for use when entire React trees are nested within each
 * other). If React trees are not nested, returns null.
 */
function findParent(inst) {
 while (inst._hostParent) {
  inst = inst._hostParent;
 }
 var rootNode = ReactDOMComponentTree.getNodeFromInstance(inst);
 var container = rootNode.parentNode;
 return ReactDOMComponentTree.getClosestInstanceFromNode(container);
}

咱們看一下核心方法 _handleTopLevel

ReactEventEmitterMixin.js

//這就是核心的處理了
handleTopLevel: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
  //返回合成事件
  //這裏進入了EventPluginHub，調用事件插件方法，返回合成事件，並執行隊列裏的dispatchListener
  var events = EventPluginHub.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);
  //執行合成事件
  runEventQueueInBatch(events);
 }

合成事件如何生成，請看上方事件觸發的流程圖

runEventQueuelnBatch(events)作了兩件事

• 把 dispatchListener裏面的事件排隊push進 eventQueue
• 執行 EventPluginHub.processEventQueue(false); 執行的細節以下：

**EventPluginHub.js **

// 循環 eventQueue調用
 var executeDispatchesAndReleaseTopLevel = function (e) {
  return executeDispatchesAndRelease(e, false);
 };
 /* 從event._dispatchListener 取出 dispatchlistener，而後dispatch事件，
  * 循環_dispatchListeners，調用executeDispatch
  */
 var executeDispatchesAndRelease = function (event, simulated) {
   if (event) {
     // 在這裏dispatch事件
    EventPluginUtils.executeDispatchesInOrder(event, simulated);
     // 釋放事件
    if (!event.isPersistent()) {
     event.constructor.release(event);
    }
   }
 };
 
 enqueueEvents: function (events) {
  if (events) {
   eventQueue = accumulateInto(eventQueue, events);
  }
 },
 
 /**
  * Dispatches all synthetic events on the event queue.
  *
  * @internal
  */
 processEventQueue: function (simulated) {
  // Set `eventQueue` to null before processing it so that we can tell if more
  // events get enqueued while processing.
  var processingEventQueue = eventQueue;
  eventQueue = null;
  if (simulated) {
   forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseSimulated);
  } else {
   forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel);
  }
  // This would be a good time to rethrow if any of the event fexers threw.
  ReactErrorUtils.rethrowCaughtError();
 },
/**
 * Standard/simple iteration through an event's collected dispatches.
 */
function executeDispatchesInOrder(event, simulated) {
 var dispatchListeners = event._dispatchListeners;
 var dispatchInstances = event._dispatchInstances;
 
 if (Array.isArray(dispatchListeners)) {
  for (var i = 0; i < dispatchListeners.length; i++) {
   // 由這裏能夠看出，合成事件的stopPropagation只能阻止react合成事件的冒泡，
   // 由於event._dispatchListeners 只記錄了由jsx綁定的綁定的事件，對於原生綁定的是沒有記錄的
   if (event.isPropagationStopped()) {
    break;
   }
   // Listeners and Instances are two parallel arrays that are always in sync.
   executeDispatch(event, simulated, dispatchListeners[i], dispatchInstances[i]);
  }
 } else if (dispatchListeners) {
  executeDispatch(event, simulated, dispatchListeners, dispatchInstances);
 }
 event._dispatchListeners = null;
 event._dispatchInstances = null;
}
function executeDispatch(event, simulated, listener, inst) {
 var type = event.type || 'unknown-event';
 // 注意這裏將事件對應的dom元素綁定到了currentTarget上
 event.currentTarget = EventPluginUtils.getNodeFromInstance(inst);
 if (simulated) {
  ReactErrorUtils.invokeGuardedCallbackWithCatch(type, listener, event);
 } else {
  // 通常都是非模擬的狀況，執行invokeGuardedCallback
  ReactErrorUtils.invokeGuardedCallback(type, listener, event);
 }
 event.currentTarget = null;

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提高思惟能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

由上面的函數可知，dispatch 合成事件分爲兩個步驟：

• 經過_dispatchListeners裏獲得全部綁定的回調函數，在經過_dispatchInstances的綁定回調函數的虛擬dom元素
• 循環執行_dispatchListeners裏全部的回調函數，這裏有一個特殊狀況，也是react阻止冒泡的原理 其實在 EventPluginHub.js 裏主要作了兩件事情.

1.從event._dispatchListener 取出 dispatchlistener，而後dispatch事件， 循環_dispatchListeners，調用executeDispatch，而後走到ReactErrorUtils.invokeGuardedCallback; 2.釋放 event

上面這個函數最重要的功能就是將事件對應的dom元素綁定到了currentTarget上， 這樣咱們經過e.currentTarget就能夠找到綁定事件的原生dom元素。

下面就是整個執行過程的尾聲了：

ReactErrorUtils.js

var fakeNode = document.createElement('react');
ReactErrorUtils.invokeGuardedCallback = function(name, func, a, b) {
   var boundFunc = func.bind(null, a, b);
   var evtType = `react-${name}`;
   fakeNode.addEventListener(evtType, boundFunc, false);
   var evt = document.createEvent('Event');
   evt.initEvent(evtType, false, false);
   fakeNode.dispatchEvent(evt);
   fakeNode.removeEventListener(evtType, boundFunc, false);
  };

由invokeGuardedCallback可知，最後react調用了faked元素的dispatchEvent方法來觸發事件，而且觸發完畢以後當即移除監聽事件。

總的來講，整個click事件被分發的過程就是： 一、用EventPluginHub生成合成事件，這裏注意同一事件類型只會生成一個合成事件，裏面的_dispatchListeners裏儲存了同一事件類型的全部回調函數

二、按順序去執行它