简述下 React 的事件代理机制?

news2025/7/21 12:30:26

React 并不会把所有的处理函数直接绑定在真实的节点上。而是把所有的事件绑定到结构的最外层,使用一个统一的事件监听器,这个事件监听器上维持了一个映射来保存所有组件内部的事件监听和处理函数。

当组件挂载或卸载时,只是在这个统一的事件监听器上插入或删除一些对象。

当事件发生时,首先被这个统一的事件监听器处理,然后在映射里找到真正的事件处理函数并调用。

这样做的优点是解决了兼容性问题,并且简化了事件处理和回收机制(不需要手动的解绑事件,React 已经在内部处理了)。但是有些事件 React 并没有实现,比如 window resize 事件。

2023.2.19更新版本:

React@17.0.3版本中:

所有事件都是委托在id = root的DOM元素中(网上很多说是在document中,17版本不是了);
在应用中所有节点的事件监听其实都是在id = root的DOM元素中触发;
React自身实现了一套事件冒泡捕获机制;
React实现了合成事件SyntheticEvent
React17版本不再使用事件池了(网上很多说使用了对象池来管理合成事件对象的创建销毁,那是16版本及之前);
事件一旦在id = root的DOM元素中委托,其实是一直在触发的,只是没有绑定对应的回调函数; Alt
盗用一张官方图,按官方解释,之所以会将事件委托从document中移到id = root的DOM元素,是为了可以更加安全地进行新旧版本 React 树的嵌套

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

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

相关文章

LIN资料整理(一):LIN入门简介

目录 一、LIN是什么 1、LIN简介 2、LIN的适用场景 3、LIN协议版本 4、LIN的主从机节点、主从机任务与LIN总线特点 一、LIN是什么 1、LIN简介 LIN 是Local Interconnect Network 的缩写,是基于UART/SCI(Universal Asynchronous Receiver-Transmitter / Serial…

2023级社科院与杜兰大学金融管理硕士还有少量名额,期待与你共谱人生新篇章

我们都是平凡人,过着平凡的生活,但若能有所热爱有所坚持,便会发出自己的光芒。就像我们在社科院与杜兰大学金融管理硕士项目读研,通过更加系统的学习,不仅丰富了我们的知识,还提升了我们的思维,…

NB-IOT宣传这么多年,这次总算用好了吧

一、方案概述随着实体经济快速发展,石化、港口、货场、工地等区域规模日益扩大,厂区面积广阔、环境复杂、作业人员和车辆众多,如无法实时掌握工作人员状态及外来人员位置、外来车辆情况等问题,将存在非常大的安全隐患。今天小编介…

ChatGPT在工业领域的用法

在工业数字化时代,我们需要怎么样的ChatGPT? 近日,ChatGPT热度高居不下,强大的人机交互能力令人咋舌,在国内更是掀起一股讨论热潮。一时间,这场由ChatGPT引起的科技飓风,使得全球最顶尖科技力量…

notepad++学习小技巧

不要小瞧了notepadd 这个可是我们的cv好帮手。。。 实战1背景,我找一个同事要表结构 结果他给我了一个xml。顿时一懵,我也不知道为啥好像是从前端扣下来的。 建表我只需要 columnName, displayName当作是comment, dataTypeNamecolumnType借鉴…

【计算机视觉】Visual grounding系列

文章目录一、任务简介二、Visual grounding常用数据集与评估指标2.1 常用数据集2.2 评估指标三、Visual grounding主流做法一、任务简介 Visual grounding涉及计算机视觉和自然语言处理两个模态。 简要来说,输入是图片(image)和对应的物体描…

市场营销书籍推荐:《经理人参阅:市场营销》

要学好市场营销有什么好方法?答案是看书!比起碎片化地去阅读一些文章或看一些相关视频,读书来得更实在些。倘若能静下心来好好读上一本系统性的市场营销书籍,学好营销管理将不会再是一件难事。然而,问题的关键是&#…

大模型分布式系统

背景:模型越来越大,训练复杂度越来越高,需要训练的时间也是越来越长。那么我们该如何在现有的硬件基础上对模型做训练呢。模型规模的扩大,对硬件(算力、内存)的发展提出要求。然而,因为 内存墙 …

2023年襄阳中级工程师职称评审通知出来了哟

襄阳市职称改革工作领导小组办公室关于做好2022年度襄阳市非公企业工程系列中级任职资格评审工作的通知 各县(市、区)人力资源和社会保障局(职改办): 根据市职改办《关于做好2022年度全市职称评审工作的通知》&#x…

IT女神节(致敬中国IT界永远的女神严蔚敏-数据结构)

我们都知道程序数据结构算法。相信很多人都学过严蔚敏的数据结构的课程。作为一个码农,在这不管是3.7女神节,还是3.8妇女节。我觉得都有必要向这些教育界的老前辈致敬。今天我就梳理梳理,最经典的数据结构教材。 严蔚敏介绍(来自…

HTML学习笔记入门到精通day01

零、 复习昨日 见代码 一、二阶段介绍 第一阶段 java基本语法 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aY95CV7t-1678153713499)(D:\前锋学习笔记\笔记\image-20230307094126248.png)] 二、HTML 2.1 HTML概念 ​ 网页,是网站中的一…

