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

ops/2024/12/22 23:00:07/

在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/ops/19081.html

相关文章

【设计模式】使用中介者模式优化表单交互

我们想象一下机场的指挥塔,如果没有指挥塔的存在,每一架飞机要和方圆 100 公里内的所有飞机通信,才能确定航线以及飞行状况,后果是不可想象的。现实中的情况是,每架飞机都只需要和指挥塔通信。指挥塔作为调停者&#x…

java如何使用webService方式调用对接第三方平台

实际使用记录&#xff0c;做个记录&#xff1a; 1、需要对方提供wsdl文件,该文件中有接口的Ip地址&#xff0c;方法名、参数等详细信息&#xff0c; wsdl文档中targetNamespace为命名空间 <xsd:element name"searchBGDMIInfo">标签中name是方法名&#xff1…

HTTP网络协议的请求方法,具体详解(2024-04-26)

1、HTTP 即超文本传输协议&#xff0c;是一种实现客户端和服务器之间通信的响应协议&#xff0c;它是用作客户端和服务器之间的请求 根据 HTTP 标准&#xff0c;HTTP 请求可以使用多种请求方法。 2、方法分类 HTTP1.0 定义了三种请求方法&#xff1a; GET, POST 和 HEAD 方…

FPGA“题目周周练”活动来啦!

Hi&#xff0c;各位编程精英er~ 不知道大家的FPGA学习之旅到达哪一个阶段了呢&#xff1f;又在这个过程中遇到了哪些困惑&#xff1f; 作为一门高度专业化且充满挑战的技术&#xff0c;FPGA的学习是一场不断思考、认知、持续深化的过程。在这个过程中&#xff0c;思维的敏捷和…

【ARMv9 DSU-120 系列 4 -- Utility bus 详细介绍 1】

请阅读【Arm DynamIQ™ Shared Unit-120 专栏 】 文章目录 DSU-120 Utility bus事务类型访问大小事务长度安全状态总结缓存控制(ARCACHEU 或 AWCACHEU)突发类型(ARBURSTU 或 AWBURSTU)锁定信号(ARLOCKU 或 AWLOCKU)Utility bus acceptance capabilities

神经网络与深度学习(三)——卷积神经网络基础

卷积神经网络基础 1.为什么要学习神经网络1.1全连接网络问题1.2深度学习平台简介1.3PyTorch简介1.4简单示例 2.卷积神经网络基础2.1进化史2.2特征提取2.3基本结构 3.学习算法3.1前向传播3.2误差反向传播3.2.1经典BP算法3.2.2卷积NN的BP算法 4.LeNet-5网络4.1网络介绍4.2网络结构…

MySQL基础操作

前言&#x1f440;~ 结束了java数据结构篇章&#xff0c;紧接着来到MySQL的学习喽~ 如果各位对文章的内容感兴趣的话&#xff0c;请点点小赞&#xff0c;关注一手不迷路&#xff0c;如果内容有什么问题的话&#xff0c;欢迎各位评论纠正 &#x1f91e;&#x1f91e;&#x1f9…

【MATLAB源码-第199期】基于MATLAB的深度学习(CNN)数字、模拟调制识别仿真,输出识别率。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 基于深度学习的调制识别系统利用复杂的数学模型和算法来识别和分类从不同来源接收到的无线信号的调制类型。这种技术的应用广泛&#xff0c;特别是在无线通信、电子战、频谱监测和认知无线电等领域中具有重要价值。调制识别系…