React 事件机制

简述

1 .当我们在组件上设置事件处理器时,React并不会在改DOM元素上直接绑定事件处理器,而是在react内部自定义一套事件系统,在这个系统上进行统一的事件订阅和分发
2 .我怀疑实现拖拽事件的时候,相同的代码在vue和react上面有不同的表现,就是和他的事件绑定系统有关
3 .react利用事件委托机制在Document上统一监听DOM事件,在根据触发的target将事件分发到具体的组件实例,实际我们在事件里面拿到的event其实并不是原始的DOM事件对象,而是一个合成事件对象

为什么需要

1 .抹平浏览器之间的兼容性差异,react还会通过其他事件来模拟一些低版本不兼容的事件
2 .事件合成,自定义高级事件,比如onChange事件,为表单元素定义了统一的值来变动事件
3 .React打算更多优化。比如利用事件委托,大部分事件最总绑定了Document,而不是dom节点本身,这样简化了dom事件处理逻辑,减少了内存的开销。react自己实现了一套模拟事件冒泡的机制
4 .react干预了事件的分发。Fiber架构,优化了用户的交互体验,干预事件的分发,不同的事件有不同的优先级。高的优先级事件可以中断渲染,让用户代码即使响应用户交互

Plugin 事件系统使用了插件机制来管理不同行为的事件。这些插件分别处理自己负责的事件类型。最后合成事件

1 .simpleEventPlugin:简单事件,click,input,keyDown,mouseOver,mouseOut,pointOver,pointOut
2 .EnterLeavEventPlugin:mouseEnter,mouseLeave,pointEnter,pointLeave.这类事件比较特殊

1 .不支持冒泡
2 .*enter事件会给所有进入的元素发送事件,如果树级层次比较深,大量的mouseenter会触发导致性能问题
3 .react使用*over/*out来模拟*enter/*leave事件

3 .changeEventPlugin:change事件是react的一个自定义事件,旨在规范表单元素变动事件,支持input,textarea,select
4 .selectEventPlugin:和change事件一样,为表单元素规范了select事件,用于input,textarea,contentEditable元素
5 .beforeInputEventPlugin:beforeInput事件以及composition事件的处理

ReactEventListener

1 .事件处理器,在这里进行事件处理器的绑定。当dom触发事件时,从这里开始调度分发到react组件树

ReactEventEmitter

1 .暴露接口给React组件层用于添加事件订阅

EventPropagator

1 .负责批量执行事件队列和事件处理器,比如事件冒泡

SyntheticEvent

1 .合成事件的基类
2 .可以对应dom的event事件,但是react为了减少内存损耗和垃圾回收
2 .使用一个对象池来构建和释放事件对象

事件分类和优先级

1 .事件分类

1 .离散事件(3):click,blur,focus,submit,tuchStart离散就触发
2 .用户阻塞事件(2):事件会阻塞用户的交互:touchMove,mouseMove,scrroll,drag,dragOver
3 .可持续事件(1):load,error,loadStart,abort,animationend,这个优先级越高,也就是应该立即同步执行。可连续执行,不会被打断

2 .事件优先级

1 .Immediate:马上同步执行,且不会被中断
2 .UserBlocking:一般是用户交互的结果,需要及时得到反馈
3 .Normal:应对那些不需要立即感受到的任务,比如网络请求
4 .low:可以放后,最后执行到了就可以
5 .idle:没有必要做的任务

绑定事件

1 .在props初始化和更新时会进行事件绑定。
2 .首先会判断元素是否是媒体类型,媒体类型的元素无法在document上面监听,直接在元素上进行绑定
3 .反之就是在document上绑定,需要两个东西

1 .事件依赖表:mouseEnter依赖mouseover/mouseout
2 .reactBrowerEventemitter维护的“已订阅事件表”,事件处理只需要在document订阅一次。所以比在每个元素上订阅事件省略很多资源

分发事件

1 .为了避免频繁创建和释放事件对象导致性能损耗(对象创建和垃圾回收),React使用一个事件池来负责管理事件对象,使用完的事件对象会放回池中,以备后续的复用
2 .

未来:react-event

1 .可以实现跨平台,跨设备的高级事件封装
2 .事件响应器(Event Responders)会挂载到host节点,它会在host节点监听host或子节点分发的原生事件(DOM或React Native), 并将它们转换/合并成高级的事件:

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容