react 事件机制

一、合成事件

react 基于 vitrual dom 实现了 syntheticEvent (合成事件),react 事件处理器接收到一个 syntheticEvent 对象,syntheticEvent 和原生浏览器事件一样拥有同样的接口,也支持事件冒泡机制。可以通过 stopPropgation 和 preventDefault  中断。如果需要访问原生事件对象,可以使用 nativeEvent 属性。

二、实现机制

react 的事件机制利用了事件委托机制。事件并没有绑定在真实的 dom 节点上,而是把事件都绑定在结构的最外层 document,使用一个统一的事件监听器。所有的事件都由这个监听器统一分发。

组件挂载和更新时,会将绑定的事件分门别类的放进一个叫做EventPluginHub的事件池里。事件触发时,根据事件产生的Event对象找到触发事件的组件,再通过组件标识和事件类型从事件池里找到对应的事件监听回调,然后执行相关的监听函数。

三、react 中怎么使用原生

在 didmount 中,也可以对真实的 dom 节点,进行原生的事件绑定,原生事件的绑定要在 unmount 时进行解绑,以防止内存泄漏

但 syntheticEvent 的 stopPropgation 无法阻止原生事件的冒泡。反之原生事件的阻止冒泡行为,却可以阻止合成事件的传播。所以尽量不要原生与合成事件混用,如必须混用,又无法阻止冒泡,使用 e.target 进行判断。

四、异步回调怎么使用 syntheticEvent

React追求极致的性能。在合成事件机制里,一旦事件监听回调被执行,合成事件对象就会被销毁,异步的回调执行的时候合成事件对象早就被销毁了。解决方法,就是执行下面的 event.persist(); 用于通知 react 不需要回收,

五、与原生对比

由于原生的捕获机制并不常用,且具有 ie 的不兼容问题, react 仅实现了冒泡机制。既没有兼容问题,而且使用委托机制只有 document 节点上才有 DOM 事件也节约了内存。

六、事件执行

找到事件触发的 DOM 和 React Component,从该 React Component,调用 findParent 方法,遍历得到所有父组件,存在数组中。从该组件直到最后一个父组件,根据之前事件存储,用 React 事件名 + 组件 key,找到对应绑定回调方法。

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

相关阅读更多精彩内容

  • 上一篇讲述了React事件的使用,这一篇主要讲述React的事件机制,主要包含事件注册、触发以及回调函数的存储,最...
    宁小姐的慢时光阅读 13,978评论 2 13
  • 今天遇到这么一个问题: 我们在实现列表拖拽排序时使用了react-sortable-hoc这个库,确实很好用,利用...
    牧羊童鞋阅读 6,972评论 0 2
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 7,860评论 1 18
  • 函数式编程,对应的是声明式编程,声明式编程的本质的lambda验算(是一个匿名函数,即没有函数名的函数。Lambd...
    不安分的三好份子阅读 4,902评论 0 1
  • 本文通过一个简短的实例&控制台调试,了解react事件处理的全过程。下面是测试用代码,使用控制台可以清晰看到函数执...
    溪离欣洛阅读 4,973评论 2 2

友情链接更多精彩内容