react useEffect中removeEventListener没生效问题解决

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

javascript 复制代码
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定义一个函数,确保函数在重新渲染是不被重新创建。

javascript 复制代码
const handleResize = useCallback(() => {
  console.log(window.innerWidth, window.innerHeight);
}, []);
 
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, [);
相关推荐
蚂蚁RichLab前端团队4 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光4 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5204 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20505 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端5 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿5 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉5 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~5 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
matlab的学徒5 小时前
Web与Nginx网站服务(改)
linux·运维·前端·nginx·tomcat
从零开始学习人工智能6 小时前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html