React合成事件

一、合成事件

• 1. event 是 SyntheticEvent ，模拟出来 DOM 事件所有能力
• 2. event.nativeEvent 是原生事件对象
• 3. 所有的事件，都被挂载到 document 上（React ≤ 16），React17之后是挂载到root组件
• 4. 和 DOM 事件不一样，和 Vue 事件也不一样
     
     div触发事件，DOM事件冒泡到document上，
     document会生成一个统一的合成事件对象
     再派发事件

二、为什么要合成事件机制？

1、更好的兼容性和跨平台

自己实现一套事件机制，尽可能摆脱了DOM事件的逻辑， 更好的兼容性和跨平台

2、挂载到document, 减少内存消耗，避免频繁解绑

事件挂载越多，内存消耗越高，（不用给每个子元素挂载事件，使用冒泡）

看似事件挂载到组件上，其实是在document，组件销毁的时候，也不用解绑事件

3、方便事件的统一管理（如事务机制）

三、React事件绑定

• React16 绑定到document
• React 17 18绑定到root组件
• 有利于多个React版本并存，例如微前端