【React】事件机制
事件机制
react 基于浏览器的事件机制自身实现了一套事件机制,称为合成事件。比如:onclick -> onClick
获取原生事件:e.nativeEvent
onClick 并不会将事件代理函数绑定到真实的 DOM节点上,而是将所有的事件绑定到结构的最外层(document,减少内存开销),使用一个统一的事件去监听。事件监听器维持了一个映射保存所有组件内部的事件监听和处理函数,当组件挂载或者卸载时,在事件监听器上插入或者删除一些对象。(简化了事件处理和回收机制,提升效率)
事件发生 -> 事件处理器 -> 映射真实事件处理函数并调用
原生和合成事件执行顺序:
import React from 'react';
class App extends React.Component{constructor(props) {super(props);this.parentRef = React.createRef();this.childRef = React.createRef();}componentDidMount() {console.log("React componentDidMount ");this.parentRef.current?.addEventListener("click", () => {console.log(" DOM ");});this.childRef.current?.addEventListener("click", () => {console.log(" DOM ");});document.addEventListener("click", (e) => {console.log(" document DOM ");});}parentClickFun = () => {console.log("React ");};childClickFun = () => {console.log("React ");};render() {return (<div ref={this.parentRef} onClick={this.parentClickFun}><div ref={this.childRef} onClick={this.childClickFun}></div></div>);}
}
export default App;
输出结果为:

