【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>)}
}

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

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

相关文章

Pikachu-目录遍历

目录遍历&#xff0c;跟不安全文件上传下载有差不多&#xff1b; 访问 jarheads.php 、truman.php 都是通过 get 请求&#xff0c;往title 参数传参&#xff1b; 在后台&#xff0c;可以看到 jarheads.php 、truman.php所在目录&#xff1a; /var/www/html/vul/dir/soup 图片…

master节点k8s部署]33.ceph分布式存储(四)

总结ceph分布式存储&#xff08;三&#xff09;中提到的三种方法&#xff1a; 1.创建rbda&#xff0c;并且在创建pv的时候配置该rbda,以下代码仅展示关键信息。 [rootxianchaomaster1 ~]# cat pv.yaml apiVersion: v1 kind: PersistentVolume metadata: name: ceph-pv ...…

【每日一题 | 24.10.7】Fizz Buzz 经典问题

1. 题目2. 解题思路3. 代码实现&#xff08;AC_Code&#xff09; 个人主页&#xff1a;C_GUIQU 归属专栏&#xff1a;每日一题 1. 题目 Fizz Buzz 经典问题 2. 解题思路 【法1】逻辑硬解&#xff1a;按照题目逻辑分四种情况&#xff0c;用if else 判断即可。 【法2】switc…

Win10鼠标总是频繁自动失去焦点-非常有效-重启之后立竿见影

针对Win10鼠标频繁自动失去焦点的问题&#xff0c;可以尝试以下解决方案&#xff1a; 一、修改注册表&#xff08;最有效的方法-重启之后立竿见影&#xff09; 打开注册表编辑器&#xff1a; 按下WindowsR组合键&#xff0c;打开运行窗口。在运行窗口中输入“regedit”&#x…

Python中的Enum

Python中的Enum Enum&#xff08;枚举&#xff09;在很多应用场景中都会出现&#xff0c;因此绝大部分编程语言都实现了Enum类型&#xff0c;Python也不列外&#xff0c;但列外的是Enum在Python3.4中才被正式支持&#xff0c;我们先来看看Python3中的Enum是怎么使用的。 枚举的…

uniapp微信小程序巧用跳转封装鉴权路由

1.这是封装的跳转方法&#xff1a; import store from "../stores/store";function Router(type, url, params) {const NoLoginPage [。。。。。];var queryString Object.keys(params).map((key) > ${key}${params[key]}).join("&");if (!NoLog…

在 Windows 环境中配置 virtualenvwrapper

在 Windows 环境中配置 virtualenvwrapper 需要使用 virtualenvwrapper-win。以下是具体步骤&#xff1a; 安装步骤 安装 Python 确保你已经安装了 Python&#xff0c;并且 python 和 pip 已添加到系统的 PATH 中。 安装 virtualenv 和 virtualenvwrapper-win 使用以下命令安…

VMware ESXi 7.0U3q macOS Unlocker OEM BIOS 2.7 Dell HPE 联想定制版 9 月更新发布

VMware ESXi 7.0U3q macOS Unlocker & OEM BIOS 2.7 Dell HPE 联想定制版 9 月更新发布 VMware ESXi 7.0U3q macOS Unlocker & OEM BIOS 2.7 标准版和厂商定制版 ESXi 7.0U3 标准版&#xff0c;Dell (戴尔)、HPE (慧与)、Lenovo (联想)、Inspur (浪潮)、Cisco (思科)…

探索二叉树的奇幻世界:解密二叉树的结构与遍历

文章目录 目录 一、二叉树的基本操作 1.1 获取树中节点的个数 1.2 获取叶子节点的个数 1.3 获取第K层节点的个数 1.4 获取二叉树的高度 二、二叉树相关习题 2.1 检查两颗树是否相同 2.2 另一颗树的子树 2.3 翻转二叉树 2.4 判断一颗二叉树是否是平衡二叉树 一、二…

设计模式-创建型-常用:单例模式、工厂模式、建造者模式

