React 组件中怎么做事件代理

news2024/10/5 12:47:37

React 并不会把所有的处理函数直接绑定在真实的dom节点上,而是把所有的事件绑定到结构的最外层(合成事件层),使用一个统一的事件监听器,这个事件监听器上维持了一个映射来保存所有组件内部的事件监听和处理函数。
当组件挂载或卸载时,只是在这个统一的事件监听器上插入或删除一些对象。

当事件发生时,首先被这个统一的事件监听器处理,然后在映射里找到真正的事件处理函数并调用。
这样做的优点是解决了兼容性问题,并且简化了事件处理和回收机制(不需要手动的解绑事件,React 已经在内部处理了)。但是有些事件 React 并没有实现,比如 window 的 resize 事件。
在这里插入图片描述
在 React 底层,主要对合成事件做了两件事:
1)事件委派:React 会把所有的事件绑定到结构的最外层,使用统一的
事件监听器,这个事件监听器上维持了一个映射来保存所有组件内部
事件监听和处理函数。
2)自动绑定:React 组件中,每个方法的上下文都会指向该组件的实例,
即自动绑定 this 为当前组件。

在React17版本中:
所有事件都是委托在id = root的DOM元素中,之所以会将事件委托从document中移到id = root的DOM元素,
是为了可以更加安全地进行新旧版本 React 树的嵌套。

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

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

相关文章

哈工大计算机网络课程网络层协议详解之:网络地址转换NAT

哈工大计算机网络课程网络层协议详解之:网络地址转换NAT 文章目录 哈工大计算机网络课程网络层协议详解之:网络地址转换NAT网络地址转换(NAT)NAT实现原理NAT穿透问题NAT穿透问题的解决方案 上一节中,我们在DHCP协议中介…

K 个一组翻转链表

反转链表是比较常出的一种题目,我们有简单难度的一整个链表翻转: private ListNode reverse(ListNode head){ListNode pre null;ListNode cur head;while(cur ! null){ListNode next cur.next;cur.next pre;pre cur;cur next;}return pre;}从第一…

GC说明与介绍,GC的垃圾回收算法有哪些

1、GC是什么 2、GC算法概述 JVM在进行GC时,并非每次都对上面三个内存区域一起回收的,大部分时候回收的都是指新生代。 因此GC按照回收的区域又分了两种类型,一种是普通GC(minor GC),一种是全局GC&#xff0…

【算法】行星碰撞机器人碰撞(栈的使用)

文章目录 行星碰撞机器人碰撞参考资料 本文记录了两个使用栈来处理碰撞问题的算法题目。 行星碰撞 https://leetcode.cn/problems/asteroid-collision/ 对于这种题目,各个元素分别会向左或向右移动,可以使用栈模拟碰撞的过程。 由于从左往右进行遍历…

Argis通过Python的Arcpy第三方库进行字段计算、批量将mxd导出为jpg图片、合并数据库

前言 近来公司有开发Arcgis脚本工具的需求,我就去学了一下用Arcpy来操作Arcgis的数据,今天学习了字段计算,将学习成果记录如下。 arcpy帮助文档传送门:https://resources.arcgis.com/zh-cn/help/main/10.2/ 一、字段计算 1、…

Linux学习之内核升级

wget --no-check-certificate https://mirrors.edge.kernel.org/pub/linux/kernel/v5.x/linux-5.1.14.tar.xz下载源代码。 yum install -y gcc gcc-c make ncurses-devel openssl-devel elfutils-libelf-devel安装必要的依赖包。 完成之后,显示如下: …

openEuler操作系统和openGauss数据库

文章目录 1. openEuler操作系统2. openGauss数据库2.1 系统自带库2.1.1 允许所有地址访问端口2.1.2 创建远程登录用户 2.2 安装5.0 版本2.2.1 下载2.2.2 安装2.2.3 测试 1. openEuler操作系统 镜像下载地址 https://www.openeuler.org/zh/download 选一个下载 安装 按提示安…

【kubernetes系列】Kubernetes中的重要概念(三)

在实际的工作中,我们使用Kubernetes 通常不会直接创建 Pod,而是通过 各种 Controller 来管理 Pod 的。Controller 中定义了 Pod 的部署特性,比如有几个副本,在什么样的 Node 上运行等。为了满足不同的业务场景,Kuberne…

