深入解析React Event實現原理
阿新 • • 發佈：2018-12-31
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事件被分發的過程就是：
1、用EventPluginHub生成合成事件，這裡注意同一事件型別只會生成一個合成事件，裡面的_dispatchListeners裡儲存了同一事件型別的所有回撥函式
2、按順序去執行它