react合成事件与原生事件的相关理解


Posted in Javascript onMay 13, 2021

1. 原生事件

原生事件就是js的原生事件,如通过document.addEventListener来设置的监听事件。

在react中即使有自己的一套事件机制(见下面合成事件),但有时候的业务场景我们仍然需要使用原生事件。比如我们封装一个Modal弹窗组件,需要在点击非弹窗区域时关掉弹窗,此时我们只能针对document进行原生点击事件监听。

由于原生事件需要绑定在真实DOM上,所以一般是在componentDidMount阶段或者组件/元素的ref的函数执行阶段进行绑定操作,并且注意要在componentWillUnmount阶段进行解绑操作以避免内存泄漏。

2. 合成事件

React有自己的一套事件机制,它重新封装了绝大部分的原生事件。合成事件采用了事件池,这样做可以大大节省内存,而不会频繁的创建和销毁事件对象。

在React中,如果需要绑定事件,我们常常在jsx中这么写:

handleClick(){
}
<div onClick={this.handleClick.bind(this)}>
	react事件
</div>

大致原理:

React并不是将click事件绑在该div的真实DOM上,而是在document处监听所有支持的事件,当事件发生并冒泡至document处时,React将事件内容封装并交由真正的处理函数运行。

以上面的代码为例,整个事件生命周期示意如下:

react合成事件与原生事件的相关理解

合成事件的一些特点总结:

  • React 上注册的事件最终会绑定在document这个 DOM 上,而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上,其他节点没有绑定事件)
  • React 通过队列的形式,从触发的组件向父组件回溯,然后调用他们 JSX 中定义的 callback
  • React 通过对象池的形式管理合成事件对象的创建和销毁,减少了垃圾的生成和新对象内存的分配,提高了性能

了解react合成事件的大概原理后,方便我们解答下面一个问题:

为什么react事件需要手动绑定this

合成事件触发之后会冒泡一路到document的节点,然后开始分发document节点收集到的事件,这个时候react从事件触发的组件实例开始, 遍历虚拟dom树,从树上取下我们绑定的事件,收集起来,然后执行。举个例子:

class Test extends React.Component {
   fatherHandler =  function father() { /*...*/}
   childHander = function child() {/*...*/}

   render(){
     return (
       <div onClick={this.fatherHandler}>
         <span onClick={this.childHander}>
         </span>
       </div>
     );
   }

}

当事件触发以后react会把上面的事件处理函数放到一个数组里是这样的

[father, child]

最后,react只要遍历执行这个数组,就能执行所有需要执行的事件处理函数。这里react对函数进行了临时保存,这个时候执行的话,this自然就丢失了。

如果react保存顺便保存一下实例,还是可以做到,不需要你绑定this的,但是这样对于react来说代价太大了。

3. 原生与合成事件触发顺序

componentDidMount() {
    this.parent.addEventListener('click', (e) => {
      console.log('dom parent');
    })
    this.child.addEventListener('click', (e) => {
      console.log('dom child');
    })
    document.addEventListener('click', (e) => {
      console.log('document');
    })
  }

  childClick = (e) => {
    console.log('react child');
  }

  parentClick = (e) => {
    console.log('react parent');
  }

  render() {
    return (
      <div onClick={this.parentClick} ref={ref => this.parent = ref}>
        <div onClick={this.childClick} ref={ref => this.child = ref}>
          test
        </div>
      </div>)
  }

点击child中的test后,事件触发顺序如下:

react合成事件与原生事件的相关理解

结论:

无论是否是对于同一元素监听的同种类型事件,原生事件总是比合成事件先触发。这是由于上面我们说到的合成事件最终都会绑定到documnet DOM上导致的,当合成事件监听到后,总是冒泡到document才会真正触发。 而documnet DOM上监听的原生事件则总是最后触发

4. 合成事件和原生事件混用

react合成事件和原生事件最好不要混用。

原生事件中如果执行了stopPropagation(阻止冒泡)方法,则很容易导致其他同类型react合成事件失效。因为这样所有同级以及后代元素的合成事件和原生事件都将无法冒泡到document上。

而如果仅仅是合成事件中使用了e.stopPropagation(阻止冒泡)方法,则不会影响原生事件的冒泡

相关疑问:

我们知道React事件监听器中获得的入参并不是浏览器原生事件,原生事件可以通过e.nativeEvent来获取。通过这种方式,合成事件可以影响原生事件吗?

e.nativeEvent.stopPropagation

即使在react的合成事件中调用原生事件的阻止冒泡,实际作用是在DOM最外层阻止冒泡,并不符合预期。也就是说它最终只能控制当前监听的合成事件不会冒泡到document DOM的原生事件

e.nativeEvent.stopImmediatePropagation

该方法与上面的nativeEvent.stopPropagation有类似的功能,都可阻止当前监听的合成事件冒泡到document DOM的原生事件

stopImmediatePropagation常常在多个第三方库混用时,用来阻止多个事件监听器中的非必要执行。比如同一个元素的同种事件,设置了多个监听事件函数,则该方式可以控制监听函数只触发第一个

stopImmediatePropagation和stopPropagation本都是原生事件,但在React自己的事件体系中,重新封装了后者,却没有封装前者。导致在合成事件中只能手动调用nativeEvent.stopImmediatePropagation。

因为在React的合成事件机制中,一个组件只能绑定一个同类型的事件监听器(重复定义时,后面的监听器会覆盖之前的),所以合成事件无需去封装stopImmediatePropagation。

所以,在React的合成事件中,e.nativeEvent.stopPropagation和e.nativeEvent.stopImmediatePropagation实际的作用是等价的

此外,由于事件绑定的顺序问题,需要注意,如果是在react-dom.js加载前绑定的document原生事件,stopImmediatePropagation也是无法阻止的。

以上就是react合成事件与原生事件的相关理解的详细内容,更多关于react合成事件与原生事件的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
一个js写的日历(代码部分网摘)
Sep 20 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
vue实现可拖拽的dialog弹框
vue如何批量引入组件、注册和使用详解
JavaScript继承的三种方法实例
May 12 #Javascript
canvas绘制折线路径动画实现
JavaScript原始值与包装对象的详细介绍
May 11 #Javascript
vue组件的路由高亮问题解决方法
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 #Javascript
You might like
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
Python进行数据提取的方法总结
2016/08/22 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
python中二分查找法的实现方法
2020/12/06 Python
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
ddl,dml和dcl的含义
2016/05/08 面试题
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
开发房地产协议书
2014/09/14 职场文书
幼儿园见习报告
2014/10/30 职场文书
2015年试用期工作总结
2014/12/12 职场文书
2019销售早会主持词
2019/06/27 职场文书
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript