react useEffect中removeEventListener没生效问题解决

news/2024/10/21 5:42:17/

在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.ppmy.cn/news/1444278.html

相关文章

基于单片机的机械臂运行轨迹在线控制系统设计

摘要:基于PLC的机械臂运行轨迹控制系统通过PLC采集现场信号及输出信号的状态变化实现机械臂运行轨迹的控制,不能实现多自由度机械臂控制。设计基于单片机的机械臂运行轨迹在线控制系统,系统硬件由上位机PC在线控制、主控制板和机械臂舵机控制板构成,通过光电编码器位移传感…

jmeter固定定时器,生效是在请求发送前还是发送后

一、结论 先说结果,是生效在请求发送前 二、背景 在压测流程的时候,生成订单后紧接着调订单查询接口,查询不到,报错率还挺高的,原因肯定是主从延迟,但是DBA非说延时1s内是正常的,在CPU耗用在40%以内的情…

吴恩达2022机器学习专项课程(一)7.2 逻辑回归的简化成本函数

问题预览/关键词 本节课内容逻辑回归的损失函数简化之后的形式是?为什么可以简化?成本函数的通用形式是?逻辑回归成本函数的最终形式是?逻辑回归为什么用对数损失函数计算成本函数?为什么不直接给出逻辑回归损失函数的…

交换式网络捕获网络流量的方法

交换式网络捕获网络流量的方法 参考资料: https://blog.csdn.net/weixin_44143678/article/details/107559329 # 一.端口镜像 端口镜像,又称为“端口监视”或“端口抄送”,是一种网络管理技术,旨在将网络设备上的特定端口的流…

QML基础语法五

控件和对话框 使用Qt Quick Controls模块,导入import QtQuick.Controls 1.Window窗口 Qt Quick项目都可以将Window作为根对象 设置 width、height、x、y宽高、坐标 设置title 窗口标题 设置color窗口背景色 设置opacity窗口透明度 设置visible属性显示隐藏 设置show…

Ribbon饥饿模式

饥饿加载 Ribbon默认时采用懒加载,即第一次访问时才会去创建LoadBalanceClient,请求时间会很长。而饥饿加载则会在项目启动时创建,降低第一次访问的耗时,通过下面配置开启饥饿加载: ribbon:eager-load:enabled:true …

构建云原生湖仓:Apache Iceberg与Amoro的结合实践

随着大数据技术的快速发展,企业对数据的处理和分析需求日益增长。传统的数据仓库已逐渐无法满足现代业务对数据多样性和实时性的要求,这促使了数据湖和数据仓库的融合,即湖仓一体架构的诞生。在云原生技术的推动下,构建云原生湖仓…

区块链技术与应用学习笔记(5-7节)——北大肖臻课程

​ 目录 ​BTC实现 基于交易的账本模式: UTXO集合: 交易费用: BTC网络 1.应用层: 2.网络层: 3传播层: 什么是鲁棒? BTC挖矿: 出块奖励: 挖矿难度调整&#…