React事件機制源碼解析
React v17里事件機制有了比較大的改動，想來和v16差別還是比較大的。
本文淺析的React版本為17.0.1，使用ReactDOM.render創(chuàng)建應用，不含優(yōu)先級相關。
原理簡述
React中事件分為委托事件（DelegatedEvent）和不需要委托事件（NonDelegatedEvent），委托事件在fiberRoot創(chuàng)建的時候，就會在root節(jié)點的DOM元素上綁定幾乎所有事件的處理函數，而不需要委托事件只會將處理函數綁定在DOM元素本身。
同時，React將事件分為3種類型——discreteEvent、userBlockingEvent、continuousEvent，它們擁有不同的優(yōu)先級，在綁定事件處理函數時會使用不同的回調函數。
React事件建立在原生基礎上，模擬了一套冒泡和捕獲的事件機制，當某一個DOM元素觸發(fā)事件后，會冒泡到React綁定在root節(jié)點的處理函數，通過target獲取觸發(fā)事件的DOM對象和對應的Fiber節(jié)點，由該Fiber節(jié)點向上層父級遍歷，收集一條事件隊列，再遍歷該隊列觸發(fā)隊列中每個Fiber對象對應的事件處理函數，正向遍歷模擬冒泡，反向遍歷模擬捕獲，所以合成事件的觸發(fā)時機是在原生事件之后的。
Fiber對象對應的事件處理函數依舊是儲存在props里的，收集只是從props里取出來，它并沒有綁定到任何元素上。
源碼淺析
以下源碼僅為基礎邏輯的淺析，旨在理清事件機制的觸發(fā)流程，去掉了很多流程無關或復雜的代碼。
委托事件綁定
這一步發(fā)生在調用了ReactDOM.render過程中，在創(chuàng)建fiberRoot的時候會在root節(jié)點的DOM元素上監(jiān)聽所有支持的事件。
function createRootImpl(
container: Container,
tag: RootTag,
options: void | RootOptions,
) {
// ...
const rootContainerElement =
container.nodeType === COMMENT_NODE ? container.parentNode : container;
// 監(jiān)聽所有支持的事件
listenToAllSupportedEvents(rootContainerElement);
// ...
}
listenToAllSupportedEvents
在綁定事件時，會通過名為allNativeEvents的Set變量來獲取對應的eventName，這個變量會在一個頂層函數進行收集，而nonDelegatedEvents是一個預先定義好的Set。
export function listenToAllSupportedEvents(rootContainerElement: EventTarget) {
allNativeEvents.forEach(domEventName => {
// 排除不需要委托的事件
if (!nonDelegatedEvents.has(domEventName)) {
// 冒泡
listenToNativeEvent(
domEventName,
false,
((rootContainerElement: any): Element),
null,
);
}
// 捕獲
listenToNativeEvent(
domEventName,
true,
((rootContainerElement: any): Element),
null,
);
});
}
listenToNativeEvent
listenToNativeEvent函數在綁定事件之前會先將事件名在DOM元素中標記，判斷為false時才會綁定。
export function listenToNativeEvent(
domEventName: DOMEventName,
isCapturePhaseListener: boolean,
rootContainerElement: EventTarget,
targetElement: Element | null,
eventSystemFlags?: EventSystemFlags = 0,
): void {
let target = rootContainerElement;
// ...
// 在DOM元素上儲存一個Set用來標識當前元素監(jiān)聽了那些事件
const listenerSet = getEventListenerSet(target);
// 事件的標識key，字符串拼接處理了下
const listenerSetKey = getListenerSetKey(
domEventName,
isCapturePhaseListener,
);
if (!listenerSet.has(listenerSetKey)) {
// 標記為捕獲
if (isCapturePhaseListener) {
eventSystemFlags |= IS_CAPTURE_PHASE;
}
// 綁定事件
addTrappedEventListener(
target,
domEventName,
eventSystemFlags,
isCapturePhaseListener,
);
// 添加到set
listenerSet.add(listenerSetKey);
}
}
addTrappedEventListener
addTrappedEventListener函數會通過事件名取得對應優(yōu)先級的listener函數，在交由下層函數處理事件綁定。
這個listener函數是一個閉包函數，函數內能訪問targetContainer、domEventName、eventSystemFlags這三個變量。
function addTrappedEventListener(
targetContainer: EventTarget,
domEventName: DOMEventName,
eventSystemFlags: EventSystemFlags,
isCapturePhaseListener: boolean,
isDeferredListenerForLegacyFBSupport?: boolean,
) {
// 根據優(yōu)先級取得對應listener
let listener = createEventListenerWrapperWithPriority(
targetContainer,
domEventName,
eventSystemFlags,
);
if (isCapturePhaseListener) {
addEventCaptureListener(targetContainer, domEventName, listener);
} else {
addEventBubbleListener(targetContainer, domEventName, listener);
}
}
addEventCaptureListener函數和addEventBubbleListener函數內部就是調用原生的target.addEventListener來綁定事件了。
這一步是循環(huán)一個存有事件名的Set，將每一個事件對應的處理函數綁定到root節(jié)點DOM元素上。
不需要委托事件綁定
不需要委托的事件其中也包括媒體元素的事件。
export const nonDelegatedEvents: Set<DOMEventName> = new Set([ 'cancel', 'close', 'invalid', 'load', 'scroll', 'toggle', ...mediaEventTypes, ]); export const mediaEventTypes: Array<DOMEventName> = [ 'abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'encrypted', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting', ];
setInitialProperties
setInitialProperties方法里會綁定不需要委托的直接到DOM元素本身，也會設置style和一些傳入的DOM屬性。
export function setInitialProperties(
domElement: Element,
tag: string,
rawProps: Object,
rootContainerElement: Element | Document,
): void {
let props: Object;
switch (tag) {
// ...
case 'video':
case 'audio':
for (let i = 0; i < mediaEventTypes.length; i++) {
listenToNonDelegatedEvent(mediaEventTypes[i], domElement);
}
props = rawProps;
break;
default:
props = rawProps;
}
// 設置DOM屬性，如style...
setInitialDOMProperties(
tag,
domElement,
rootContainerElement,
props,
isCustomComponentTag,
);
}
switch里會根據不同的元素類型，綁定對應的事件，這里只留下了video元素和audio元素的處理，它們會遍歷mediaEventTypes來將事件綁定在DOM元素本身上。
listenToNonDelegatedEvent
listenToNonDelegatedEvent方法邏輯和上一節(jié)的listenToNativeEvent方法基本一致。
export function listenToNonDelegatedEvent(
domEventName: DOMEventName,
targetElement: Element,
): void {
const isCapturePhaseListener = false;
const listenerSet = getEventListenerSet(targetElement);
const listenerSetKey = getListenerSetKey(
domEventName,
isCapturePhaseListener,
);
if (!listenerSet.has(listenerSetKey)) {
addTrappedEventListener(
targetElement,
domEventName,
IS_NON_DELEGATED,
isCapturePhaseListener,
);
listenerSet.add(listenerSetKey);
}
}
值得注意的是，雖然事件處理綁定在DOM元素本身，但是綁定的事件處理函數不是代碼中傳入的函數，后續(xù)觸發(fā)還是會去收集處理函數執(zhí)行。
事件處理函數
事件處理函數指的是React中的默認處理函數，并不是代碼里傳入的函數。
這個函數通過createEventListenerWrapperWithPriority方法創(chuàng)建，對應的步驟在上文的addTrappedEventListener中。
createEventListenerWrapperWithPriority
export function createEventListenerWrapperWithPriority(
targetContainer: EventTarget,
domEventName: DOMEventName,
eventSystemFlags: EventSystemFlags,
): Function {
// 從內置的Map中獲取事件優(yōu)先級
const eventPriority = getEventPriorityForPluginSystem(domEventName);
let listenerWrapper;
// 根據優(yōu)先級不同返回不同的listener
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,
);
}
createEventListenerWrapperWithPriority函數里返回對應事件優(yōu)先級的listener，這3個函數都接收4個參數。
function fn(
domEventName,
eventSystemFlags,
container,
nativeEvent,
) {
//...
}
返回的時候bind了一下傳入了3個參數，這樣返回的函數為只接收nativeEvent的處理函數了，但是能訪問前3個參數。
dispatchDiscreteEvent方法和dispatchUserBlockingUpdate方法內部其實都調用的dispatchEvent方法。
dispatchEvent
這里刪除了很多代碼，只看觸發(fā)事件的代碼。
export function dispatchEvent(
domEventName: DOMEventName,
eventSystemFlags: EventSystemFlags,
targetContainer: EventTarget,
nativeEvent: AnyNativeEvent,
): void {
// ...
// 觸發(fā)事件
attemptToDispatchEvent(
domEventName,
eventSystemFlags,
targetContainer,
nativeEvent,
);
// ...
}
attemptToDispatchEvent方法里依然會處理很多復雜邏輯，同時函數調用棧也有幾層，我們就全部跳過，只看關鍵的觸發(fā)函數。
dispatchEventsForPlugins
dispatchEventsForPlugins函數里會收集觸發(fā)事件開始各層級的節(jié)點對應的處理函數，也就是我們實際傳入JSX中的函數，并且執(zhí)行它們。
function dispatchEventsForPlugins(
domEventName: DOMEventName,
eventSystemFlags: EventSystemFlags,
nativeEvent: AnyNativeEvent,
targetInst: null | Fiber,
targetContainer: EventTarget,
): void {
const nativeEventTarget = getEventTarget(nativeEvent);
const dispatchQueue: DispatchQueue = [];
// 收集listener模擬冒泡
extractEvents(
dispatchQueue,
domEventName,
targetInst,
nativeEvent,
nativeEventTarget,
eventSystemFlags,
targetContainer,
);
// 執(zhí)行隊列
processDispatchQueue(dispatchQueue, eventSystemFlags);
}
extractEvents
extractEvents函數里主要是針對不同類型的事件創(chuàng)建對應的合成事件，并且將各層級節(jié)點的listener收集起來，用來模擬冒泡或者捕獲。
這里的代碼較長，刪除了不少無關代碼。
function extractEvents(
dispatchQueue: DispatchQueue,
domEventName: DOMEventName,
targetInst: null | Fiber,
nativeEvent: AnyNativeEvent,
nativeEventTarget: null | EventTarget,
eventSystemFlags: EventSystemFlags,
targetContainer: EventTarget,
): void {
const reactName = topLevelEventsToReactNames.get(domEventName);
let SyntheticEventCtor = SyntheticEvent;
let reactEventType: string = domEventName;
// 根據不同的事件來創(chuàng)建不同的合成事件
switch (domEventName) {
case 'keypress':
case 'keydown':
case 'keyup':
SyntheticEventCtor = SyntheticKeyboardEvent;
break;
case 'click':
// ...
case 'mouseover':
SyntheticEventCtor = SyntheticMouseEvent;
break;
case 'drag':
// ...
case 'drop':
SyntheticEventCtor = SyntheticDragEvent;
break;
// ...
default:
break;
}
// ...
// 收集各層級的listener
const listeners = accumulateSinglePhaseListeners(
targetInst,
reactName,
nativeEvent.type,
inCapturePhase,
accumulateTargetOnly,
);
if (listeners.length > 0) {
// 創(chuàng)建合成事件
const event = new SyntheticEventCtor(
reactName,
reactEventType,
null,
nativeEvent,
nativeEventTarget,
);
dispatchQueue.push({event, listeners});
}
}
accumulateSinglePhaseListeners
accumulateSinglePhaseListeners函數里就是在向上層遍歷來收集一個列表后面會用來模擬冒泡。
export function accumulateSinglePhaseListeners(
targetFiber: Fiber | null,
reactName: string | null,
nativeEventType: string,
inCapturePhase: boolean,
accumulateTargetOnly: boolean,
): Array<DispatchListener> {
const captureName = reactName !== null ? reactName + 'Capture' : null;
const reactEventName = inCapturePhase ? captureName : reactName;
const listeners: Array<DispatchListener> = [];
let instance = targetFiber;
let lastHostComponent = null;
// 通過觸發(fā)事件的fiber節(jié)點向上層遍歷收集dom和listener
while (instance !== null) {
const {stateNode, tag} = instance;
// 只有HostComponents有l(wèi)istener (i.e. <div>)
if (tag === HostComponent && stateNode !== null) {
lastHostComponent = stateNode;
if (reactEventName !== null) {
// 從fiber節(jié)點上的props中獲取傳入的事件listener函數
const listener = getListener(instance, reactEventName);
if (listener != null) {
listeners.push({
instance,
listener,
currentTarget: lastHostComponent,
});
}
}
}
if (accumulateTargetOnly) {
break;
}
// 繼續(xù)向上
instance = instance.return;
}
return listeners;
}
最后的數據結構如下：
dispatchQueue的數據結構為數組，類型為[{ event,listeners }]。
這個listeners則為一層一層收集到的數據，類型為[{ currentTarget, instance, listener }]
processDispatchQueue
processDispatchQueue函數里會遍歷dispatchQueue。
export function processDispatchQueue(
dispatchQueue: DispatchQueue,
eventSystemFlags: EventSystemFlags,
): void {
const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
for (let i = 0; i < dispatchQueue.length; i++) {
const {event, listeners} = dispatchQueue[i];
processDispatchQueueItemsInOrder(event, listeners, inCapturePhase);
}
}
dispatchQueue中的每一項在processDispatchQueueItemsInOrder函數里遍歷執(zhí)行。
processDispatchQueueItemsInOrder
function processDispatchQueueItemsInOrder(
event: ReactSyntheticEvent,
dispatchListeners: Array<DispatchListener>,
inCapturePhase: boolean,
): void {
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;
}
}
}
processDispatchQueueItemsInOrder函數里會根據判斷來正向、反向的遍歷來模擬冒泡和捕獲。
executeDispatch
executeDispatch函數里會執(zhí)行l(wèi)istener。
function executeDispatch(
event: ReactSyntheticEvent,
listener: Function,
currentTarget: EventTarget,
): void {
const type = event.type || 'unknown-event';
event.currentTarget = currentTarget;
listener(event);
event.currentTarget = null;
}
結語
本文旨在理清事件機制的執(zhí)行，按照函數執(zhí)行棧簡單的羅列了代碼邏輯，如果不對照代碼看是很難看明白的，原理在開篇就講述了。
React的事件機制隱晦而復雜，根據不同情況做了非常多的判斷，并且還有優(yōu)先級相關代碼、合成事件，這里都沒有一一講解，原因當然是我還沒看～
平時用React也就寫寫簡單的手機頁面，以前老板還經常吐槽加載不夠快，那也沒啥辦法，就對我的工作而言，有沒有Cocurrent都是無關緊要的，這合成事件更復雜，完全就是不需要的，不過React的作者們腦洞還是牛皮，要是沒看源碼我肯定是想不到竟然模擬了一套事件機制。
小思考
- 為什么原生事件的stopPropagation可以阻止合成事件的傳遞？
這些問題我放以前根本沒想過，不過今天看了源碼以后才想的。
- 因為合成事件是在原生事件觸發(fā)之后才開始收集并觸發(fā)的，所以當原生事件調用stopPropagation阻止傳遞后，根本到不到root節(jié)點，觸發(fā)不了React綁定的處理函數，自然合成事件也不會觸發(fā)，所以原生事件不是阻止了合成事件的傳遞，而是阻止了React中綁定的事件函數的執(zhí)行。
<div 原生onClick={(e)=>{e.stopPropagation()}}>
<div onClick={()=>{console.log("合成事件")}}>合成事件</div>
</div>
比如這個例子，在原生onClick阻止傳遞后，控制臺連“合成事件”這4個字都不會打出來了。
以上就是React事件機制源碼解析的詳細內容，更多關于React事件機制源碼的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了React 條件渲染的相關資料，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
React?中的事件，是對原生事件的封裝，叫做合成事件。抽象出一層合成事件，是為了做兼容，抹平不同瀏覽器之間的差異。本文將從事件綁定和事件觸發(fā)角度，帶大家解讀下源碼，感興趣的可以了解一下2022-12-12
React videojs 實現自定義組件(視頻畫質/清晰度切換) 的操作代碼
最近使用videojs作為視頻處理第三方庫,用來對接m3u8視頻類型,這里總結一下自定義組件遇到的問題及實現,感興趣的朋友跟隨小編一起看看吧2023-08-08
關于React中使用window.print()出現頁面無響應問題解決記錄
這篇文章主要介紹了React中使用window.print()出現頁面無響應問題解決記錄，首先問題原因可能是操作了document但是并未進行銷毀（可能是），具體問題解決思路參考下本文吧2021-11-11
深入理解React Native核心原理(React Native的橋接（Bridge)
這篇文章主要介紹了深入理解React Native核心原理(React Native的橋接（Bridge),本文重點給大家介紹React Native的基礎知識及實現原理，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了React三大屬性之props的使用詳解，幫助大家更好的理解和學習使用React，感興趣的朋友可以了解下2021-04-04
React手寫簽名組件react-signature實現簽字demo
這篇文章主要為大家介紹了React手寫簽名組件react-signature實現簽字demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
這篇文章主要介紹了React中使用setInterval函數的實例,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
react中關于函數調用()與bind this的原因及分析
這篇文章主要介紹了react中關于函數調用()與bind this的原因及分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要給大家介紹了關于React Native自定義組件與輸出方法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-07-07