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 相关文章推荐
JavaScript中的Location地址对象
Jan 16 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
js实现网页定位导航功能
Mar 07 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 Javascript
vue实现可拖拽的dialog弹框
vue如何批量引入组件、注册和使用详解
JavaScript继承的三种方法实例
May 12 #Javascript
canvas绘制折线路径动画实现
JavaScript原始值与包装对象的详细介绍
May 11 #Javascript
vue组件的路由高亮问题解决方法
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 #Javascript
You might like
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
python线程池的实现实例
2013/11/18 Python
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
Farnell德国:电子元器件供应商
2018/07/10 全球购物
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
传播学毕业生求职信
2013/10/11 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
精彩广告词大全
2014/03/19 职场文书
纠纷协议书
2014/04/16 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技