React系列之合成事件与事件处理机制

文章目录

  • React事件处理机制
    • 原生事件的事件机制
      • 事件代理(事件委托)
    • 合成事件
      • 使用合成事件目的
      • 合成事件原生事件区别
      • 事件池
    • 原生事件和React事件的执行顺序
      • e.stopPropagation()
    • React17事件机制的修改

React事件处理机制

react 事件机制基本理解:react 基于浏览器的事件机制,自身实现了一套自己的事件机制,包括事件注册、事件的合成、事件冒泡、事件派发等。
react 的所有事件并没有绑定到具体的dom节点上而是绑定在了 document 上,然后由统一的事件处理程序来处理,同时也是基于浏览器的事件机制(冒泡),所有节点的事件都会在 document 上触发。

React 的事件处理机制可以分为两个阶段:

  • 初始化渲染时在 root 节点上注册原生事件;
  • 原生事件触发时模拟、目标和冒泡阶段派发合成事件。
    通过这种机制,冒泡的原生事件类型最多在 root 节点上注册一次,节省内存开销。且 React 为不同类型的事件定义了不同的处理优先级,从而让用户代码及时响应高优先级的用户交互,提升用户体验。

合成事件是 React 模拟原生 DOM 事件所有能力的一个事件对象,它可以兼容所有浏览器,也拥有和浏览器原生事件相同的接口。

原生事件的事件机制

在这里插入图片描述
事件流向分为三个阶段:捕获阶段、目标阶段、冒泡阶段。
捕获阶段是指事件响应从最外层的Window开始逐层向内层推进,直到具体的目标元素。
目标阶段是触发事件的目标元素。
冒泡阶段与捕获阶段相反,事件的响应是从最底层开始一层层向外传递到最外层的Window。

我们可以通过element.addEventListener()设置一个元素的事件模型为冒泡事件还是捕获事件。
element.addEventListener(type, listener, useCapture)
type:监听的事件类型(例’click’)
listener:事件的回调函数
useCapture:默认值为false,表示元素事件模型为事件冒泡,设为true时为事件捕获。

在这里插入图片描述

事件代理(事件委托)

事件代理(也称为事件委托)是一种利用DOM事件机制,通过将事件处理程序添加到父元素而不是每个子元素上来提高性能的技术。当子元素上的事件触发时,事件会冒泡/捕获到父元素,然后由父元素上的事件处理程序进行处理。
例对于列表元素,我们希望将用户点击了哪个item打印出来,通常我们可以给每个item注册点击事件监听器,但通过事件代理,可以将多个事件监听器减少为一个,这样可以减少重复工作,也可以减少内存。还可以使新增元素动态绑定事件。

var items = document.getElementById('item-list');
//事件捕获实现事件代理
items.addEventListener('click', (e) => {console.log('捕获:click ',e.target.innerHTML)}, true);
//事件冒泡实现事件代理
items.addEventListener('click', (e) => {console.log('冒泡:click ',e.target.innerHTML)}, false);

事件代理既可以通过事件冒泡来实现,也可以通过事件捕获来实现。

合成事件

React 合成事件(SyntheticEvent)是 React 模拟原生 DOM 事件所有能力的一个事件对象,即浏览器原生事件的跨浏览器包装器。它根据 W3C 规范来定义合成事件,兼容所有浏览器,拥有与浏览器原生事件相同的接口。

即在react中,我们绑定的事件onClick等,并不是原生事件,而是由原生事件合成的React事件,比如 click 事件合成为 onClick 事件。比如 blur, change, input, keydown, keyup, 合成为 onChange。可以通过 e.nativeEvent 属性获取原生事件。

使用合成事件目的

  • 方便事件统一管理
  • 进行浏览器兼容,实现更好的跨平台
  • 避免垃圾回收:事件对象可能会被频繁创建和回收,因此 React 引入事件池,在事件池中获取或释放事件对象。即 React 事件对象不会被释放掉,而是存放进一个数组中,当事件触发,就从这个数组中弹出,避免频繁地去创建和销毁(垃圾回收) 。

合成事件原生事件区别

命名方式不同:原生事件命名为纯小写,合成事件命名用小驼峰。
事件处理函数写法不同:原生事件中函数为字符串,合成事件里为函数。
阻止默认行为方式不同:原生事件中可以返回 false 来阻止默认行为,合成事件里需要显式调用 e.preventDefault() 来阻止。

事件池

合成事件对象池,是 React 事件系统提供的一种性能优化方式。合成事件对象在事件池统一管理,不同类型的合成事件具有不同的事件池。
React 事件池仅支持在 React16 及更早版本中,在 React17 已经不使用事件池。

SyntheticEvent 对象会被放入池中统一管理。这意味着 SyntheticEvent 对象可以被复用,当所有事件处理函数被调用之后,其所有属性都会被置空。例如,以下代码是无效的:

