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

2024-09-29 15:13:21

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 上注册的事件最终会绑定在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后，事件触发顺序如下：

结论：

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

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

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

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

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

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合成事件与原生事件的资料请关注我们其它相关文章！

React事件节流效果失效的原因及解决

今天做react项目中,给一个 input onKeyDown 事件做节流,出现了节流效果失效. 问题代码: render() { return ( <div className="search-bar"> <input className="search-input" type="text" placeholder="请输入要搜索的用户名(英文)" onKeyDown={this.throttle(this
React事件机制源码解析

React v17里事件机制有了比较大的改动,想来和v16差别还是比较大的. 本文浅析的React版本为17.0.1,使用ReactDOM.render创建应用,不含优先级相关. 原理简述 React中事件分为委托事件(DelegatedEvent)和不需要委托事件(NonDelegatedEvent),委托事件在fiberRoot创建的时候,就会在root节点的DOM元素上绑定几乎所有事件的处理函数,而不需要委托事件只会将处理函数绑定在DOM元素本身. 同时,React将事件分为3种类型--d
通过实例学习React中事件节流防抖

节流方法一 import Throttle from 'lodash-decorators/throttle'; export default class Search extends Component { constructor(props) { super(props) this.handleSearch = this.handleSearch.bind(this); } handleSubmit = (e) => { e.preventDefault(); this.handleSea
React中事件绑定this指向三种方法的实现

1.箭头函数 1.利用箭头函数自身不绑定this的特点; 2.render()方法中的this为组件实例,可以获取到setState(); class App extends React.Component{ state ={ count: 0 } // 事件处理程序 onIncrement() { console.log('事件处理函数中的this:',this) this.setState({ count:this.state.count+1 }) } // 渲染 render() { re
React中阻止事件冒泡的问题详析

前言最近在研究react.redux等,网上找了很久都没有完整的答案,索性自己整理下,这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容,下面话不多说了,来一起看看详细的介绍吧在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理事件捕获与冒泡 DOM 事件会先后经历捕获与冒泡两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡. IE9 及之前的版本只支持冒泡 | A --------------
详解Python的Twisted框架中reactor事件管理器的用法

铺垫在大量的实践中,似乎我们总是通过类似的方式来使用异步编程: 监听事件事件发生执行对应的回调函数回调完成(可能产生新的事件添加进监听队列) 回到1,监听事件因此我们将这样的异步模式称为Reactor模式,例如在iOS开发中的Run Loop概念,实际上非常类似于Reactor loop,主线程的Run Loop监听屏幕UI事件,一旦发生UI事件则执行对应的事件处理代码,还可以通过GCD等方式产生事件至主线程执行. 上图是boost对Reactor模式的描绘,Twisted的设计就是基于
React合成事件详解

react合成事件指的是react用js模拟了一个Dom事件流.(fiber树模拟Dom树结构) 合成事件的事件流在fiber树中发生捕获和冒泡. 从点击输入框开始当你点击input输入框,react在根节点(注1)监听到focus事件(注2)(注3). 如何从原生事件找到对应的虚拟Dom? 此时,react得到的信息只有原生事件对象(nativeEvent).react通过nativeEvent对应的Dom(eventTarget),沿着Dom树向上找到距离该eventTarget最近的被r
详细分析React 表单与事件

本章节我们将讨论如何在 React 中使用表单. HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态. 在 HTML 当中,像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态,并根据用户输入进行更新.但在React中,可变的状态通常保存在组件的状态属性中,并且只能用 setState() 方法进行更新. 一个简单的实例在实例中我们设置了输入框 input 值 value =
React学习之JSX与react事件实例分析

本文实例讲述了React学习之JSX与react事件.分享给大家供大家参考,具体如下: 1.JSX 1.1.表达式在React中使用JSX来描述HTML页面,而且可以与js混合使用,使用JavaScript表达式时要将表达式包含在大括号里 const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( //将JSX语句保存在变量中 <h1> Hello, {formatName(user)}! {/* {}
react合成事件与原生事件的相关理解

1. 原生事件原生事件就是js的原生事件,如通过document.addEventListener来设置的监听事件. 在react中即使有自己的一套事件机制(见下面合成事件),但有时候的业务场景我们仍然需要使用原生事件.比如我们封装一个Modal弹窗组件,需要在点击非弹窗区域时关掉弹窗,此时我们只能针对document进行原生点击事件监听. 由于原生事件需要绑定在真实DOM上,所以一般是在componentDidMount阶段或者组件/元素的ref的函数执行阶段进行绑定操作,并且注意要在com
vue学习笔记之给组件绑定原生事件操作示例

本文实例讲述了vue学习笔记之给组件绑定原生事件操作.分享给大家供大家参考,具体如下: 当在父组件中定义一个点击事件,并且在父组件的methods中定义了这个点击事件时,在页面上点击并不会有什么反应.那么该怎么办呢? 我们可以在子组件的template中的dom上定义一个点击事件(原生事件),并且在子组件的methods中定义该点击事件,然而点击页面时也只会alert(child click ). 这是为什么呢?父组件的点击事件被vue当成自定义事件,点击后没有检测到,这时需要子组件向父组件触发
React合成事件原理解析

目录事件介绍什么是事件? 举个栗子代码实现 React合成事件基础知识什么是合成事件? 在React中事件的写法和原生事件写法的区别? 为什么会有合成事件? 合成事件机制简述 React合成事件实现原理事件注册事件触发-事件监听器做了什么 React中模拟冒泡和捕获总结事件介绍什么是事件? 事件是在编程时系统内发生的动作或者发生的事情,而开发者可以某种方式对事件做出回应,而这里有几个先决条件事件对象给事件对象注册事件,当事件被触发后需要做什么事件触发举个栗子在机场等待
不要使用jQuery触发原生事件的方法

JavaScript 框架提供了如此多的功能,以至于一不小心就会掉进坑里去. 对工具库依赖得越多,在修改或维护时一个小小的改的很可能就会影响到其他的功能(俗称处处是地雷,走路需谨慎),特别是维护多年前的遗留代码时. 我经常看到的一个错误是关于 jQuery的 trigger, trigger允许开发者手动触发某些事件. 这个功能真的非常强大与好用,但是请遵守约定,不要触发JS中那些原生的事件名称! 注:我知道,其他JS框架也提供这种功能 -- 我只用jQuery作为一个例子,因为我看到了它的受
Vue如何实现监听组件原生事件

在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过this.$emit将事件发射到Home组件中,又在Home中监听自定义事件,比较复杂.因此,我们直接在Home中对BackTop组件进行监听,使用 .native 官网对于native的解释为: .native:监听组件根元素的原生事件代码如下: 在Home.vue中对back-top组件进行点击事件
vue自定义组件如何添加使用原生事件

目录自定义组件如何添加使用原生事件 . $emit()传递 . native属性 vue使用原生事件自定义组件如何添加使用原生事件自定义组件(Components)是vue的重要知识块之一,使用中不少人会发现一个问题:为什么我在组件里绑定click事件不起作用?这里先看看原因吧. 在自定义组件中直接绑定原生事件vue可是"不待见"的,它会认为你没有定义这个事件,所以没有任何反应. 哪些是原生事件? 例如click单击.mouseover鼠标移入.mouseout鼠标移出.keyu
React实现监听粘贴事件并获取粘贴板中的截图

目录监听粘贴事件并获取粘贴板中的截图 TSX中给组件添加监听粘贴事件从粘贴板获取截图文件 React监听事件事件监听绑定的事件函数相关扩展监听粘贴事件并获取粘贴板中的截图 TSX中给组件添加监听粘贴事件 const pasteImageRef = useRef<HTMLDivElement>(null); useEffect(()=>{ //给组件添加监听粘贴事件 pasteImageRef.current?.addEventListener('paste',
JavaScript中的模拟事件和自定义事件实例分析

本文实例讲述了JavaScript中的模拟事件和自定义事件.分享给大家供大家参考,具体如下: 前面介绍了JavaScript中为事件指定处理程序的五种方式和JavaScript的事件对象event. 下面介绍JavaScript中的模拟事件和自定义事件. 1.DOM中的事件模拟 1) DOM中的事件模拟有以下3个步骤: 步骤1:创建事件对象event 可以在document对象上使用createEvent()方法创建event对象,此方法接收一个参数,即要创建的事件类型的字符串.在DOM2级中这
React Native与Android 原生通信的方法

我们用React Native 做混合开发的时候免不了要原生和React Native 进行通信交互,这篇文章就是分享原生模块与JS传递数据的几种方式. 总的步骤可以分为如下几点: 在原生端定义Module类,继承ReactContextBaseJavaModule,在Module类里,定义交互的方法. 定义Package类,继承ReactPackage,将Module实例添加到集合. 在android继承的ReactApplication,回调实现getPackages方法,将Package实