react useEffect中removeEventListener没生效问题解决

原创

已于 2024-04-28 14:31:49 修改 · 817 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react #reactjs

于 2024-04-26 14:18:18 首次发布

文章讲述了在React组件中使用useEffect添加和移除resize事件监听器时，如果不正确处理，会导致事件监听未生效。原因是React的更新机制使得回调函数在每次渲染时都可能是新创建的。解决方法是使用useCallback或useRef来确保回调函数在更新时被缓存或保持不变。

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

useEffect(() => {
   
   
  const handleResize = () => {
   
   
  	console.log(window.innerWidth, window.innerHeight

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Misnice

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

React - 监听器执行Hook不生效的闭包性问题

Zong_0915的博客

11-10

1438

React - 实现瀑布流加载。当时的代码编写里面，其实是待优化的地方。只不过当时由于问题还没解决，就用了其它方案来代替。因此本篇文章，就对这个问题做一个探究：闭包性和state值更改。

React Hook详解 - useState、useEffect、useContext、useRef、自定义hook

ZhShy

10-16

2107

在上面的操作中都不用清理的副作用，然而，有些副作用是需要去清理的，不清理会造成异常甚至内存泄漏，比如开启定时器，如果不清理，则会多次开启，从上面可以看到。因为涉及到 state 的状态合并，react 认为当你在事件绑定中操作 state 是非常频繁的，所以为了节约性能 react 会把多次。类似，可以接收一个新的 state 值更新，也可以函数式更新。进行合并为一次，最后在一次性的更新 state，而定时器里面操作 state 是不会把多次合并为一次更新的。返回一个state，以及更新state的函数。

1 条评论您还未登录，请先登录后发表或查看评论

React Hooks removeEventListener 使用无效问题

qq_37124515的博客

01-20

4635

组件卸载时和原来的componentWillUnmount一样的用法, 在useEffect return里调用就可以了 useEffect(() => { window.addEventListener('click', clickFunc); return () => { window.removeEventListener('click', clickFunc); }; }); 组件使用过程中当组件不涉及重新渲染时了, 像这么写完全没问题,

window.removeEventListener移除事件监听不生效？

weixin_42229667的博客

03-13

2451

window.removeEventListener移除事件不生效？第二参数必须传入创建监听时传入的那个函数

解决removeEventListener 无法清除监听的问题

01-18

1. 原因许多入前端不久的人都会遇到 removeEventListener 无法清除监听的情况，这是由于要移除事件句柄，addEventListener() 的执行函数必须使用外部函数，如上实例所示 (myFunction)。匿名函数，类似 “document.removeEventListener(“event”, function(){ myScript });” 该事件是无法移除的。而在很多情况下我们需要句柄回调的传参，又需要其他传参时免不了使用句柄，这个时候我们需要写一个方法去替代这个回调，以下是解决方式，写了一个addListener 函数在 addEventListene

window.removeEventListener不起作用

u011444756的博客

01-18

1025

【代码】window.removeEventListener不起作用。

removeEventListener 不生效问题

m0_48292596的博客

07-12

1226

removeEventListener 不生效问题是由于我们私用内部函数，所以我们把用定义个函数就可以了const typeFunc=()=>{}target.addEventListener(type,typeFunc);target.removeEventListener(type,typeFunc)确保销毁的函数变量与监听的函数变量一致...

removeEventListener事件不起作用

平平无奇小码农的博客

01-26

3241

例子：给按钮添加点击事件 <button class="btn2">点我啊啊啊啊</button> var btn2 = document.querySelector('.btn2'); btn2.addEventListener('click', function () { alert('1111'); }, false); btn2.removeEventListener('click', function () { alert('1111'); }, false)

React中useEffect的清除机制的写法

07-05

在 React 中，`useEffect` Hook 提供了一种统一的方式来处理组件生命周期中的副作用操作。清除机制是 `useEffect` 的一个重要组成部分，它允许开发者在组件卸载或依赖项发生变化时执行清理逻辑，以避免内存泄漏或...

logicflow的keyboard中exabled设置为true默认快捷键不生效怎么解决

热门推荐

amyleeYMY的博客

10-26

1万+

这两天写了个小功能封装成api供别人使用，在开发中遇到了些问题，记录下。项目情况是有地方触发多次执行这部分代码，所以我想在每次add前先remove掉。用addEventListener绑定事件，但是addEventListener可以给同一元素多次绑定同一事件，导致多次触发。然后就想到用removeEventListener来移除之前绑定的事件。但是，一切都没有那么顺利... 第一...

EventTarget.removeEventListener() 取消监听事件不起作用(失效)的原因

时清云的博客

05-19

3390

1.监听事件addEventListener() 语法2.取消事件removeEventListener() 语法参数说明type: 表示监听事件类型的字符串。listener: 目标事件绑定的回调函数options: 一个指定有关 listener 属性的可选参数对象useCapture: 指定需要移除的 EventListener 函数是否为捕获监听器。true 表示“事件捕获”, 默认为false, 表示“事件冒泡”3. removeEventListener() 移除成功需要满足。

React中“removeEventListener无效”与状态数组新增数据时产生死循环的问题

qq_41120857的博客

01-17

577

在removeEventListener 中所传递回调函数需要与addEventListener中的保持一致”，而在react中，因为视图更新所产生的更改，导致在return时所传递的函数是最新创建的函数，而不是在addEventListener中所传递的，简单来说就是react的更新机制所导致的引用问题。vue3后遗症，错的有点傻，如果不加依赖的话，无法获取最新值，添加依赖的话，又会死循环。解决方法为使用回调函数进行传参。

removeEventListenerz不生效的问题

qq_40936253的博客

12-12

701

1、 element.addEventListener(type,handler,false) element.removeEventListener(type,handler,false) handle函数要保持一致，才能移除指定的事件函数 2、 element.addEventListener(type,this.handler.bind(this),false) eleme...

使用了bind 之后 removeEventListener 不生效

右边疯子_的博客

11-17

665

场景：(见代码) addBodyMove(){ this.bodyDom.addEventListener('touchmove',this.bodyMove.bind(this),{ passive: false }) } addBodyMoveEnd(){ this.bodyDom.addEventListener('touchend',this.bodyMoveEnd.bind(this),{ passive: false }) } removeBodyMove(