function handleChange(e) {// This won't work because the event object gets reused.setTimeout(() => {console.log(e.target.value); // Too late!}, 100);
}

https://zh-hans.legacy.reactjs.org/docs/legacy-event-pooling.html

原生事件和React事件的执行顺序

React 所有事件都挂载在 document 对象上。当真实 DOM 元素触发事件,会冒泡到 document 对象后,再处理 React 事件。
所以会先执行原生事件,然后处理 React 事件,最后真正执行 document 上挂载的事件。

原生事件(阻止冒泡)会阻止合成事件的执行;合成事件(阻止冒泡)不会阻止原生事件的执行。

e.stopPropagation()

e.stopPropagation() 可以阻止合成事件在组件树中的冒泡传播。事件本身还都是在 document 上执行。不能阻止原生事件的冒泡传播。
原生事件中如果执行了 stopPropagation 方法,则会导致其他 React 事件失效。因为所有元素的事件将无法冒泡到document上。

React17事件机制的修改

  • 事件统一绑定container上,ReactDOM.render(app, container);而不是document上,这样好处是有利于微前端的,微前端一个前端系统中可能有多个应用,如果继续采取全部绑定在document上,那么可能多应用下会出现问题。比如如果你在一个 React 子应用的 React 事件中调用了 e.stopPropagation(),无法阻止事件冒泡到外部树,因为真实的事件早已传播到 document。
  • React17 对齐了浏览器原生标准。比如 onScroll 事件不再进行事件冒泡。onFocus 和 onBlur 使用原生 focusin, focusout 合成。
  • React17 取消事件池复用。“它并不会提高现代浏览器的性能,甚至还会使经验丰富的开发者一头雾水” -> React 在旧浏览器中重用了不同事件的事件对象,以提高性能,并将所有事件字段在它们之前设置为 null。在 React 16 及更早版本中,使用者必须调用 e.persist() 才能正确的使用该事件,或者正确读取需要的属性。

在这里插入图片描述

https://zh-hans.legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/783487.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

时序预测 | Matlab实现CPO-BP冠豪猪算法优化BP神经网络时间序列预测

