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.mfbz.cn/a/578104.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序:5.数据绑定

在Data中定义数据早wxml中进行数据使用 在data中定义数据 在页面对应的js对象中找到data,然后把数据进行定义即可 Page({data: {motto: Hello World,userInfo: {avatarUrl: defaultAvatarUrl,nickName: ,},hasUserInfo: false,canIUseGetUserProfile: wx.canIUse…

牛客NC143 矩阵乘法【中等 矩阵 C++/Java/Go/PHP】

题目 题目链接: https://www.nowcoder.com/practice/bf358c3ac73e491585943bac94e309b0 思路 矩阵算法在图像处理、神经网络、模式识别等领域有着广泛的用途。在矩阵乘法中,A矩阵和B矩阵可以做乘法运算必须满足A矩阵的列的数量等于B矩阵的行的数量。运算…

架构师系列- 消息中间件(12)-kafka基础

1、应用场景 1.1 kafka场景 Kafka最初是由LinkedIn公司采用Scala语言开发,基于ZooKeeper,现在已经捐献给了Apache基金会。目前Kafka已经定位为一个分布式流式处理平台,它以 高吞吐、可持久化、可水平扩展、支持流处理等多种特性而被广泛应用…

【docker】安装openjdk

查看可用的 openjdk版本 docker hub 查看地址:https://hub.docker.com/_/openjdk 此图片已被正式弃用,建议所有用户尽快找到并使用合适的替代品。其他官方形象替代品的一些例子(按字母顺序列出,没有有意或暗示的偏好)…

第三节课,后端登录【1】.2--本人

一、视频链接 网址: 后端用户脱敏和session-CSDN直播 二、代码开始 2.1 新建一个request参数。完成用户登录态键 快捷建, 全局变量 代码: // 3.记录用户的登录态/*** 这段代码是Java Web开发中的一部分,用于在会话&#xff08…

jdk版本冲突,java.lang.UnsupportedClassVersionError: JVMCFRE003

主要是编辑器所用的jdk版本和项目用的不一致导致的,虽然编译通过了,但是运行是会报错 选好后点击Apply点击ok,然后重新编译一遍项目就可以了

qml和c++结合使用

目录 文章简介1. 创建qml工程2. 创建一个类和qml文件,修改main函数3. 函数说明:4. qml 文件间的调用5. 界面布局6. 代码举例 文章简介 初学qml用来记录qml的学习过程,方便后面归纳总结整理。 1. 创建qml工程 如下图,我使用的是…

编译工具各版本与操作系统版本号兼容性冷知识 : JetBrains IntelliJ IDEA 各个主要版本及其对应的操作系统版本号的兼容情况

编译工具各版本与操作系统版本号兼容性冷知识 🧠: JetBrains IntelliJ IDEA 各个主要版本及其对应的操作系统版本号的兼容情况 文章目录 编译工具各版本与操作系统版本号兼容性冷知识 🧠: JetBrains IntelliJ IDEA 各个主要版本及其对应的操作系统版本号…

探索UTONMOS《神念无界-源起山海》元宇宙游戏的奇幻世界

在科技的前沿,元宇宙游戏如同一扇神秘的大门,缓缓开启,引领我们进入一个前所未有的奇幻世界。 UTONMOS《神念无界-源起山海》元宇宙游戏是数字世界的巅峰之作,它打破了现实与虚拟的界限,让玩家能够身临其境地体验各种奇…

二分查找-在排序数组中查找元素的第一个和最后一个位置

给你一个按照非递减顺序排列的整数数组 nums,和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target,返回 [-1, -1]。 你必须设计并实现时间复杂度为 O(log n) 的算法解决此问题。 示例 输入&#xf…

职场不败的社交口才是什么行为

职场不败的社交口才是什么行为 职场不败的社交口才:塑造卓越人际关系的行为艺术 在职场中,社交口才是一项至关重要的能力。它不仅能够帮助我们建立良好的人际关系,更能在关键时刻为我们赢得信任、提升影响力,从而在职场竞争中立于…

HR招聘,怎么做人才测评方案?

一个完整的人才测评环节,离不开对方案的合理设计,更离不开对方案的具体执行。人才测评方案,能够在很大程度上帮助人力资源工作者减轻负担,从繁琐的招聘工作中得到解脱,不再跟陀螺一样转个不停。只有具备合理的人才测评…

Java中的Collection集合

关于集合的介绍 集合分为Collection集合和Map集合(Collection集合是单列集合和Map集合双列集合)Collection和Map都为接口 Collection集合又分为List集合(集合元素可重复)和Set集合(集合元素不可重复 )Lis…

免费ChatGPT合集——亲测免费

1、YesChat 无需登录 网址:YesChat-ChatGPT4V Dalle3 Claude 3 All in One Freehttps://www.yeschat.ai/ 2. 讯飞星火 要登录 讯飞星火大模型-AI大语言模型-星火大模型-科大讯飞 3.通义千问 要登录 通义我是通义,一个专门响应人类指令的…

Linux快速部署大语言模型LLaMa3,Web可视化j交互(Ollama+Open Web UI)

本文在个人博客同步发布,前往阅读 1 介绍 本文将介绍使用开源工具Ollama(60.6k⭐)部署LLaMa大模型,以及使用Open WebUI搭建前端Web交互界面的方法。 我们先来过一遍几个相关的概念,对这块比较熟悉的朋友可跳过。 1.1 大规模语言模型 大规…

【我的Java学习笔记-2】

程序初体验 JDK的安装目录 bin:该路径下存放了各种工具命令。其中比较重要的有:javac和java(重点掌握)conf:该路径下存放了相关配置文件。include:该路径下存放了一些平台特定的头文件。jmods:该路径下存…

亿道三防onerugged|三防车载电脑在港口货柜车上的应用

作为一个专业人员,我深知在港口货柜车运输中,三防车载电脑的应用对于提高工作效率和解决实际问题的重要性。亿道三防onerugged系列产品的三防车载电脑以其卓越的功能特点和可靠性,为港口货柜车运输带来了深远的影响。 首先,三防车…

BUUCTF--web(1)

1、[极客大挑战 2019]Http1 1.http报文请求: 1、请求行: 第一部分是请求方法,常见包括GET、POST、OPTIONS(我目前还没有见过我是菜鸡) 第二部分是url 第三部分是HTTP协议(http(Hypertext transfer protocol)超文本传…

c++多文件,cmakelist编写简单示例

记录下c多文件cmakelist编写流程&#xff1a; 目录结构大致如下&#xff1a; 1、swap.h #include <iostream> #include <vector> #include <string> using namespace std;void swap(int *a,int *b); 2、swap.cpp #include "swap.h"void swap(…

【Linux学习】​​学习Linux的准备工作和Linux的基本指令

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…
最新文章