React如何实现合成事件

本篇内容介绍了“React如何实现合成事件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！首先是 React 项目过程启动时，调用 listenToAllSupportedEvents 方法，做合成事件的绑定。listenToAllSupportedEvents 方法核心实现为：allNativeEvents 是一个集合（Set），保存所有的原生 DOM 事件名。会调用不同事件插件的初始化。事件插件有：SimpleEventPlugin；EnterLeaveEventPlugin；ChangeEventPlugin；SelectEventPlugin；BeforeInputEventPlugin这些事件插件对象暴露有 registerEvents 和 extractEvents 方法。registerEvents 用于初始化原生事件和对应 React 事件，其中一个操作就是往 allNativeEvents 加原生事件名。nonDelegatedEvents 也是一个集合（Set），保存不支持冒泡的事件，即不能进行事件委托，比如 cancel、scroll、媒体事件等。对于支持冒泡的事件，捕获阶段和绑定阶段都绑定；对于不支持冒泡的事件，只绑定捕获阶段，且会在目标元素上绑定事件。listenToNativeEvent 里面调用了一层又一层的函数，人已经麻了。为了方便理解，这里将这些嵌套的函数拍平，丢掉一些次要的分支，得到下面核心代码：现在我们给一个按钮绑定 React 的 mousedown 事件，然后触发。调用栈为：链路很长，只说核心的。首先执行 dispatchEventForPluginEventSystem，这里用 batc免费云主机域名hedUpdates 批量更新策略执行了 dispatchEventsForPlugins。dispatchEventsForPlugins 方法下，做的事情：首先用 extractEvents 递归 Fiber 树，从目标节点往上找到根节点，取出 props 中所有的相同事件（这里是 onMousedown），加到 dispatchQueue 队列上；然后调用 processDispatchQueue 去按照一定顺序执行（冒泡阶段时顺序，捕获阶段时倒序）。首先是调用 extractEvents，该方法会调用不同的事件插件对象的 extractEvents 方法。这里以 SimpleEventPlugin 事件插件对象的 extractEvents 方法为例，做了下面事情：dispatchQueue 队列的元素是一个对象，有 event 和 listeners 两个属性。event 是合成对象实例。listeners 是一个对象数组，由多个 listener 组成。dispatchQueue 长下面这个样子：然后就是将队列里的函数拿去执行。processDispatchQueue 方法会将队列里的不同事件的 listeners 数组拿去执行。processDispatchQueueItemsInOrder 是按一定顺序执行的，因为事件捕获和冒泡阶段的顺序是相反的，所以代码逻辑中会有两种执行方向。一条链路中的 listener 拿到的都是同一个 event。执行 event.stopPropagation() 后，event.isPropagationStopped() 就一定会返回 true，然后链路就会被中断。“React如何实现合成事件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站，小编将为大家输出更多高质量的实用文章！