React 合成事件

React 合成事件（SyntheticEvent）是 React 模拟原生 Dom 事件所有能力的事件对象

目的

1. 解决兼容性问题，保证在各个浏览器的一致性
2. 采用事件委托，减少开销
3. 方便 React 对于事件的统一管理「优先级管理」

事件绑定

react 合成事件在 17 之前全部委托在 document 中，17 及以后全部都委托在了挂载的容器上了。原因就是因为如果页面上有多个 React，都会被附加在 document 中。

当 React 组件要被挂载或者更新时，都会触发 enqueuePutListener ，这个方法负责两件事

1. 找到 react 事件与之对应的浏览器原生事件并注册到挂载容器的节点
2. 将事件与该组件关联并存储起来，为了在事件触发时能找到对应的事件去调用

事件触发

利用事件委托机制，当事件触发时，都会触发在 document 或者挂载容器上注册的事件。无论什么事件，都会统一的调用 dispatchEvent 函数。

然后便是找到对应的事件

1. 通过原生事件找到原生 Dom
2. 通过 Dom 元素找到对应的 React Component
3. 通过事件类型与 React Component 找到需要调用的事件
4. 从该 React Component 向上回溯，沿路收集对应的事件并存储
5. 构造对应的合成事件
6. 按一定顺序批量处理事件