时序预测 | Matlab实现CPO-BP冠豪猪算法优化BP神经网络时间序列预测 目录 时序预测 | Matlab实现CPO-BP冠豪猪算法优化BP神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现CPO-BP冠豪猪算法优化BP神经网络时间序列预测(完整源码…

Linux(CentOS7)安装软件方式(编译安装,yum,rpm)

目录 前言 安装方式 编译安装 下载 解压 安装 创建软链接 yum rpm 前言 在使用 CentOS 安装软件时,发现安装的方式有好几种,有官网下载 tar 包解压,然后自己编译安装的,也有直接通过 yum 命令一键安装的,还有…

力扣刷题Days29-第二题-70.爬楼梯(js)

只有学习,没有自己的思路解题哈哈哈 1,题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢? 2,代码 这种解法的本质是斐波那契数列 /*** param {number} n* re…

appium辅助自动化工具-- Appium studio

这里我要给大家介绍一款appium辅助自动化测试工具appium studio,你没看错,不是android studio,也不是appium android studio,就是appium studio! 下载地址: Appium Studio | Digital.ai Continuous Test…

探究ThreadLocal的魔数0x61c88647和Entry数组

探究ThreadLocal 下面有一个很重要的HASH_INCREMENT,他的值是0x61c88647 public class ThreadLocal<T> {/***ThreadLocals依赖于附加到每个线程的每线程线性探针哈希映射 (thread.threadLocals和inheritableThreadLocals)。ThreadLocal对象充当键&#xff0c;通过threa…

Visual Studio 2022 中VLD库如何安装

GitHub链接 Release v2.5.1 KindDragon/vld 点击可执行程序进行下载 点击可执行程序进行安装 双击打开 一直点击next即可完成安装&#xff08;不用在意安装路径&#xff0c;总共不到2MB&#xff09; 如果GitHub无法打开&#xff0c;可以私信我发你安装包直接安装

MyBatis的高级特性探索

MyBatis 是一个流行的Java持久层框架&#xff0c;它提供了简单和直观的方法来处理数据库操作。相比于传统的JDBC操作&#xff0c;MyBatis通过XML或注解方式映射Java对象与数据库之间的关系&#xff0c;极大地简化了数据库编程工作。除了基本的数据映射和SQL语句执行功能&#x…

VBA批量读取txt文档目标数据并分组处理

VBA在批量处理txt等文本文件的数据是其数据处理的一大重要应用&#xff0c;实际在处理txt文档往往需要提取多个测试料的多个目标数值&#xff0c;而且还要将提取的数值进一步处理&#xff0c;如求取平均值&#xff0c;最小值等&#xff0c;能够直观地看到一组数据的规律&#x…

Java学习笔记NO.27

Java异常 异常处理在Java编程中是一项至关重要的技术&#xff0c;它有助于增强程序的稳定性和可靠性。 1.为什么需要处理异常&#xff1f; 在编写Java程序时&#xff0c;我们无法保证代码的100%正确性&#xff0c;因为各种意外情况可能会导致程序出现错误。这些意外情况包括但…

二维码门楼牌管理应用平台建设:实现民主参与的新途径

文章目录 前言一、二维码门楼牌管理应用平台的兴起二、投票表决功能的实现三、居民参与度的提升四、面临的挑战与前景展望 前言 在数字化时代&#xff0c;二维码技术的应用已经渗透到我们生活的方方面面。近期&#xff0c;二维码门楼牌管理应用平台的建设成为了社区治理的一大…

学习嵌入式系统开发学习课程有哪些

学习嵌入式系统开发需要掌握一些基础的编程知识和硬件知识&#xff0c;以下是一些常见的嵌入式系统开发学习课程和资源&#xff1a; 1. **C/C编程课程**&#xff1a;掌握好C/C编程语言是嵌入式系统开发的基础&#xff0c;可以通过在线教育平台如Coursera、Udemy、edX等搜索相关…

[flask]请求全局钩子

flask从入门到精通之钩子、异常、context、jinjia模板、过滤器 - 异步非阻塞 - 博客园 (cnblogs.com) 参考的这个博客&#xff0c;但有一个需要注意的是&#xff0c;最新版本的flask不知道是不是更新了还是怎么了&#xff0c;他的before_first_request不见了&#xff0c;如果继…

Vue2源码 —— 数据响应式实现

Vue2源码 —— 数据响应式实现 配置项 //package.json {"name": "vue","version": "1.0.0","main": "index.js","scripts": {"dev": "rollup -cw"},"author": "&…

Linux非root用户安装mysql5.7

1、下载安装包MySQL :: Download MySQL Community Server 点击Archives 我下载的是5.7.27版本&#xff0c;linux主机直接选择linux-Generic即可&#xff0c;选择第一个包下载即可 2、安装mysql 解压 shell> tar xzvf mysql-5.7.31-linux-glibc2.12-x86_64.tar.gz shell&g…

VUE2实现元素抖动的指令

指令代码 要实现Vue2的指令&#xff0c;可以按照以下步骤进行&#xff1a; 创建一个指令对象。 export default {inserted: (el, binding) > {// 触发抖动效果if (!binding.value) return el.classList.remove(shake-animation)el.classList.add(shake-animation)const a…

抽象类和接口的简单认识

目录 一、抽象类 1.什么是抽象类 2.抽象类的注意事项 3.抽象类与普通类的对比 二、接口 1.接口的简单使用 2.接口的特性 3.接口的使用案例 4.接口和抽象类的异同 一、抽象类 所谓抽象类&#xff0c;就是更加抽象的类&#xff0c;也就是说&#xff0c;这个类不能具体描…

等级保护测评无补偿因素的高风险安全问题判例(共23项需整改)

层面 控制点 要求项 安全问题 适用范围 充分条件 整改建议简要 安全物理环境 基础设施位置 应保证云计算基础设施位于中国境内 1.云计算基础设施物理位置不当 二级及以上 相关基础设施不在中国境内 云平台相关基础设施在中国境内部署 安全通信网络 网络架构 应…

NFC RC522开发记录

文章目录 一、ID卡、IC卡(M1卡、CPU卡)的区别二、RC522读写操作1. 数据读写流程三、RC522驱动代码1. RC522 与 STM32 的接线图2. RC522.c3. RC522.h4. main.c一、ID卡、IC卡(M1卡、CPU卡)的区别 ID卡 :只存储了ID号,设备识别ID号,没有算法可言,容易复制,安全性低IC卡包含了…

ALPHA开发板上PHY网络芯片LAN8720:常用的几个寄存器功能

一. 简介 正点原子的开发板 ALPHA开发板&#xff0c;有线网络硬件方案所使用的也是最常用的一种方案&#xff0c;IMX6ULL芯片内部是自带 MAC网络芯片的&#xff0c;所以&#xff0c;也就是采用 "SOC内部集成网络MAC外设 PHY网络芯片方案"。 前面一篇文章简单了解了…

Asp.net Core 中一键注入接口

Asp.net Core 中一键注入接口 前言准备开始使用 前言 在之前开发Asp.Net Core程序时遇到接口需要一个一个的注入到Services中,当有非常多的接口需要注入时会显得代码成为了一座山,这里记录一下如何通过接口的命名一键自动注入. 准备 IDE: Visual studio 2022 .Net版本:.Net …