react useEffect中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/5347.shtml

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

相关文章

上位机图像处理和嵌入式模块部署(树莓派4b进行自动化测试)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 硬件、软件功能开发ok只是产品开发的第一步。怎么做到自动化测试、保证产品质量才是关键。很多时候,我们给客户提供了功能,…

Leetcode-17.04. 消失的数字

面试题 17.04. 消失的数字 - 力扣(LeetCode)https://leetcode.cn/problems/missing-number-lcci/ 目录 面试题 17.04. 消失的数字 - 力扣(LeetCode) 题目 解题(注释) 第一种方法 第二种方法 第三种方法 题目 数组nums包含…

73、栈-柱状图中最大的矩形

思路: 矩形面积:宽度*高度 高度如何确定呢?就是在宽度中最矮的元素。如何确定宽度,就是要确定左右边界。 当我们在处理直方图最大矩形面积问题时,遇到一个比栈顶柱子矮的新柱子时开始计算面积的原因关键在于如何确定…

医院手术室麻醉信息管理系统源码 自动生成麻醉的各种医疗文书(手术风险评估表、手术安全核查表)

目录 手术风险评估表 一、患者基本信息 二、既往病史 三、手术相关信息 四、风险评估因素 五、风险评估结果 手术安全核查表 一、患者身份与手术信息核对 二、术前准备核查 三、手术团队与职责确认 四、手术物品与设备核查 五、术中关键步骤核查 六、术后核查 七…

政府采购合作创新采购方式管理暂行办法

4月26日,财政部印发《政府采购合作创新采购方式管理暂行办法》(以下简称《办法》),旨在贯彻落实党中央、国务院关于加快实施创新驱动发展战略有关要求,支持应用科技创新。《办法》鼓励有研发能力的国有企业、民营企业、外商投资企…

远程桌面的端口配置与优化

在现代企业环境中,远程桌面连接已成为日常工作中不可或缺的一部分。然而,随着网络攻击的增加,确保远程桌面连接的安全性变得尤为重要。其中一个关键的安全因素是端口配置。 一、远程桌面默认端口 远程桌面协议(RDP)默…

Open sesame! universal black box jailbreaking of large language models - 论文翻译

论文链接: https://arxiv.org/pdf/2309.01446.pdf Open sesame! universal black box jailbreaking of large language models Abstract1 Introduction2 Previous Work3 Threat Model4 Our Method4.1 Genetic Algorithm4.2 Population Encoding4.3 Fitness4.4 Sele…

亚马逊关键字搜索商品列表API接口:探索海量商品的利器

亚马逊关键字搜索商品列表API接口允许开发者通过输入关键字或特定参数,在亚马逊平台上进行商品搜索,并返回符合搜索条件的商品列表信息。这些信息包括商品的标题、图片、价格、评价等,为商家、开发者以及市场分析师提供了丰富的商品数据支持。…

leetcode989-Add to Array-Form of Integer

题目 整数的 数组形式 num 是按照从左到右的顺序表示其数字的数组。 例如,对于 num 1321 ,数组形式是 [1,3,2,1] 。 给定 num ,整数的 数组形式 ,和整数 k ,返回 整数 num k 的 数组形式 。 示例 1: 输入…

docker里部署SpringBoot项目,访问不到扬声器,如何解决??

🏆本文收录于「Bug调优」专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&…

# 从浅入深 学习 SpringCloud 微服务架构(七)Hystrix(1)

从浅入深 学习 SpringCloud 微服务架构(七)Hystrix(1) 一、Hystrix:基于 RestTemplate 的熔断配置 1、Hystrix 介绍: 1)Hystrix 是由 Netflix 开源的一个延迟和容错库, 用于隔离访…

kubernetes 之 一键安装prometheus

kubernetes上安装prometheus prometheus官网: https://github.com/prometheus-operator/kube-prometheus 按照官网下载对应版本 相对稳定一些 这里我们k8s 是1.28 版本的 相对应的下载 0.13 版本 rootmaster2:~# git clone https://github.com/prometheus-operato…

《21天学通C++》(第十二章)运算符类型与运算符重载

1.为什么要重载运算符&#xff1f; 通过重载运算符&#xff0c;可以将复杂的操作封装成简单的运算符形式&#xff0c;简化代码&#xff0c;提高可读性下面举一个简单的例子 计算两个点的坐标之和。 1.不重载运算符 #include <iostream> using namespace std; class P…

【重识python day4】

列表得方法 list&#xff0c;列表类型&#xff0c;用于存储一些数据的容器&#xff08;有序 & 可修改&#xff09;、 tuple&#xff0c;元组类型&#xff0c;用于存储一些数据的容器&#xff08;有序 & 不可修改&#xff09; 不可变类型&#xff1a;字符串、布尔、整…

如何编辑K8s中的configmap信息

1.将k8s中configmap信息映射到本地yaml文件 语法: kubectl get configmap <configmap-name> -n <namespace-name> -o yaml > configmap.yaml 实例&#xff1a; kubectl get configmap kuboard-v3-config -n kuboard -o yaml > configmap.yaml 2.编辑yam…

消息队列相关汇总

目录 一、什么是消息队列 二、Kafka怎么避免重复消费 三、RabbitMQ 的消息如何实现路由 四、如何保证RabbitMQ的消息可靠传输 五、如何进⾏消息队列选型 一、什么是消息队列 消息队列 Message Queue&#xff0c;简称 MQ。是一种应用间的通信方式&#xff0c;主要由三个部分…

GCB | 陆地生态系统C:N:P化学计量对降水变化的响应

西北农林科技大学水保学院上官周平研究员团队在陆地生态系统C:N:P化学计量对降水变化的响应方面取得新进展&#xff0c;并以“C:N:P stoichiometry of plants, soils, and microorganisms: Response to altered precipitation”为题发表在国际生态环境领域著名期刊Global Chang…

AI发展势头强劲,或许会催生这些职业!

AI&#xff08;人工智能&#xff09;的发展正在并将继续催生多种新的职业&#xff0c;这些职业通常与AI的设计、开发、测试、部署、监管、维护以及与其互动和应用相关。 按照现在AI发展的趋势来看&#xff0c;可预测的一些新兴职业大概有下面这些&#xff1a; 当然以上只是一些…

初识Electron,创建桌面应用

历史小剧场 呜呼&#xff01;古有匈奴犯汉&#xff0c;晋室不纲&#xff0c;铁木夺宋&#xff0c;虏清入关&#xff0c;神舟陆沉二百年有余&#xff0c;中国之见灭于满清初非满人能灭之&#xff0c;能有之也因有汉奸以作虎怅&#xff0c;残同胞媚异种&#xff0c;始有吴三桂洪承…

中职数字化校园网络建设

中职&#xff08;职校&#xff09;数字化校园的校园网建设立足于职业教育、职业学校的特点&#xff0c;充分注意到信息技术的飞速发展、通信成本的迅速降低的特点。在规划和建设校园网时&#xff0c;遵循以下原则&#xff1a; 采用通用和成熟的技术&#xff1a;采用通用的、成熟…