说说react的事件机制？

一、react的事件机制

• react自身实现了一套事件机制，包括事件的注册、事件的存储、事件的合成及执行等。
• react 的所有事件并没有绑定到具体的dom节点上而是绑定在了document 上，然后由统一的事件处理程序来派发执行。
• 通过这种处理，减少了事件注册的次数，另外react还在事件合成过程中，对不同浏览器的事件进行了封装处理，抹平浏览器之间的事件差异。

二、对合成事件的理解

• （1）对原生事件的封装

react会根据原生事件类型来使用不同的合成事件对象
比如: 聚焦合成事件对象SyntheticFoucsEvent（合成事件对象：SyntheticEvent是react合成事件的基类，定义了合成事件的基础公共属性和方法。
合成事件对象就是在该基类上创建的）

• （2）不同浏览器事件兼容的处理

在这里插入代码片在对事件进行合成时，react针对不同的浏览器，也进行了事件的兼容处理

三、事件机制的流程

事件注册

在组件挂载阶段，根据组件内声明的事件类型-onclick，onchange 等，给 document 上添加事件 -addEventListener，并指定统一的事件处理程序 dispatchEvent。

事件存储

完成事件注册后，将 react dom ，事件类型，事件处理函数 fn 放入数组存储，组件挂载完成后，经过遍历把事件处理函数存储到 listenerBank(一个对象)中，缓存起来，为了在触发事件的时候可以查找到对应的事件处理方法去执行。

开始事件的存储，在 react 里所有事件的触发都是通过 dispatchEvent方法统一进行派发的，而不是在注册的时候直接注册声明的回调，来看下如何存储的 。
react 把所有的事件和事件类型以及react 组件进行关联，把这个关系保存在了一个 map里，也就是一个对象里（键值对），然后在事件触发的时候去根据当前的 组件id和 事件类型查找到对应的 事件fn

事件执行

1、进入统一的事件分发函数(dispatchEvent)
2、结合原生事件找到当前节点对应的ReactDOMComponent对象
3、开始 事件的合成
	根据当前事件类型生成指定的合成对象
	封装原生事件和冒泡机制
	在 listenerBank事件池中查找事件回调并合成到 event(合成事件结束)
4.处理合成事件内的回调事件（事件触发完成 end）

四、合成事件、原生事件之间的冒泡执行关系

结论：

• 原生事件阻止冒泡肯定会阻止合成事件的触发。
• 合成事件的阻止冒泡不会影响原生事件。

原因：

浏览器事件的执行需要经过三个阶段，捕获阶段-目标元素阶段-冒泡阶段。

节点上的原生事件的执行是在目标阶段，然而合成事件的执行是在冒泡阶段，所以原生事件会先合成事件执行，然后再往父节点冒泡，所以原生事件阻止冒泡会阻止合成事件的触发，而合成事件的阻止冒泡不会影响原生事件。