MS python学习(7)

Managing Keys - dotenv Managing keys usage of .env module 项目地址:https://github.com/theskumar/python-dotenv Reads the key,value pair from .env and adds them to environment variable. 将key明文(hard code)形式写在script里…

java开发基础了解

Java 2023-03-07 1、开发工具 (1)jdk1.8 ,11,17,从11开始不免费 java纯面向对象------面向对象(对象)面向过程(函数)。就和JavaScript语言。 (2)Mysql8.0 (3&#xff…

MySQL是怎样运行的——如何正确的使用索引

序言 下边我们将唠叨许多种让B树索引发挥最大效能的技巧和注意事项,不过大家要清楚,所有的技巧都是源自你对B树索引本质的理解,所以如果你还不能保证对B树索引充分理解,那么再次建议回过头把前边的内容看完了再来,要不…

TouchBoard 使用教程

一. 硬件采购: 其实我是想买原版的TouchBoard的,但是售罄了, 只能买国产的了,这是淘宝唯一一家提供技术支持的店铺(下面的库文件直接找店家要就行) https://item.taobao.com/item.htm?spm=a21dvs.23580594.0.0.3c3a645epX97Bf&ft=t&id=706464470339 其他硬件…

Day10-网页布局实战CSS3

一 补充 1 画三角形 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevi…

WebAuthn无密码身份验证技术

背景WebAuthn全称是Web Authentication API&#xff0c;是由W3C和FIDO在 Google、Mozilla、Microsoft、Yubico 等公司的参与下编写的规范。WebAuthn是一组在服务器、浏览器和身份验证器之间启用无密码身份验证技术。一般使用非对称加密技术&#xff0c;用公钥代替传统的密码&am…

Vue实例的常用属性 Vue实例常用方法

vm.$ el和 vm.$ data 在new Vue()实例中经常设置el&#xff0c;data选项&#xff0c;data选项里面又可以定义很多属性&#xff08;常称为数据属性&#xff09;&#xff0c;Vue提供了一些有用的实例属性与方法&#xff0c;它们都有前缀$,以便与用户定义的属性相区别。 使用Vue…

Linux服务:LVS负载均衡+keepalived架构

目录 一、LVS 1、负载均衡的结构 2、LVS三种工作模式 3、LVS调度算法 5、ipvsadm工具 二、KEEPALIVED 1、KEEPALIVED作用 2、KEEPALIVED原理 3、KEEPALIVED工作模式 4、KEEPLIVED问题及优化 三、LVSKEEPALIVED架构实现 1、实验目的 2、实验拓扑 3、实验准备 4、…

关于几种求最短路算法的碎碎念(Dijkstra、spfa、floyd)

目录 一、求1号点到n号点的最短路 1、所有边都是正数——Dijkstra &#xff08;1&#xff09;朴素版dijkstra - 邻接矩阵 &#xff08;2&#xff09;堆优化版dijstra - 邻接表 2、存在负权边——spfa 3、dijkstra和spfa的区别 二、起点和终点未知&#xff0c;求某两点间…