react useEffect中window.removeEventListener没生效问题解决

在useEffect中写入window.removeEventListener没有生效,代码如下

useEffect(() => {const handleResize = () => {console.log(window.innerWidth, window.innerHeight);};window.addEventListener('resize', handleResize);return () => {window.removeEventListener('resize', handleResize);};
}, [);

没生效原因:
在 removeEventListener 中所传递回的调函数需要与 addEventListener 中的保持一致,而在react中,因为视图更新所产生的更改,导致在return时所传递的函数是最新创建的函数,而不是在addEventListener中所传递的,简单来说就是react的更新机制所导致的引用问题。

解决方法:
使用useCallback来缓存一个函数,避免在每次渲染时重新创建这个函数。
也可以用useRef定义一个函数,确保函数在重新渲染是不被重新创建。

const handleResize = useCallback(() => {console.log(window.innerWidth, window.innerHeight);
}, []);useEffect(() => {window.addEventListener('resize', handleResize);return () => {window.removeEventListener('resize', handleResize);};
}, [);

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

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

相关文章

TiDB-PCTP考试复习

前言:本文仅作学习交流使用,对应《TiDB 数据库管理(303)》 补充:本文章仅用于个人学习,未经PingCAP书面许可,任何单位或个人不得将文档内容用于商业目的,或对本文章进行转载、编辑、…

商城数据库88章表36~39

schooldb库——utf8字符集——utf8_general_ci排序规则 先创建库,再去使用下列的DDL语句。 (36)DDL——操作记录表 CREATE TABLE huang_log_operates (operateid int(11) NOT NULL AUTO_INCREMENT COMMENT 自增ID,staffid int(11) NOT NUL…

使用Keil移植工程时修改单片机型号参数

系列文章目录 STM32单片机系列专栏 C语言术语和结构总结专栏 当使用Keil对STM32系列单片机开发时,如果使用的是库函数,那么不同型号单片机的工程项目文件是可以直接移植的。只需要按照下面的步骤修改对应的芯片,就可以直接将工程移植过去&a…

RabbitMQ(高级)笔记

一、生产者可靠性 (1)生产者重连(不建议使用) logging:pattern:dateformat: MM-dd HH:mm:ss:SSSspring:rabbitmq:virtual-host: /hamllport: 5672host: 192.168.92.136username: hmallpassword: 123listener:simple:prefetch: 1c…

hive启动beeline报错

问题一在zpark启动集群报错 出现上面的问题执行以下代码 chmod 777 /opt/apps/hadoop-3.2.1/logs 问题二启动beeline报错 执行 cd /opt/apps/hadoop-3.2.1 bin/hadoop dfsadmin -safemode leave 问题三执行查询语句报错 执行 set hive.exec.mode.local.autotrue;

flutter 解决ExpandableText组件三个点调整颜色问题

文章目录 前言一、相关代码总结 前言 最近写flutter项目,在使用ExpandableText时解决了一些问题,下面是解决方案,希望帮助到大家。 一、相关代码 1、代码如下: 2、我们设置linkColor就能设置ExpandableText三个点的颜色 Expand…

Spring Boot Admin

概述 Spirng Boot Admin 登录页面 Spring Boot Admin是一个用于管理Spring Boot应用的监控工具,它允许你查看和管理多个Spring Boot应用实例。用于应用信息进行界面化的展示,常常辅助我们开发人员快速查看服务运行状态在微服务架构中,Spring Boot Admin通…

微信小程序:6.事件

什么事事件 事件就是渲染层到逻辑层的通讯方式,比如提交表单,按钮点击都可以看作一个事件。 小程序中常用的事件 事件对象属性列表 当事件回调时,会收到一个事件对象event,他详细属性如夏表所示: target和curren…

微信小程序关于主包大小不能超过1.5MB的问题

常规的解决办法有以下几种 1、把资源文件改成远程服务器的,比如png这些 2、进入如图的分析页面,能明确知道你哪个插件包太大,我这里之前echart的包就1mb,现在给他缩减到了500kb的样子 3、解决vant等npm包太大的问题&#xff0c…

map与forEach的区别

JavaScript中的map和forEach都是数组原型上的方法,它们都可以用来遍历数组,但是它们之间存在一些基本的区别: 1.map方法: map会创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。 它返回…

SpringSecurity + Oauth2 + jwt实现单点登录

文章目录 前言一、springsecurity oauth2 redis方式的缺点二、oauth2认证的4种模式的选择三、认证服务器的编写 第一步、创建WebSecurity配置类第二步、创建jwt仓库配置类第三步、创建UserDetailsService类第四步、创建认证服务器配置类 四、测试认证服务器的功能 1.创建Login…

【文章复现】基于主从博弈的社区综合能源系统分布式协同 优化运行策略

随着能源市场由传统的垂直一体式结构向交互竞争型 结构转变,社区综合能源系统的分布式特征愈发明显,传统 的集中优化方法难以揭示多主体间的交互行为。该文提出一 种基于主从博弈的社区综合能源系统分布式协同优化运行 策略,将综合能源销售商作为领导者,新能源冷热电联供运…

vivado 使用“链路 (Links)”窗口查看和更改链路设置

使用“链路 (Links) ”窗口查看和更改链路设置 创建链路后 , 就会将其添加到“ Links ”视图 ( 请参阅下图 ) 中 , 该视图是更改链路设置和查看状态的主要方法 , 也是最佳方法。 “ Links ”窗口中的每一行都对应 1 …

Qt窗口全屏显示方法

要在Qt中设置窗口全屏显示,可以采取以下方法: 使用showFullScreen()方法: 对于QWidget对象,可以直接调用showFullScreen()方法来实现全屏显示。 QWidget w; w.showFullScreen();使用setWindowState()方法: 可以通过…

5、Flink事件时间之Watermark详解

1)生成 Watermark 1.Watermark 策略简介 为了使用事件时间语义,Flink 应用程序需要知道事件时间戳对应的字段,即数据流中的每个元素都需要拥有可分配的事件时间戳。 通过使用 TimestampAssigner API 从元素中的某个字段去访问/提取时间戳。…

新媒体运营-----短视频运营-----PR视频剪辑----抠像及美颜磨皮

新媒体运营-----短视频运营-----PR视频剪辑-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/138079659 文章目录 1. 超级键抠像绿(蓝)幕背景2. 常规视频抠像3. 美颜磨皮 1. 超级键抠像绿(蓝)幕背景 如果我们的素材是在摄影棚进行…

sql server判断表是否存在,要是存在删除

在 SQL Server 中,你可以使用系统视图或者查询系统表来判断表是否存在,并且可以通过 DROP TABLE 语句来删除表。以下是对应的操作示例: 判断表是否存在 使用系统视图 sys.tables: IF EXISTS (SELECT * FROM sys.tables WHERE n…

积极应对半导体测试挑战 加速科技助力行业“芯”升级

在全球半导体产业高速发展的今天,中国“芯”正迎来前所未有的发展机遇。AI、5G、物联网、自动驾驶、元宇宙、智慧城市等终端应用方兴未艾,为测试行业带来新的市场规模突破点,成为测试设备未来重要的增量市场。新兴领域芯片产品性能不断提升、…

Java8 Stream常见用法

Stream流的常见用法&#xff1a; 1.利用stream流特性把数组转list集合 //定义一个数组Integer[] array {5,2,1,6,4,3};//通过stream特性把数组转list集合List<Integer> list Arrays.stream(array).collect(Collectors.toList());//打印结果System.out.println(list);…

Socket套接字(TCP流)篇

Socket套接字 ServerSocketSocket案例演示小结 ServerSocket ServerSocket是创建TCP服务端Socket的API. ServerSocket构造方法: 方法签名方法说明ServerSocket(int port)创建一个服务端套接字Socket,并绑定到指定端口 ServerSocket方法: 方法签名方法说明Socket accept()开始…