react事件注册

Posted 2023-02-28

参考技术A react的事件是合成事件((Synethic event)，不是原生事件

<buttononClick=this.handleClick></button><inputvalue=this.state.nameonChange=this.handleChange/>

合成事件与原生事件的区别

1. 写法不同，合成事是驼峰写法，而原生事件是全部小写

2. 执行时机不同，合成事全部委托到document上，而原生事件绑定到DOM元素本身

3. 合成事件中可以是任何类型，比如this.handleClick这个函数，而原生事件中只能是字符串

react事件执行大致流程如下图

React中的事件机制分为两个阶段:事件注册和事件触发:

事件注册

React在组件加载(mount)和更新(update)时,其中的ReactDOMComponent会对传入的 事件属性 进行处理，对相关事件进行注册和存储。document中注册的事件不处理具体的事件，仅对事件进行分发。ReactBrowserEventEmitter作为事件注册入口，担负着事件注册和事件触发。注册事件的回调函数由EventPluginHub来统一管理，根据事件的类型(type)和组件标识(_rootNodeID)为key唯一标识事件并进行存储。

事件执行

事件执行时，document上绑定事件ReactEventListener.dispatchEvent会对事件进行分发，根据之前存储的类型(type)和组件标识(_rootNodeID)找到触发事件的组件。ReactEventEmitter利用EventPluginHub中注入(inject)的plugins(例如:SimpleEventPlugin、EnterLeaveEventPlugin)会将原生的DOM事件转化成合成的事件，然后批量执行存储的回调函数，回调函数的执行分为两步，第一步是将所有的合成事件放到事件队列里面，第二步是逐个执行。需要注意的是，浏览器原生会为每个事件的每个listener创建一个事件对象，可以从这个事件对象获取到事件的引用。这会造成高额的内存分配，React在启动时就会为每种对象分配内存池，用到某一个事件对象时就可以从这个内存池进行复用，节省内存。

1.减少内存消耗，提升性能，不需要注册那么多的事件了，一种事件类型只在 document 上注册一次

2.统一规范，解决 ie 事件兼容问题，简化事件逻辑

3.对开发者友好

React Event的主要四个文件是ReactBrowerEventEmitter.js（负责节点绑定的回调函数，该回调函数执行过程中构建合成事件对象，获取组件实例的绑定回调并执行，若有state变更，则重绘组件），ReactEventListener.js（负责事件注册和事件分发），ReactEventEmitter（负责事件的执行），EventPluginHub.js（负责事件的存储）和ReactEventEmitterMixin.js（负责事件的合成）。

1.进入统一的事件分发函数(dispatchEvent)

2.结合原生事件找到当前节点对应的ReactDOMComponent对象

3.开始事件的合成

3.1 根据当前事件类型生成指定的合成对象

3.2 封装原生事件和冒泡机制

3.3 查找当前元素以及他所有父级

3.4 在listenerBank查找事件回调并合成到 event(合成事件结束)

4.批量处理合成事件内的回调事件（事件触发完成 end）