React 合成事件 SyntheticEvent

Posted 2023-02-28

参考技术A

1.原生事件冒泡到 document
2.document 执行事件监听回调，把原生事件在 dispatchEvent 里派发合成事件
3.通过 event.target 找到组件和元素
4.dispatchEvent 中执行 batchUpdate batchUpdate (fn, a) => fn(a), fn 是组件元素绑定的方法，a 是 event 合成事件实例
5.react 会在事件池 eventPool 中重复使用 event 实例。

React事件初探

合成事件对象模拟了 event.preventDefault event.stopPropagation 方法，同时为了提高性能在事件池重复使用 event 对象，每次重复使用后都会把 event 对象信息清空，在 setState 和异步 api 中可以使用 event.persist 方法或暂存值 onChange=( value ) => handle(value) 的方式获取正确的属性。
Synthetic Events in React
event.persist()
React SyntheticEvent reuse
官方 event-pooling 应用示例

顶层监听

dispatchEvent, 这里的 bookkeeping 是重用的，与 eventpool 重用相似。

batchedUpdates(handleTopLevel, bookKeeping); 中的 handleTopLevel

runExtractedEventsInBatch 最终会执行到 executeDispatchesAndRelease 方法

SyntheticEvent.js

合成事件是 react 模拟原生 dom 事件所有能力的一个事件对象，用于兼容浏览器 方便 react 统一管理 。

react 合成事件是通过模拟不同浏览器事件差异，顶层监听在 document 上 保证了事件冒泡的统一性 。

当事件原生 dom 事件触发 冒泡至 document 时，react 通过 event.target 找到事件触发的组件实例，并 dispatchEvent 派发合成事件 event ，把 event 通过 batchUpdates 交由绑定事件的处理函数。

react 会重复使用合成 event，如果 event 已经 persisted 则不会推入 eventPool 中每次处理 handle 时都会重新生成一个 event。

react 合成事件兼容模拟浏览器事件差异，使用事件代理方式节省了内存只开辟一块空间，在组件销毁时解绑，避免频繁解绑方便事件的统一管理。