react 源码解析 18 事件系统
react 源码解析 18 事件系统
视频讲解(高效学习):进入学习
往期文章:
从一个 bug 说起
下面这个 demo_13 在 react17 和 react16 中有什么不同吗?代码也很简单,模拟一个 modal 框,点击显示出现,点击其他地方,相当于点击了 mask,modal 消失,因为 react 事件都是委托到上层,所以需要在 handleClick 阻止冒泡,这样点击显示的时候不会触发 document 上的事件回调,导致 modal 无法显示。但是在 react16 上发现这样做还是不行,需要调用 e.nativeEvent.stopImmediatePropagation()才能实现,而 react17 上没什么影响
究其原因就是 react16 和 17 在委托事件的容器上做出了改变,react16 的事件会冒泡的 document 上,而 17 则会冒泡到 root 容器上,也就是 ReactDom.render 的第二个参数
大家也可以看下 demo_11、demo_12 在 react16、17 触发顺序有何差异,同时 demo 项目中的 event.html 也模拟了 react16、17 的事件代理机制
事件系统架构图
我们以 SimpleEvent 为例看事件注册、绑定和触发的过程,看视频的调试过程
事件注册
DOMPluginEventSystem.js 会调用 SimpleEventPlugin 插件的 registerEvents 方法注册事件
registerSimpleEvents
registerTwoPhaseEvent
registerDirectEvent
事件绑定
listenToAllSupportedEvents
listenToNativeEvent
addTrappedEventListener
createEventListenerWrapperWithPriority
事件触发
dispatchDiscreteEvent(dispatchEvent)
unstable_runWithPriority
batchedEventUpdates
dispatchEventsForPlugins
评论