React 事件绑定原理

React 事件绑定原理

一、react并没有使用原生的浏览器事件，而是在基于Virtual
DOM的基础上实现了合成事件，采用小驼峰命名法，默认的事件传播方式是冒泡，如果想改为捕获的话，
直接在事件名后面加上Capture即可；事件对象event也不是原生事件对象，而是合成对象，但通过nativeEvent属性可以访问原生事件对象；
二、react合成事件主要分为以下三个过程：
1、事件注册
在该阶段主要做了两件事：document上注册、存储事件回调。所有事件都会注册到document上，
拥有统一的回调函数dispatchEvent来执行事件分发，类似于document.addEventListener("click",dispatchEvent)。
register:
addEventListener-click
addEventListener-change

listenerBank:
{
click: {key1: fn1, key2: fn2},
change: {key1: fn3, key3: fn4}
}
2、事件合成
事件触发后，会执行一下过程：
(1)进入统一的事件分发函数dispatchEvent；
(2)找到触发事件的 ReactDOMComponent；
(3)开始事件的合成；
—— 根据当前事件类型生成指定的合成对象
—— 封装原生事件和冒泡机制
—— 查找当前元素以及他所有父级
—— 在listenerBank根据key值查找事件回调并合成到 event(合成事件结束)
3、批处理
批量处理合成事件内的回调函数

Q.E.D.