React 元素的事件處理和 DOM元素的很相似。但是有一點(diǎn)語法上的不同:
十余年的大竹網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整大竹建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“大竹網(wǎng)站設(shè)計(jì)”,“大竹網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
并且 React 自己內(nèi)部實(shí)現(xiàn)了一個(gè)合成事件，使用 React 的時(shí)候通常你不需要使用 addEventListener 為一個(gè)已創(chuàng)建的 DOM 元素添加監(jiān)聽器。你僅僅需要在這個(gè)元素初始渲染的時(shí)候提供一個(gè)監(jiān)聽器。
我們看一下這是怎么實(shí)現(xiàn)的
React 事件機(jī)制分為 事件注冊，和事件分發(fā)，兩個(gè)部分
事件注冊
重慶分公司
重慶分公司
// 事件綁定
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
Click me
);上述代碼中， onClick 作為一個(gè) props 傳入了一個(gè) handleClick，在組件更新和掛載的時(shí)候，會對props處理， 事件綁定流程如下:
核心代碼：
在 ReactDOMComponent.js 進(jìn)行組件加載 (mountComponent)、更新 (updateComponent) 的時(shí)候，調(diào)用 _updateDOMProperties 方法對 props 進(jìn)行處理:
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);
// 事務(wù)結(jié)束之后 putListener
transaction.getReactMountReady().enqueue(putListener, {
inst: inst,
registrationName: registrationName,
listener: listener,
});
}看下綁定方法
ReactBrowserEventEmitter.js
listento
//registrationName:需要綁定的事件
//當(dāng)前component所屬的document，即事件需要綁定的位置
listenTo: function (registrationName, contentDocumentHandle) {
var mountAt = contentDocumentHandle;
//獲取當(dāng)前document上已經(jīng)綁定的事件
var isListening = getListeningForDocument(mountAt);
...
if (...) {
//冒泡處理
ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(...);
} else if (...) {
//捕捉處理
ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(...);
}
...
},走到最后其實(shí)就是 doc.addEventLister(event, callback, false);
可以看出所有事件綁定在document上
所以事件觸發(fā)的都是ReactEventListener的dispatchEvent方法
回調(diào)事件儲存
listenerBank
react 維護(hù)了一個(gè) listenerBank 的變量保存了所有的綁定事件的回調(diào)。
回到之前注冊事件的方法
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,
});
}當(dāng)綁定完成以后會執(zhí)行putListener。
var listenerBank = {};
var getDictionaryKey = function (inst) {
//inst為組建的實(shí)例化對象
//_rootNodeID為組件的唯一標(biāo)識
return '.' + inst._rootNodeID;
}
var EventPluginHub = {
//inst為組建的實(shí)例化對象
//registrationName為事件名稱
//listner為我們寫的回調(diào)函數(shù)，也就是列子中的this.autoFocus
putListener: function (inst, registrationName, listener) {
...
var key = getDictionaryKey(inst);
var bankForRegistrationName = listenerBank[registrationName] || (listenerBank[registrationName] = {});
bankForRegistrationName[key] = listener;
...
}
}EventPluginHub在每個(gè)React中只實(shí)例化一次。也就是說，項(xiàng)目組所有事件的回調(diào)都會儲存在唯一的listenerBank中。
事件觸發(fā)
注冊事件流程圖所示，所有的事件都是綁定在Document上。回調(diào)統(tǒng)一是ReactEventListener的dispatch方法。
由于冒泡機(jī)制，無論我們點(diǎn)擊哪個(gè)DOM，最后都是由document響應(yīng)（因?yàn)槠渌鸇OM根本沒有事件監(jiān)聽）。也即是說都會觸發(fā) ReactEventListener.js 里的 dispatch方法。
我們先看一下事件觸發(fā)的流程圖：
dispatchEvent: function (topLevelType, nativeEvent) {
if (!ReactEventListener._enabled) {
return;
}
// 這里得到TopLevelCallbackBookKeeping的實(shí)例對象，本例中第一次觸發(fā)dispatchEvent時(shí)
// 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`.
// 接著執(zhí)行handleTopLevelImpl(bookKeeping)
ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping);
} finally {
// 回收
TopLevelCallbackBookKeeping.release(bookKeeping);
}
}
function handleTopLevelImpl(bookKeeping) {
var nativeEventTarget = getEventTarget(bookKeeping.nativeEvent);
// 獲取當(dāng)前事件的虛擬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 對應(yīng)的就是ReactEventEmitterMixin.js里的handleTopLevel
ReactEventListener._handleTopLevel(bookKeeping.topLevelType, targetInst, bookKeeping.nativeEvent, getEventTarget(bookKeeping.nativeEvent));
}
}
// 這里的findParent曾經(jīng)給我?guī)碚`導(dǎo)，我以為去找當(dāng)前元素所有的父節(jié)點(diǎn)，但其實(shí)不是的，
// 我們知道一般情況下，我們的組件最后會被包裹在的標(biāo)簽里
// 一般是沒有組件再去嵌套它的，所以通常返回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) {
//返回合成事件
//這里進(jìn)入了EventPluginHub，調(diào)用事件插件方法，返回合成事件，并執(zhí)行隊(duì)列里的dispatchListener
var events = EventPluginHub.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);
//執(zhí)行合成事件
runEventQueueInBatch(events);
}合成事件如何生成，請看上方事件觸發(fā)的流程圖
runEventQueuelnBatch(events)做了兩件事
執(zhí)行的細(xì)節(jié)如下：
EventPluginHub.js
// 循環(huán) eventQueue調(diào)用
var executeDispatchesAndReleaseTopLevel = function (e) {
return executeDispatchesAndRelease(e, false);
};
/* 從event._dispatchListener 取出 dispatchlistener，然后dispatch事件，
* 循環(huán)_dispatchListeners，調(diào)用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合成事件的冒泡，
// 因?yàn)閑vent._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';
// 注意這里將事件對應(yīng)的dom元素綁定到了currentTarget上
event.currentTarget = EventPluginUtils.getNodeFromInstance(inst);
if (simulated) {
ReactErrorUtils.invokeGuardedCallbackWithCatch(type, listener, event);
} else {
// 一般都是非模擬的情況，執(zhí)行invokeGuardedCallback
ReactErrorUtils.invokeGuardedCallback(type, listener, event);
}
event.currentTarget = null;
}由上面的函數(shù)可知，dispatch 合成事件分為兩個(gè)步驟：
其實(shí)在 EventPluginHub.js 里主要做了兩件事情.
1.從event._dispatchListener 取出 dispatchlistener，然后dispatch事件，
循環(huán)_dispatchListeners，調(diào)用executeDispatch，然后走到ReactErrorUtils.invokeGuardedCallback;
2.釋放 event
上面這個(gè)函數(shù)最重要的功能就是將事件對應(yīng)的dom元素綁定到了currentTarget上，
這樣我們通過e.currentTarget就可以找到綁定事件的原生dom元素。
下面就是整個(gè)執(zhí)行過程的尾聲了：
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調(diào)用了faked元素的dispatchEvent方法來觸發(fā)事件，并且觸發(fā)完畢之后立即移除監(jiān)聽事件。
總的來說，整個(gè)click事件被分發(fā)的過程就是：
1、用EventPluginHub生成合成事件，這里注意同一事件類型只會生成一個(gè)合成事件，里面的_dispatchListeners里儲存了同一事件類型的所有回調(diào)函數(shù)
2、按順序去執(zhí)行它
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
