React 事件系统

1.什么是react事件合成

在react中，我们使用的事件onclick等，并不是原生事件，是由原生事件合成的react事件, 如 click事件合成onclick等。

• 我们绑定在 dom上的事件逻辑，并没有 注册到真实dom上， 而是统一绑定在了 document上管理
• 绑定在dom的事件已经被react底层处理成空函数

为什么要做事件合成呢？

1. 为了防止 很多事件绑定在真实dom上的不可控的情况
2. 也是react的出发点，为了实现一个全浏览器的框架，为了实现这种目标就需要提供全浏览器一致性的事件系统，以此抹平不同浏览器的差异。

2.事件系统主要有三个过程

1. 事件初始化(事件合成)
2. 事件绑定
3. 事件触发

 

2.1 事件初始化：

• 构建react合成事件与原生事件的关系, 合成事件 和对应处理插件关系

2.2 事件绑定：

• 根据 react合成事件类型，找到对应的原生事件类型，然后调用原生判断类型，大部分事件都按照冒牌事件处理, 少数事件会按照捕获事件处理(如scroll, focus, blur)
• 调用addTrappedEventListener进行事件绑定，将事件绑定在document上, dispatchEvent为事件统一处理函数

2.3 事件触发：

• 通过事件的统一处理函数dispatchEvent 进行批量更新batchUpdate
• 执行事件处理插件，合成源对象，每次事件会从源对象开始遍历dom类型的fiber,判断props中是否有当前事件比如onClick,最终形成一个事件执行队列
• 最后执行 事件队列