所以:
- react 所有事件都挂载到 document 对象上
- 真实 DOM 元素触发事件,冒泡到 document 对象上,再处理 react 事件
- 最后真正执行 document 上挂载的事件
阻止不同阶段的事件冒泡:
- 阻止合成事件间的冒泡,用 e.stopPropagation()
- 阻止合成事件与最外层document上的事件间的冒泡,用 e.nativeEvent.stoplmmediatePropagation()
- 阻止合成事件与除最外层document.上的原生事件上的冒泡,通过判断e.target3来避免
事件绑定(this)
class ShowAlert extends React.Component {showAlert() {console.log(this); // undefined}render() {return <button onClick={this.showAlert}>show</button>;}
}
为了解决没有绑定 this 问题,有四种方法。
// render 方法使用 this:
class App extends React.Component {handleClick() {console.log('this > ', this);}render() { // 每次 render 的时候 都会重新进行 bind 的绑定 影响性能return (<div onClick={this.handleClick.bind(this)}>test</div>)}
}
// render 中使用箭头函数
class App extends React.Component {handleClick() {console.log('this > ', this);}render() {return (<div onClick={e => this.handleClick(e)}>test</div>)}
}
// constructor 中使用 bind
class App extends React.Component {constructor(props) {super(props);this.handleClick = this.handleClick.bind(this);}handleClick() {console.log('this > ', this);}render() {return (<div onClick={this.handleClick}>test</div>)}
}
// 函数定义阶段使用箭头函数
class App extends React.Component {constructor(props) {super(props);}handleClick = () => {console.log('this > ', this);}render() {return (<div onClick={this.handleClick}>test</div>)}
}
相关文章:
【React】事件机制
事件机制 react 基于浏览器的事件机制自身实现了一套事件机制,称为合成事件。比如:onclick -> onClick 获取原生事件:e.nativeEvent onClick 并不会将事件代理函数绑定到真实的 DOM节点上,而是将所有的事件绑定到结构的最外层…...
华为OD的职级与薪资
华为 OD 这几年随着招聘行情的日渐严峻,不少 985 高校出来的学生都开始放宽对"外包"的看法,其中华为 OD 以"待遇断层领先"的姿态成为不少求职者(不得已)的外包首选。 既然如此,我们就好好梳理一下…...
【HTML5】html5开篇基础(4)
1.❤️❤️前言~🥳🎉🎉🎉 Hello, Hello~ 亲爱的朋友们👋👋,这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章,请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的…...
HTTP【网络】
文章目录 HTTPURL(Uniform Resource Lacator) HTTP协议格式HTTP的方法HTTP的状态码HTTP常见的Header HTTP 超文本传输协议,是一个简单的请求-响应协议,HTTP通常运行在TCP之上 URL(Uniform Resource Lacator) 一资源定位符,也就是通常所说的…...
MQ延迟消息:原理、实现与应用
在现代分布式系统中,消息队列(Message Queue,简称MQ)已经成为实现异步通信、解耦服务和削峰填谷的重要工具。延迟消息(Delayed Message)作为MQ的一种高级特性,允许消息在指定的延迟时间后投递到…...
计算机网络—大端序和小端序
大端序和小端序 大端序(Big-endian)和小端序(Little-endian)是指在多字节数据类型(如整数或浮点数)的存储和表示方式上的不同。以下是关于大端序和小端序的详细解释: 一、定义 大端序…...
《OpenCV 计算机视觉》—— Harris角点检测、SIFT特征检测
文章目录 一、Harris 角点检测1.基本思想2.检测步骤3.OpenCV实现 二、SIFT特征检测1. SIFT特征检测的基本原理2. SIFT特征检测的特点3. OpenCV 实现 一、Harris 角点检测 OpenCV中的Harris角点检测是一种基于图像灰度值变化的角点提取算法,它通过计算每个像素点的响…...
rtmp协议转websocketflv的去队列积压
websocket server的优点 websocket server的好处:WebSocket 服务器能够实现实时的数据推送,服务器可以主动向客户端发送数据 1 不需要客户端不断轮询。 2 不需要实现httpserver跨域。 在需要修改协议的时候比较灵活,我们发送数据的时候比较…...
Elasticsearch实战应用:构建高效搜索引擎
在大数据时代,如何高效存储和检索海量信息成为了一个重要课题。Elasticsearch作为一个开源的分布式搜索引擎,以其强大的搜索能力和灵活的扩展性,成为了许多企业和开发者的首选。本文将深入探讨Elasticsearch的实战应用,包括基本概…...
Hive数仓操作(四)
一、Hive 创建表案例一(ARRAY数组类型) 1. 准备数据文件 首先,准备一个名为 stu2.txt 的文件,文件内容示例如下: 1001 Alice fish,cat 1002 Bob dog,rabbit 1003 Charlie bird注意: …...
《C++跨平台开发:突破界限,释放无限可能》
在当今的软件开发领域,跨平台开发已成为一种重要趋势。它允许开发者编写一次代码,然后在多个不同的操作系统和硬件平台上运行,极大地提高了开发效率和软件的可扩展性。而 C作为一种强大的编程语言,也具备实现跨平台开发的能力。本…...
速盾:免备案服务器?
速盾是一家提供网络安全服务的公司,其主要产品包括CDN加速、WEB防护、WAF、DDoS防护等。在网站建设过程中,选择一个合适的服务器是非常重要的一步。传统的服务器需要备案,涉及到较多的流程和审批时间,给网站运营带来了一定的麻烦。…...
Electron获取nodejs和chrome版本信息
Electron获取nodejs和chrome版本信息 环境: electron: 30.1.1 nodejs: 20.14.0代码 $ tree . --- index.html --- index.js --- package.jsonindex.html <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>H…...
【React】setState 批量更新
setState 批量更新的过程 React 的 setState 调用是异步的。为了性能原因,React 会将多个 setState 调用合并成一次批量更新。具体过程如下: 1)React 先将调用的每个 setState 所产生的更新对象存储在一个队列中。 2)在所有的同步…...
微信小程序开发日记第二天
坚持在各个平台更新自己写小程序的心得体会,在百度贴吧和csdn更新自己的小程序日记,同时也是个体不断地对于云技术的开发和成长,进行提升!不断地将开源开放创新思维运用到自己的小程序当中,小程序制作的关键就是&#…...
如果您忘记了 Apple ID 和密码,按照指南可重新进入您的设备
即使您的 iPhone 或 iPad 由于各种原因被锁定或禁用,也可以使用 iTunes、“查找我的”、Apple 支持和 iCloud 解锁您的设备。但是,此过程需要您的 Apple ID 和密码来验证所有权并移除激活锁。如果您忘记了 Apple ID 和密码,请按照我们的指南重…...
Top4免费音频剪辑软件大比拼,2024年你选哪一款?
现在我们生活在一个数字化的时代,音频内容对我们来说很重要。不管是给自己拍的视频配背景音乐、整理开会时的录音,还是自己写歌,有个好用的音频剪辑软件都特别重要。今天,我要给大家介绍几款特别好用的音频剪辑软件免费的…...
基于SSM的电影院售票系统设计与实现
文未可获取一份本项目的java源码和数据库参考。 前言 近些年的电影在人们文娱活动中占据重要地位,另外,由于人们的生活越来越富有,越来越多的人们不再选择在家里看电影,而是选择去电影院看电影。但是,以往的售票方式是…...
uniapp 必须掌握的细节
1.使用watch实现实时监控的效果 例如:实时监测手机号码的示例 // 实时监测手机号码 watch(() > UserRegisterForm.value.phone, (newPhone) > {// 简单的手机号码正则表达式验证const phoneRegex /^1[3-9]\d{9}$/;tips.value.tipPhone !phoneRegex.test(n…...
JavaWeb——Vue组件库Element(3/6):常见组件:Dialog对话框、Form表单(介绍、使用、实际效果)
目录 Dialog对话框 介绍 使用 实际效果 Form表单 介绍 使用 实际效果 Dialog对话框 介绍 Dialog对话框:在保留当前页面状态的情况下,告知用户并承载相关操作。 Dialog 对话框组件可以在保留当前页面信息的状态下弹出一个对话框,并…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...
【Go语言基础【12】】指针:声明、取地址、解引用
文章目录 零、概述:指针 vs. 引用(类比其他语言)一、指针基础概念二、指针声明与初始化三、指针操作符1. &:取地址(拿到内存地址)2. *:解引用(拿到值) 四、空指针&am…...
Qt 事件处理中 return 的深入解析
Qt 事件处理中 return 的深入解析 在 Qt 事件处理中,return 语句的使用是另一个关键概念,它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别:不同层级的事件处理 方…...
在树莓派上添加音频输入设备的几种方法
在树莓派上添加音频输入设备可以通过以下步骤完成,具体方法取决于设备类型(如USB麦克风、3.5mm接口麦克风或HDMI音频输入)。以下是详细指南: 1. 连接音频输入设备 USB麦克风/声卡:直接插入树莓派的USB接口。3.5mm麦克…...
Cursor AI 账号纯净度维护与高效注册指南
Cursor AI 账号纯净度维护与高效注册指南:解决限制问题的实战方案 风车无限免费邮箱系统网页端使用说明|快速获取邮箱|cursor|windsurf|augment 问题背景 在成功解决 Cursor 环境配置问题后,许多开发者仍面临账号纯净度不足导致的限制问题。无论使用 16…...
GB/T 43887-2024 核级柔性石墨板材检测
核级柔性石墨板材是指以可膨胀石墨为原料、未经改性和增强、用于核工业的核级柔性石墨板材。 GB/T 43887-2024核级柔性石墨板材检测检测指标: 测试项目 测试标准 外观 GB/T 43887 尺寸偏差 GB/T 43887 化学成分 GB/T 43887 密度偏差 GB/T 43887 拉伸强度…...
实现p2p的webrtc-srs版本
1. 基本知识 1.1 webrtc 一、WebRTC的本质:实时通信的“网络协议栈”类比 将WebRTC类比为Linux网络协议栈极具洞察力,二者在架构设计和功能定位上高度相似: 分层协议栈架构 Linux网络协议栈:从底层物理层到应用层(如…...
c++算法学习3——深度优先搜索
一、深度优先搜索的核心概念 DFS算法是一种通过递归或栈实现的"一条路走到底"的搜索策略,其核心思想是: 深度优先:从起点出发,选择一个方向探索到底,直到无路可走 回溯机制:遇到死路时返回最近…...
