react事件机制

143 阅读2分钟

React并没有原生地绑定在真实的dom上,而是使用了行为委托的方式实现事件机制。

    a. 触发click的时候,实际上首先经历捕获阶段,由父级元素将事件一直穿到到事件发生的目标元素
    b. 目标元素执行事件后,经历冒泡阶段,将事件从子元素向父元素冒泡
    c. 挂载或者卸载组件时,只需要删除统一的事件监听位置即可。

react并没有使用原生的浏览器事件,而是基于virtualDom的基础上实现了合成事件。合成事件完全符合w3c的标准,因此具备浏览器兼容性。

 一样可以通过stopPropagation()和preventDefault()实现中断和响应。

事件机制分为事件注册和事件触发

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

事件执行:

事件执行时,document上绑定事件ReactEventListener.dispatchEvent会对事件进行分发,根据之前存储的类型和组件标识找到触发事件的组件。

ReactEventEmitter利用EventPluginHub中注册(inject)的plugins会将原生的Dom事件转化为合成事件,然后批量执行存储的回调函数。

第一步:将合成事件放到事件队列里面
第二步:逐步执行

注意: 浏览器会为每个事件的每个listener创建一个事件对象,可以从这个事件对象获取到事件的引用,这会造成高额的内存分配。

所以react启动时,会为每种对象分配内存池,用到某一个事件对象时,就可以从这个内存池进行复用,节省内存。

react阻止原生事件,解决方法一是不要将react事件和原生事件混用,而是利用target进行判断。