React(v18)事件原理

1. 背景

在旧版 React 中,事件的处理方式不完全符合标准的事件流顺序。事件的处理顺序是:

  1. 事件监听(比如通过 addEventListener 注册的事件)
  2. 捕获阶段的事件处理(即从父元素到子元素的处理)
  3. 冒泡阶段的事件处理(即从子元素到父元素的处理)

而新版 React(v18)修复了这个问题,将事件处理的顺序调整为:

  1. 捕获阶段的事件处理
  2. 事件监听(即 onClick 等处理函数)
  3. 冒泡阶段的事件处理

2. 事件绑定

新版 React 的事件绑定方式有所变化:

  • 在初始化时(即创建根元素时),React 会一次性在所有需要的地方注册事件监听器。
  • 对于每种事件,如果事件是不冒泡的,那么会执行一次,否则React 会在两个阶段进行绑定:捕获阶段和冒泡阶段。

3. 事件触发

当事件发生时,React 处理事件的步骤是:

  1. 事件分发: React 通过内部的 dispatchEvent 函数开始处理事件。
  2. 事件队列: React 会创建一个事件队列,将需要处理的事件按顺序添加进去。
  3. 执行事件: React 遍历事件队列,按照捕获阶段和冒泡阶段的顺序执行事件处理函数。捕获阶段的处理函数从后往前执行,冒泡阶段的处理函数从前往后执行。

如果某个事件处理函数中调用了 stopPropagation(即阻止事件继续传播),React 会停止后续的事件处理。

总结

新版 React 改进了事件处理的顺序,使其更符合浏览器的标准事件流。这意味着事件处理会更准确地按照捕获和冒泡阶段来执行,并且在初始化阶段会更高效地绑定事件。这样做的好处是可以更一致地模拟浏览器的事件行为,确保事件处理的顺序和效果更加可靠。

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

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

相关文章

【论文阅读】01-Survey on Temporal Knowledge Graph

原文名称:Survey on Temporal Knowledge Graph 1 Introduction 目前有两种方法:基于距离模型的嵌入变换方法和基于语义匹配模型的双线性模型。它们的思想都是将包含实体和关系的知识图谱嵌入到连续的低纬度实向量空间中 时间知识图的推理有两种,第一种是…

斐纳切数列考试题

计算机二级考试有一道题 result [] a,b0,1 while a<100:print(a,end,) a, b b, ab # 0,1,1,2,3,5,8,13,21,34,55,89,

python爬虫代理ip池搭建

最近大量爬取数据的时候总会遇到被封ip的情况&#xff0c;所有打算自己搭建一个代理ip池来使用。本次使用的是开源的ip代理池项目ProxyPool 1.下载redis数据库 redis安装 这里我选择直接下载redis的解压包形式&#xff0c;方便安装。下载地址&#xff1a;发布 TPORADOWSKI/RED…

小型公司机房运维如何管理

本人从业五年&#xff0c;基本是中小型公司。经手的机房也基本是从0-1。今天浅谈一下如果管理小型公司的机房。 机房管理&#xff0c;一般分成以下几个方面&#xff1a; 1、环境管理&#xff1a;比如弱电、强点线路是否排列整齐&#xff1b;机柜门是否做到全部关闭&#xff1b…

SCAU算法竞赛入门指北

首先&#xff0c;还是欢迎各位小朋友来到华南农业大学&#xff0c;虽然不是什么ACM强校&#xff0c;但是姑且还是有这么个校队存在的。本文的主要目的是给各位OI✌️介绍下acm和oi的区别&#xff0c;给各位纯萌新介绍下你需要做什么&#xff0c;以及进校队的时间线。 ACM是什么…

UE4_后期处理_后期处理材质及后期处理体积二

效果&#xff1a; 步骤&#xff1a; 1、创建后期处理材质,并设置参数。 2、回到主界面&#xff0c;找到需要发光的物体的细节面板。 渲染自定义深度通道&#xff0c;默认自定义深度模具值为10&#xff08;需要修改此值&#xff0c;此值影响物体的亮度&#xff09;。 3、添加…

JVM系列(六) -对象的创建过程

一、摘要 在之前的文章中,我们介绍了类加载的过程和 JVM 内存布局相关的知识。本篇我们综合之前的知识,结合代码一起推演一下对象的真实创建过程,以及对象创建完成之后在 JVM 中是如何保存的。 二、对象的创建 在 Java 中,创建对象的方式有很多种,比如最常见的通过new …

Spring 循环依赖原理及解决方案

