60行代碼實現(xiàn)React的事件系統(tǒng)
大家好，我卡頌。
由于如下原因，React的事件系統(tǒng)代碼量很大：
- 需要抹平不同瀏覽器的差異
- 與內(nèi)部的「優(yōu)先級機制」綁定
- 需要考慮所有瀏覽器事件
但如果抽絲剝繭會發(fā)現(xiàn)，事件系統(tǒng)的核心只有兩個模塊：
- SyntheticEvent(合成事件)
- 模擬實現(xiàn)的事件傳播機制
本文會用60行代碼實現(xiàn)這兩個模塊，讓你快速了解React事件系統(tǒng)的原理。
在線DEMO地址[1]
Demo的效果
對于如下這段JSX：
const jsx = (
<section onClick={(e) => console.log("click section")}>
<h3>你好</h3>
<button
onClick={(e) => {
// e.stopPropagation();
console.log("click button");
}}
>
點擊
</button>
</section>
);
在瀏覽器中渲染：
const root = document.querySelector("#root");
ReactDOM.render(jsx, root);點擊按鈕，會依次打印：
click button
click section
如果在button的點擊回調(diào)中增加e.stopPropagation()，點擊后會打印：
click button
我們的目標是將JSX中的onClick替換為ONCLICK，但是點擊后的效果不變。
也就是說，我們將基于React自制一套事件系統(tǒng)，他的事件名的書寫規(guī)則是形如「ONXXX」的全大寫形式。
實現(xiàn)SyntheticEvent
首先，我們來實現(xiàn)SyntheticEvent(合成事件)。
SyntheticEvent是瀏覽器原生事件對象的一層封裝。兼容所有瀏覽器，同時擁有和瀏覽器原生事件相同的API，如stopPropagation()和preventDefault()。
SyntheticEvent存在的目的是抹平瀏覽器間在事件對象間的差異，但是對于不支持某一事件的瀏覽器，SyntheticEvent并不會提供polyfill(因為這會顯著增大ReactDOM的體積)。
我們的實現(xiàn)很簡單：
class SyntheticEvent {
constructor(e) {
this.nativeEvent = e;
}
stopPropagation() {
this._stopPropagation = true;
if (this.nativeEvent.stopPropagation) {
this.nativeEvent.stopPropagation();
}
}
}接收「原生事件對象」，返回一個包裝對象。原生事件對象會保存在nativeEvent屬性中。
同時，實現(xiàn)了stopPropagation方法。
實際的SyntheticEvent會包含更多屬性和方法，這里為了演示目的簡化了
實現(xiàn)事件傳播機制
事件傳播機制的實現(xiàn)步驟如下：
- 在根節(jié)點綁定事件類型對應(yīng)的事件回調(diào)，所有子孫節(jié)點觸發(fā)該類事件最終都會委托給「根節(jié)點的事件回調(diào)」處理。
- 尋找觸發(fā)事件的DOM節(jié)點，找到其對應(yīng)的FiberNode(即虛擬DOM節(jié)點)
- 收集從當前FiberNode到根FiberNode之間所有注冊的「該事件對應(yīng)回調(diào)」
- 反向遍歷并執(zhí)行一遍所有收集的回調(diào)(模擬捕獲階段的實現(xiàn))
- 正向遍歷并執(zhí)行一遍所有收集的回調(diào)(模擬冒泡階段的實現(xiàn))
首先，實現(xiàn)第一步：
// 步驟1
const addEvent = (container, type) => {
container.addEventListener(type, (e) => {
// dispatchEvent是需要實現(xiàn)的“根節(jié)點的事件回調(diào)”
dispatchEvent(e, type.toUpperCase(), container);
});
};
在入口處注冊點擊回調(diào)：
const root = document.querySelector("#root");
ReactDOM.render(jsx, root);
// 增加如下代碼
addEvent(root, "click");接下來實現(xiàn)「根節(jié)點的事件回調(diào)」：
const dispatchEvent = (e, type) => {
// 包裝合成事件
const se = new SyntheticEvent(e);
const ele = e.target;
// 比較hack的方法，通過DOM節(jié)點找到對應(yīng)的FiberNode
let fiber;
for (let prop in ele) {
if (prop.toLowerCase().includes("fiber")) {
fiber = ele[prop];
}
}
// 第三步：收集路徑中“該事件的所有回調(diào)函數(shù)”
const paths = collectPaths(type, fiber);
// 第四步：捕獲階段的實現(xiàn)
triggerEventFlow(paths, type + "CAPTURE", se);
// 第五步：冒泡階段的實現(xiàn)
if (!se._stopPropagation) {
triggerEventFlow(paths.reverse(), type, se);
}
};接下來收集路徑中「該事件的所有回調(diào)函數(shù)」。
收集路徑中的事件回調(diào)函數(shù)
實現(xiàn)的思路是：從當前FiberNode一直向上遍歷，直到根FiberNode。收集遍歷過程中的FiberNode.memoizedProps屬性內(nèi)保存的「對應(yīng)事件回調(diào)」：
const collectPaths = (type, begin) => {
const paths = [];
// 不是根FiberNode的話，就一直向上遍歷
while (begin.tag !== 3) {
const { memoizedProps, tag } = begin;
// 5代表DOM節(jié)點對應(yīng)FiberNode
if (tag === 5) {
const eventName = ("on" + type).toUpperCase();
// 如果包含對應(yīng)事件回調(diào)，保存在paths中
if (memoizedProps && Object.keys(memoizedProps).includes(eventName)) {
const pathNode = {};
pathNode[type.toUpperCase()] = memoizedProps[eventName];
paths.push(pathNode);
}
}
begin = begin.return;
}
return paths;
};得到的paths結(jié)構(gòu)類似如下：
捕獲階段的實現(xiàn)由于我們是從目標FiberNode向上遍歷，所以收集到的回調(diào)的順序是：
- [目標事件回調(diào), 某個祖先事件回調(diào), 某個更久遠的祖先回調(diào) ...]
要模擬捕獲階段的實現(xiàn)，需要從后向前遍歷數(shù)組并執(zhí)行回調(diào)。
遍歷的方法如下：
const triggerEventFlow = (paths, type, se) => {
// 從后向前遍歷
for (let i = paths.length; i--; ) {
const pathNode = paths[i];
const callback = pathNode[type];
if (callback) {
// 存在回調(diào)函數(shù)，傳入合成事件，執(zhí)行
callback.call(null, se);
}
if (se._stopPropagation) {
// 如果執(zhí)行了se.stopPropagation()，取消接下來的遍歷
break;
}
}
};注意，我們在SyntheticEvent中實現(xiàn)的stopPropagation方法，調(diào)用后會阻止遍歷的繼續(xù)。
冒泡階段的實現(xiàn)
有了捕獲階段的實現(xiàn)經(jīng)驗，冒泡階段很容易實現(xiàn)，只需將paths反向后再遍歷一遍就行。
總結(jié)React事件系統(tǒng)的核心包括兩部分：
- SyntheticEvent
- 事件傳播機制
事件傳播機制由5個步驟實現(xiàn)。
總的來說，就是這么簡單。
參考資料
[1]在線DEMO地址:
https://codesandbox.io/s/optimistic-torvalds-9ufc5?file=/src/index.js
