React事件机制

React基于浏览器事件机制实现了一套自己的事件机制，包括：事件注册、事件合成、事件冒泡、事件触发等。

事件代理

React的事件并没有绑定到具体的dom节点上，而是绑定在了document上，然后由统一的事件监听器去监听事件的触发

React在内部维护了一个映射表来记录事件与组件的事件处理函数的对应关系。当某个事件触发时，React根据映射表将时间分派给指定的事件处理函数。当一个组件挂载与卸载时，相应的事件处理函数会自动被添加到事件监听器的内部映射表中或从表中删除。这样做简化了事件处理和回收机制，效率也提升很大。

合成事件（SyntheticEvent）

合成事件是React模拟DOM原生事件的一个事件对象，这些合成事件并没有绑定到对应的真实DOM上，而是通过事件代理的方式，将所有的事件绑定到了document上。其优点如下：

1. 兼容所有浏览器，兼容性好
2. 方便React进行统一管理和进行事件处理。对于原生事件来说，浏览器会监听事件是否被触发，当事件触发时会创建一个事件对象，当多个事件被触发时就会创建多个事件对象，这样存在内部分配的问题。对于合成事件来说，有一个专门事件池来管理事件的创建和销毁，当需要使用事件时，就会在事件池中复用对象，事件回调结束后，再销毁事件对象上的属性，以便于下次再复用对象。这样做就不会为每个事件都创建一个事件对象，减少了内存的消耗，提升性能。

SyntheticEvent是React合成事件的基类，定义了合成事件的基础公共属性和方法。

React会根据当前的事件类型来使用不同的合成事件对象，比如单击事件SyntheticMouseEvent，焦点事件SyntheticFocusEvent等，这些事件都继承SyntheticEvent。

合成事件原理

1. 当用户在为onClick添加函数时,React并没有将Click绑定到DOM上
2. 1. 而在document处监听所有支持的事件,当事件发生并冒泡至document处时,React将事件内容封装交给中间层SyntheticEvent (负责所有事件合成)
3. 1. 然后使用统一的分发函数 dispatchEvent 将封装的事件内容交由真正的处理函数执行