一、什么是循环依赖 循环依赖指的是一个实例或多个实例存在相互依赖的关系&#xff08;类之间循环嵌套引用&#xff09;。 举例&#xff1a; Component public class AService {// A中注入了BAutowiredprivate BService bService; }Component public class BService {// B中也…

Redis 的标准使用规范之数据类型使用规范

数据类型使用规范 提示&#xff1a;以下是本篇文章正文内容&#xff0c;可供参考 (1)、字符文本&#xff08;STRING&#xff09; 【建议】选型为简易文本类缓存 &#xff1a;比如普通的字符、文本、Json 结构 &#xff0c;通常能起到加速读写和降低后端压力的作用。 【建议】…

数据库系统 第46节 数据库版本控制

数据库版本控制是确保数据库架构和数据模型随着时间的推移而正确演进的重要实践。它允许开发团队跟踪数据库的变更历史&#xff0c;回滚到以前的版本&#xff0c;以及在不同环境&#xff08;如开发、测试和生产环境&#xff09;之间同步数据库结构。以下是两种主要的数据库版本…

ActiveMQ 的网络连接及消息回流机制

1、ActiveMQ 的网络连接 activeMQ 如果要实现扩展性和高可用性的要求的话&#xff0c;就需要用用到网络连接模式。 NetworkConnector&#xff1a;主要用来配置 broker 与 broker 之间的通信连接 如上图所示&#xff0c;MQ 服务器1 和MQ 服务器2 通过 NewworkConnector 相连&…

Leetcode Hot 100刷题记录 -Day12(轮转数组)

轮转数组 问题描述&#xff1a; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4]解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向…

一台笔记本电脑的硬件都有哪些以及对应的功能

一台笔记本电脑的硬件通常包括多个关键组件&#xff0c;这些组件共同协作&#xff0c;确保电脑的正常运行。以下是笔记本电脑的主要硬件及其功能&#xff1a; 1. 中央处理器&#xff08;CPU&#xff09; 功能&#xff1a;CPU 是电脑的“大脑”&#xff0c;负责处理所有的计算…

CocosCreator面试真题详解

最近有位同学面试Cocos Creator&#xff0c;我们把面试时问道的真题列举出来&#xff0c;并配上参考答案。 问题1: 你们公司项目时如何做战斗系统的? 面试官你好&#xff0c;做战斗系统和架构的时候&#xff0c;我们一般把代码逻辑分成3层来设计&#xff0c;同时把数据独立出…

Linux业务系统将/home目录删除并将空间扩给根目录

原有目录空间分配如下&#xff1a; [roothisdb ~]# df -h Filesystem Size Used Avail Use% Mounted on /dev/mapper/cl-root 21G 10G 11G 50% / devtmpfs 905M 0 905M 0% /dev tmpfs 920M 177M 744M 20% /dev/shm tm…

千益畅行,共享旅游卡,有哪些优势和特点?

1、同行人数灵活&#xff1a; 与一般旅游卡相比&#xff0c;千益畅行旅游卡对同行人数的限制更宽松&#xff0c;单卡支持 2 至 6 人同时出行&#xff0c;能满足小团体、家庭等多人出行需求&#xff0c;为多人共同出游提供了便利和优惠。 2、服务模式多样&#xff1a; 1&#xf…

前端月中总结

1、领导一拍脑门想要一个内部聊天软件 --基于open IM二次开发 背景 前段时间不是接手了一个内部办公软件的项目嘛&#xff0c;这个项目已经写了三四年了&#xff0c;一代代的前端融合了不知到多少种代码风格&#xff0c;再加上最初搭这个项目架子的人不知道咋想的&#xff0c…

操作系统 ---- 进程的概念、组成、特征

学习路线&#xff1a; 一、进程的概念及组成 我们通过一个例子来说明进程的概念以及程序和进程的区别。 我们在Windows操作系统中打开任务管理器&#xff0c;在任务管理器当中能看到此时系统当中运行的进程有哪些&#xff0c;如下图所示&#xff1a; 此时&#…

H5漂流瓶社交系统源码

一个非常有创意的H5漂流瓶社交系统源码&#xff0c;带完整前端h5和后台管理系统。 环境&#xff1a;Nginx 1.20.1-MySQL 5.6.50-PHP-7.3 代码下载

一家电子信息企业终止,前五大客户收入占比超九成,募资合理性存疑

兴天科技终止原因如下&#xff1a;首先&#xff0c;兴天科技前五大客户收入占比约超九成&#xff0c;客户集中度较高且高于行业平均水平&#xff0c;其中近期来自第一大客户收入占比超七成&#xff0c;单一客户依赖程度进一步上升&#xff1b;其次&#xff0c;兴天科技除第一大…