function legacyListenToEvent(registrationName, mountAt) {
var listenerMap = getListenerMapForElement(mountAt);
var dependencies = registrationNameDependencies[registrationName];
for (var i = 0; i < dependencies.length; i++) {
var dependency = dependencies[i];
legacyListenToTopLevelEvent(dependency, mountAt, listenerMap);
}
}
注:见 react-dom/src/events/DOMLegacyEventPluginSystem.js
function handleTopLevel(bookKeeping) {
var targetInst = bookKeeping.targetInst;
var ancestor = targetInst;
do {
var tag = ancestor.tag;
if (tag === HostComponent || tag === HostText) {
bookKeeping.ancestors.push(ancestor);
}
} while (ancestor);
for (var i = 0; i < bookKeeping.ancestors.length; i++) {
targetInst = bookKeeping.ancestors[i];
runExtractedPluginEventsInBatch(topLevelType, targetInst, nativeEvent, eventTarget, eventSystemFlags);
}
}
注:见 react-dom/src/events/DOMLegacyEventPluginSystem.js
var executeDispatchesAndRelease = function (event) {
if (event) {
executeDispatchesInOrder(event);
if (!event.isPersistent()) {
event.constructor.release(event);
}
}
};
注:见packages/legacy-events/EventBatching.js
function executeDispatchesInOrder(event) {
const dispatchListeners = event._dispatchListeners;
const dispatchInstances = event._dispatchInstances;
if (__DEV__) {
validateEventDispatches(event);
}
if (Array.isArray(dispatchListeners)) {
for (let i = 0; i < dispatchListeners.length; i++) {
if (event.isPropagationStopped()) {
break;
}
// Listeners and Instances are two parallel arrays that are always in sync.
executeDispatch(event, dispatchListeners[i], dispatchInstances[i]);
}
} else if (dispatchListeners) {
executeDispatch(event, dispatchListeners, dispatchInstances);
}
event._dispatchListeners = null;
event._dispatchInstances = null;
}
以下分析基于React, ReactDOM 16.13.1版本
提出问题
实际工作中,我们会遇到这样的需求: 实现React中点击空白部分隐藏弹出层,需求可以简化为:点击框体以外的部分则隐藏框体。
但是实际运行结果和我们所想的完全不一样,点击了button按钮并没有任何反应,这里需要React的合成事件说起,我们分析完React的合成事件后能够完全的来解答这个问题
合成事件的特性
React自行实现了一套事件系统,主要特性有以下
先抛开上面那个按钮,用下面这个十分简单的案例来了解React的事件使用。
代码运行后,会在控制台打印出,button, h1, div三个dom节点。那么这又是怎么工作的呢?
事件绑定
首先来确认事件是如何绑定到dom节点上的,我们知道App组件内的jsx代码会通过React.CreateElement函数返回jsx对象,其中我们的onClick事件是储存在每一个jsx对象的props属性内,通过一系列方法得知在React在reconciliation阶段中会把jsx对象转换为fiber对象,这里有一个方法叫做completeWork
通过createInstance创建dom实例,并且调用finalizeInitialChildren函数,在finalizeInitialChildren函数中会把props设置到真实的dom节点上,这里如果遇到类似onClick,onChange的props时,会触发事件绑定的逻辑。
在ensureListeningTo函数中会通过实际触发事件的节点,去寻找到它的document节点,并且调用legacyListenToEvent函数来进行事件绑定
在legacyListenToEvent函数中首先通过获取document节点上监听的事件名称Map对象,然后去通过绑定在jsx上的事件名称,例如onClick来获取到真实的事件名称,例如click,依次进行legacyListenToTopLevelEvent方法的调用
legacyListenToTopLevelEvent函数做了以下两件事
在已经拿到了真实的事件名称和绑定在事件的哪个阶段后,会在trapEventForPluginEventSystem函数内监听事件,通过事件的优先级来获取不同的监听事件,这部分会和调度方面有相关,我们只需要知道最终实际绑定的都是dispatchEvent这个监听事件,然后调用浏览器的addEventListener事件来绑定上dispatchEvent函数
到此为止事件的绑定暂时告一段落了,从上面能得出几个结论。
流程如图:
事件触发
从事件绑定得知我们点击的button按钮的时候,触发的回调函数并不是实际的回调函数,而是dispatchEvent函数
我们会发现dispatchEvent函数中其实实际调用的是dispatchEventForLegacyPluginEventSystem函数,首先在getTopLevelCallbackBookKeeping函数中通过callbackBookkeepingPool获取一个bookKeeping对象,然后调用handleTopLevel函数, 在调用结束的时候把bookKeeping对象放回到callbackBookkeepingPool中,实现了内存复用。
在handleTopLevel函数内,通过首先把触发事件的节点如果是dom节点或者文字节点的话,那就把对应的fiber对象放入bookkeeping.ancestors的数组内,接下去依次获取bookKeeping.ancestors上的每一个fiber对象,通过runExtractedPluginEventsInBatch函数来创建合成事件对象。
在runExtractedPluginEventsInBatch中会通过调用extractPluginEvents函数,在这个函数内通过targetInst这个fiber对象,从这个对象一直往上寻找,寻找有一样的事件绑定的节点,并且把他们的回调事件组合到合成事件对象上,这里先讨论事件触发的流程,所以先简单带过合成事件是如何生成的以及是如何去寻找到需要被触发的事件, 后面会详细的讲解合成事件,最后在拿到合成事件以后调用runEventsInBatch函数
其中processingEventQueue是多个事件列表,我们这只有一个事件队列,forEachAccumulated它的目的是为了按照队列的顺序去执行多个事件,在我们的例子中其实就相当于executeDispatchesAndReleaseTopLevel(processingEventQueue),接下来就是调用到executeDispatchesAndRelease,顾名思义他是首先执行事件,然后对事件对象进行释放
首先调用executeDispatchesInOrder来传入合成事件,在里面按照顺序去执行合成事件对象上的回调函数,如果有多个回调函数,在执行每个回调函数的时候还会去判断event.isPropagationStopped()的状态,之前有函数调用了合成事件的stopPropagation函数的话,就停止执行后续的回调,但是要注意的时候这里的dispatchListeners[i]函数并不是用户传入的回调函数,而是经过包装的事件,这块会在合成事件的生成中介绍,在事件执行结束后React还会去根据用户是否调用了event.persist()函数来决定是否保留这次的事件对象是否要回归事件池,如果未被调用,该事件对象上的状态会被重置,至此事件触发已经完毕。
流程如图:
合成事件的生成
从事件监听的流程中我们知道了合成事件是从extractPluginEvents创建出来的,那么看一下extractPluginEvents的代码
plugins:每个事件会用插件的形式注入到React中
所以会依次遍历plugin,调用plugin上的extractEvents函数来尝试是否能够生成出合成事件对象,在我们的例子中用的是click事件,那么它会进入到SimpleEventPlugin.extractEvents函数
这个函数是通过topLevelType的类型来获取合成事件的构造函数,例如代码中的SyntheticKeyboardEvent,SyntheticFocusEvent等都是SyntheticEvent的子类,在基础上附加了自己事件的特殊属性,我们的click事件会使用到SyntheticEvent这个构造函数,然后通过getPooled函数来创建或者从事件池中取出一个合成事件对象实例。然后在accumulateTwoPhaseDispatchesSingle函数中,按照捕获到冒泡的顺序来获取所有的事件回调
traverseTwoPhase函数会从当前的fiber节点通过return属性,找到所有的是原生DOM节点的fiber对象,然后推入到列表中,我们的例子中就是[ButtonFiber, H1Fiber, DivFiber], 首先执行捕获阶段的循环,从后往前执行,接着从前往后执行冒泡的循环,对应了浏览器原始的事件触发流程,最后会往accumulateDirectionalDispatches函数中传入当前执行的fiber和事件执行的阶段。
listenerAtPhase中首先通过原生事件名和当前执行的阶段(捕获,还是冒泡)去再去获取对应的props事件名称(onClick,onClickCapture),然后通过React事件名称去fiber节点上获取到相应的事件回调函数,最后拼接在合成对象的_dispatchListeners数组内,当全部节点运行结束以后_dispatchListeners对象上就会有三个回调函数[handleButtonLog, handleH1Log, handleDivLog],这里的回调函数就是我们在组件内定义的真实事件的回调函数。
到此合成事件构造就完成了,主要做了三件事:
流程如图:
引申拓展- 批量更新
我们会发现通过React事件内多次调用setState,会自动合并多个setState。
React17中的事件改进
8月发布了React v17的第一个RC版本,v17中对事件进行了一些改动,与v16版本的实现有一些区别。
更改事件委托
如果页面上有多个 React 版本,他们都将在顶层注册事件处理器。这会破坏 e.stopPropagation():如果嵌套树结构中阻止了事件冒泡,但外部树依然能接收到它。这会使不同版本 React 嵌套变得困难重重。
所以在 React 17 中,React 将不再向 document 附加事件处理器。而会将事件处理器附加到渲染 React 树的根 DOM 容器中。
在 React 16 或更早版本中,React 会对大多数事件执行 document.addEventListener()。React 17 将会在底层调用 rootNode.addEventListener()。
去除事件池
React 17 中移除了 "event pooling(事件池)"。它并不会提高现代浏览器的性能, 这是因为 React 在旧浏览器中重用了不同事件的事件对象,以提高性能,并将所有事件字段在它们之前设置为 null。在 React 16 及更早版本中,使用者必须调用 e.persist() 才能正确的使用该事件,或者正确读取需要的属性。
问题解答
现在让我们回到最开始的例子中,来看这个问题如何被修复
16版本修复方法一
我们知道React事件绑定的时刻是在reconciliation阶段,会在原生事件的绑定前,那么可以通过调用e.nativeEvent.stopImmediatePropagation(); 来进行document后续事件的阻止。
16版本修复方法二
16版本修复方法三
利用Node.comtains()判断触发对象
React17版本修复方法
在17版本中React事件并不会绑定在document上,所以并不需要修改任何代码,即可修复这个问题。
参考链接:
深入学习 React 合成事件
【长文慎入】一文吃透 react 事件机制原理
React v17.0 RC 版本发布:无新特性
React-合成事件