单例模式 概念 一个类只允许创建一个对象&#xff08;或实例&#xff09;&#xff0c;那这个类就是单例类&#xff0c;这种设计模式就叫做单例模式。对于一些类&#xff0c;创建和销毁比较复杂&#xff0c;如果每次使用都创建一个对象会很耗费性能&#xff0c;因此可以把它设…

封装el-upload组件,用于上传图片和视频

使用环境 vue3element-ui plus 需要根据后端返回结构修改的函数&#xff1a;onPreview onRemove onSuccess 组件使用 基本使用 源代码&#xff1a; <script setup> import AutoUploadFile from /components/auto-upload-file/index.vue function change(urls){console.…

Html批量转word工具2.1

2024年10月7日记录&#xff1a; 有客户反馈&#xff0c;2.0刚运行就提示转换完成 有问题就解决。正好国庆假期这几天有空&#xff0c;2.1版就出炉了。 2.1 更新记录&#xff1a; 修复了1个bug&#xff1a;刚运行就提示转换完成 下载地址&#xff1a;Html 转 word 批量处理工具…

一、Python(介绍、环境搭建)

一、介绍 Python 是一种高级编程语言&#xff0c;具有简洁易读的语法、丰富的库和强大的功能。Python是解释型语言&#xff0c;运行代码必须依赖安装好的解释器。Python目前存在两个版本&#xff1a;Python2、Python3&#xff08;主流使用&#xff09; 二、环境搭建 1.安装P…

前端的全栈混合之路Meteor篇(二):RPC方法注册及调用

在Meteor 3.0中&#xff0c;RPC&#xff08;远程过程调用&#xff09;机制是实现前后端数据交互的重要特性。通过RPC&#xff0c;前端可以轻松调用后端方法&#xff08;Methods&#xff09;并获取数据&#xff0c;而后端的逻辑也可以同步或异步执行并返回结果。本文将详细介绍M…

智能家居有哪些产品?生活中常见的人工智能有哪些?

智能家居有哪些产品? 1、智能照明设备类&#xff1a;智能开关、智能插座、灯控模块、智能空开、智能灯、无线开关。 2、家庭安防类&#xff1a;智能门锁、智能摄像机、智能猫眼、智能门铃。 3、智能传感器类&#xff1a;烟雾传感器、可燃气体传感器、水浸传感器、声光报警器…

小程序-全局数据共享

目录 1.什么是全局数据共享 2. 小程序中的全局数据共享方案 MboX 1. 安装 MobX 相关的包 2. 创建 MobX 的 Store 实例 3. 将 Store 中的成员绑定到页面中 4. 在页面上使用 Store 中的成员 5. 将 Store 中的成员绑定到组件中 6. 在组件中使用 Store 中的成员 1.什么是全…

微服务实战——SpringCache 整合 Redis

SpringCache 整合 Redis 1.配置 spring.cache.typeredis EnableCaching EnableFeignClients(basePackages "com.cwh.gulimall.product.feign") EnableDiscoveryClient SpringBootApplication public class GulimallProductApplication {public static void main(…

ThinkPHP和PHP的区别

文章目录 ThinkPHP和PHP的区别一、引言二、PHP简介1、第一步1.1、示例代码 三、ThinkPHP简介2、第二步2.1、特点2.2、示例代码 四、总结 ThinkPHP和PHP的区别 一、引言 在Web开发领域&#xff0c;PHP是一种广泛使用的开源脚本语言&#xff0c;而ThinkPHP则是一个基于PHP的MVC…

Python 语言学习——应用1.2 数字图像处理(第二节,变换)

目录 1.基础知识 1.图像几何变换概念 2.图像几何变换方式 3.插值运算 4.几何变换步骤 2.各类变换 1.位置变换 2.形状变换 3.代数运算 3.实战演练 1.基础知识 1.图像几何变换概念 在图像处理过程中&#xff0c;为了观测需要&#xff0c;常常需要对 图像进行几何变换&am…

Kali或Debian系统安装JDK1.8保姆级教程

一、下载JDK1.8 先到Oracle的官网下载JDK1.8 Java Archive | Oraclehttps://www.oracle.com/java/technologies/downloads/archive/Java Archive Downloads - Java SE 8