说说react的事件机制

背景

网看到很多 React 的解析，有 事件机制、Fiber、Hooks，但是很多知识相对零散只集中在一个点，自己对 React 没有一个完成的知识图谱，想自己慢慢去看 React 的源码，一部分一部分的学习 React，最后形成一个自己的 React 知识图谱，这片文章只是一个开始，后面会持续学习

长话短说

我们先话短说，React 的事件机制其实使用了 事件委托 的方式，React 在内部自己实现了浏览器中对应事件的合成事件，web 浏览器中，浏览器在生成虚拟 dom 树的时候，解析出的合成事件挂载到 document 上 (native 中不是很了解)，部分事件仍然在 dom 元素上，事件的实现是插件的机制，方便后续拓展事件。

大多数事件是指 React 内部实现了对应事件的合成事件

React 事件带来的优势

1. React 合成事件的实现参照 w3c 的标准，抹平了不同浏览器的差异，用户不再需要关注事件的兼容性问题
2. React 将事件都挂在到 document，减少了 dom 节点上的事件信息，能够优化性能
3. React 事件机制其实和 React Virtual dom 的功能相似，React 团队期望 React 能够在多端运行 (比如
React-Native)，而事件的挂在可以在不同运行环境挂在到不同的 节点上，从而实现不同端的运行，只需要在
事件机制中做兼容就好，比如 Responderxxx 文件，就只支持 React-Native 的
4. 事件分发: React 最新的调度算法 Fiber 会对优化交互体验，内部优化浏览器渲染，干预事件分发也可以做更多的优化

事件机制的实现

React 事件机制我们主要分三部分来说
1. 插件注册: 插件注册到一起，方便后面使用
2. 事件注册: DOM 的 props 中有事件属性，将事件挂载到 document (统一按照 web 浏览器来，也可能是
Iframe)，注册相应的 listener
3. 事件分发: 在监听的 listener 中，关联到 插件，执行对应事件，根据不同的事件类型，事件执行也有不同的方式。

总结

React 的事件机制大体的流程和上面的内容是一致的，不过内部还有很多的细节需要看代码才能清楚。而且项目里面还有和其他地方耦合的代码所以代码看起来比较凌乱，但是思路是很清晰的。
事件机制其实本质上是很简单的，但是 React 团队为了保证整体的灵活性，其实在设计上做了很多功夫，也是我在开发中需要借鉴的地方。看代码也是这样，其实思路清楚了代码也就容易看很多了。