揭秘React形成合成事件的过程

合成事件

在初始化的时候，注入了七个plugin, 它们是里的

其中我们最常用到的就是。所以这里用来分析。

SimpleEventPlugin

然后一步步顺藤摸瓜

EventPropagators.js

这个功能函数在文章的开头讲过，忘记了朋友可以回去看看，其实就是当event不是数组的时候，直接调用accumulateTwoPhaseDispatchesSingle，参数为events。

EventPluginUtils.js

ReactDomTreeTraversal.js

上文里的其实就是EventPropagator.js 的accumulateDirectionalDispatches，接下来让我们看看这个函数做了什么

EventPropagator.js

下面来看看取出响应事件的过程：

还记得我们前面在事件注册的时候，用把存进么，这里的用于取出我们之前存放的回调函数.

EventPluginHub.js

以上，就是生成合成事件的过程，这里有个重中之中就是合成事件收集了一波同类型例如click的回调函数存在了event._dispatchListeners里。

文章来源于网络，如有侵权请联系我们，将予以删除

资源分享