React合成事件

一、合成事件

    1. event 是 SyntheticEvent ,模拟出来 DOM 事件所有能力
    1. event.nativeEvent 是原生事件对象
    1. 所有的事件,都被挂载到 document 上(React ≤ 16),React17之后是挂载到root组件
    1. 和 DOM 事件不一样,和 Vue 事件也不一样
      请添加图片描述
      div触发事件,DOM事件冒泡到document上,
      document会生成一个统一的合成事件对象
      再派发事件

二、为什么要合成事件机制?

1、更好的兼容性和跨平台

自己实现一套事件机制,尽可能摆脱了DOM事件的逻辑, 更好的兼容性和跨平台

2、挂载到document, 减少内存消耗,避免频繁解绑

事件挂载越多,内存消耗越高,(不用给每个子元素挂载事件,使用冒泡)
看似事件挂载到组件上,其实是在document,组件销毁的时候,也不用解绑事件

3、方便事件的统一管理(如事务机制)

三、React事件绑定

在这里插入图片描述

  • React16 绑定到document
  • React 17 18绑定到root组件
  • 有利于多个React版本并存,例如微前端

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

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

相关文章

Defects4j数据集安装及使用

0、常见问题 1. 所有配置完成后运行defects4j info -p Lang测试出现错误 Cant locate DBI.pm in INC (you may need to install the DBI module) (INC contains: /myproject/defects4j/framework/lib /myproject/defects4j/framework /myproject/defects4j/framework/core /m…

【计算机网络笔记】计算机网络性能(1)——速率、带宽、延迟

系列文章目录 什么是计算机网络? 什么是网络协议? 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 系列文章目录速率带宽延迟/时延(delay或latency) 下面介绍一些计算机网络中常用的性能指标。在本篇中涉及速…

创建React Native的第一个hello world工程

创建React Native的第一个hello world工程 需要安装好node、npm环境 如果之前没有安装过react-native-cli脚手架的,可以按照下述步骤直接安装。如果已经安装过的,但是在使用这个脚手架初始化工程的时候遇到下述报错的话 cli.init(root, projectname);…

WordPress导航主题蘑菇导航源码

蘑菇导航的列表页有两种风格,分别对应宽屏、窄屏。可以点击 文章。博客查看演示。文章页也是如此,这两种风格可以在后台设置。 本站菜单中的 VIP解析、音乐、图床,是单独的源码,不包含在本次主题中。后期看大家的要求&#xff0c…

SSH连接华为交换机慢

ssh连接交换机慢是因为交换计算密钥算法阶段默认使用安全性更高的秘钥,由于性能问题导致连接比较慢,如一台华为S5735S-L24T4S-QA2的交换机默认使用如下秘钥,安全行由高到低。 ssh server key-exchange dh_group16_sha512 dh_group15_sha512 …

【Release】Photoshop ICO file format plug-in 3.0

【Introduction】 The Photoshop ICO plug-in is a file format plug-in developed for Photoshop, which allows Photoshop to directly read and write ICO format files. Because Photoshop has powerful pixel bitmap editing functions, it has many users and a good us…

企业如何自定义人力资源和财务报表?

企业自定义人力资源和财务报表是一种重要的能力,它允许企业根据其特定需求和目标创建和定制报表。以下是一些详细的步骤和说明,帮助企业实现人力资源和财务报表的自定义。 1. 确定报表需求: 首先,企业需要明确自己对人力资源和财…

uniapp(uncloud) 使用生态开发接口详情5(云公共模块)

1.uniCloud官网 云对象中云公共模块: 网站: https://uniapp.dcloud.net.cn/uniCloud/cf-common.html // 官网介绍 cloudfunctions├─common // 云函数公用模块目录| └─hello-common // 云函数公用模块| ├─package.json| └─index.js // 公用模块代码&#xff0…

docker拉取镜像错误missing signature key

参考地址:docker拉取镜像错误 missing signature key-CSDN博客 linux系统,使用docker拉取的时候,报错如下 missing signature key 就一阵莫名其妙,之前还好好的,突然就不行了 按照网上说的方法,查看doc…

计算机网络-计算机网络体系结构-网络层

目录 一、IPV4 IP数据报格式 *IP 数据报分片 *IPV4地址 分类 网络地址转换(NAT) 二、子网划分与子网掩码 *CIDR *超网 协议 ARP协议 DHCP协议 ICMP协议 三、IPV6 格式 IPV4和IPV6区别 地址表示形式 四、路由选择协议 RIP(路由信息协议) OPSF(开发最短路径优…

探索DeFi世界,MixGPT引领智能金融新时代

随着区块链技术的迅猛发展,DeFi(去中心化金融)正成为金融领域的新宠。在这个充满活力的领域里,MixTrust站在创新的前沿,推出了一款引领智能金融新时代的核心技术——MixGPT。 MixGPT:引领智能金融体验的大型…

工业自动化编程与数字图像处理技术

工业自动化编程与数字图像处理技术 编程是计算机领域的基础技能,对于从事软件开发和工程的人来说至关重要。在工业自动化领域,C/C仍然是主流的编程语言,特别是用于工业界面(GUI)编程。工业界面是供车间操作员使用的,使用诸如Hal…

OFDM基本原理

一、OFDM简述 OFDM 的全称是 Orthogonal Frequency Divisition Multiplexing,是一种多载波调制技术,其能有效对抗频率选择性衰落,克服信号符号间干扰。OFDM的技术的核心思想是将宽频率载波划分成多个带宽较小的正交子载波,并使用这…

零基础学习CSS

01-CSS初体验 层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 文档的呈现(美化内容)。 书写位置:title 标签下方添加 style 双标签,style 标签…

基于Java公益志愿捐赠管理系统设计与实现(源码+LW+调试+开题报告)

项目描述 临近学期结束,还是毕业设计,你还在做java程序网络编程,期末作业,老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下,你想解决的问…

Android MediaCodec 框架 基于codec2

系列文章的目的是什么? 粗略: 解码需要哪些基础的服务?标准解码的调用流程?各个流程的作用是什么?解码框架的层次?各个层次的作用? 细化: 解码参数的配置?解码输入数…

WPF中在MVVM模式下实现导航功能

WPF中在MVVM模式下实现导航功能 一、利用TabControl 使用场景&#xff1a;项目小&#xff0c;不用考虑内存开销的问题。 实现方式1-手动指定ViewModel 分别定义3个UserControl作为View用于演示 <UserControl...><Grid><StackPanel Orientation"Vertic…

机器视觉、图像处理和计算机视觉:概念和区别

机器视觉、图像处理和计算机视觉&#xff1a;概念和区别 机器视觉、图像处理和计算机视觉是相关但有区别的概念。 机器视觉主要应用于工业领域&#xff0c;涉及图像感知、图像处理、控制理论和软硬件的结合&#xff0c;旨在实现高效的运动控制或实时操作。 图像处理是指利用…

竞赛 深度学习YOLO抽烟行为检测 - python opencv

文章目录 1 前言1 课题背景2 实现效果3 Yolov5算法3.1 简介3.2 相关技术 4 数据集处理及实验5 部分核心代码6 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习YOLO抽烟行为检测 该项目较为新颖&#xff0c;适合作为竞赛课…

ios UIDocumentPickerViewController 实现TEXT、DOC、PDF等文档读取

文章目录 一、前言二、iCould相关配置三、功能实现3.1 UIDocumentPickerViewController 选取控制器3.2 读取文件一、前言 最近正在研发的项目有一个需求: 允许用户将iCloud中的文档上传,实现文件的流转。 以前接触的项目对于资料类的上传大多是仅限于图片与视频。对于文档类…