VMware Workstation 17 的安装

一、简介 VMware Workstation 17.0是一款功能非常强大的虚拟机,可以帮助用户在Windows系统上同时开启多个系统,不仅能在虚拟机上安装上不同的操作系统,比如Mac、Linux以及Windows10/11等,还能与云技术和容器技术(如 D…

【金融量化】ETF基金是什么?有什么特点?

1 含义 ETF(交易型开放式指数基金)是以某一选定的指数所包含的成分证券或商品为投资对象,依据构成指数的证券或商品的种类和比例,采取完全复制或抽样复制,进行被动投资的指数基金。ETF不但具有传统指数基金的全部特色…

vue导出excle单sheet文字居中表头加粗显示

效果图: 首先下载依赖 npm install xlsx --save npm install xlsx-style --save在需要导出excle的vue文件中导入依赖 import XLSX from "xlsx" import XLSXStyle from xlsx-style在method中定义 methods:{// 格式化formatJson(filterVal, jsonData)…

月近万次发布,故障率<4‰如何做到?去哪儿测试左移重难点揭秘!

一分钟精华速览 去哪儿发布的数据显示,在过去一年中,其发布故障率始终保持在 4‰ 以下并不断降低。作为一家出行旅游服务平台,去哪儿网如何在复杂的业务场景下,仍能保持如此低的故障率?其中功能测试左移功不可没。 本…

高质量编程-编码规范之代码格式和注释

前言: \textcolor{Green}{前言:} 前言: 💞这个专栏就专门来记录一下寒假参加的第五期字节跳动训练营 💞从这个专栏里面可以迅速获得Go的知识 本次文章不仅仅是在 go 中主要注意,在编写其他语言中也同样重要…

单片机介绍选型(嵌入式学习)

单片机介绍&选型 单片机介绍常见的单片机单片机如何选型 单片机介绍 单片机(Microcontroller)是一种集成电路芯片,具有处理器核心、存储器、输入/输出接口和各种外设的功能。 单片机是单片微型计算机的简称,MCU是Microcontro…

15. WebGPU 相机

在上一篇文章中,我们必须将 F 移到视锥体前面,因为 mat4.perspective 函数 将眼睛放在原点 (0, 0, 0) 并且把对象 放到 位于眼前 -zNear 到 -zFar 之间的视锥体中。这意味着,任何想要显示的东西,都需要放在这个空间里。 在现实世…

对英雄联盟英雄属性数据的预处理及相似度矩阵计算

目录 一、引言 二、任务1 1、填充缺失值 2、用中位数填充“生命值”属性列缺失值 3、 用均值填充“生命值”属性列缺失值 三、任务2 注:英雄联盟英雄属性数据资源可在博客资源中自行获取。 一、引言 英雄联盟作为一款古早的刀塔游戏,可谓之刀塔游…

jumpserver-v2.2.2【部署教程】

目录 什么是 跳板机 跳板机的缺点 使用堡垒机的优势 jumpserver的组件 【1】时间同步 【2】安装依赖 【3】修改数据库字符集、创建远程用户 【4】创建python的虚拟环境,用于专门运行jumpserver的环境 【5】获取jumpserver的代码 【6】安装编译环境依赖 …

【管理系列-09】软件成本怎么评估,知己知彼才能做软件造价

项目来了,总要叫来几个人,讨论一下成本是多少,能不能接,作为研发经理,能够较为合理的评估成本是一项必备技能,如何科学合理的评估,达到对内对外都满意,我想这是每个研发经理的必修课…

管理类联考——逻辑——知识篇——分析推理——四、数字——haimian

数字 题型识别 与数字相关的分析推理题在逻辑科目中扮演着非常重要的角色,可能涉及方程、不等式、分子与分母比值关系、百分比、概率、集合运算等,可结合数学方法或利用数字规律进行解题。 思维导图 常用公式 从某种意义上说,数学本身就是…

五、浅析[ElasticSearch]底层原理与分组聚合查询

目录 一、ElasticSearch文档分值_score计算底层原理1.boolean model2.relevance score算法2、分析一个document上的_score是如何被计算出来的 二、分词器工作流程1.character filter、tokenizer、token filter2、内置分词器的简单介绍3、定制分词器3.1默认的分词器--standard3.…