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);
  };
}, [);
相关推荐
一点一木4 分钟前
🚀 2025 年 06 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
杨进军6 分钟前
实现 React 函数组件渲染
前端·react.js·前端框架
归于尽11 分钟前
被 50px 到 200px 的闪烁整破防了?useLayoutEffect 和 useEffect 的区别原来在这
前端·react.js
杨进军16 分钟前
实现 React Fragment 节点渲染
前端·react.js·前端框架
杨进军18 分钟前
实现 React 类组件渲染
前端·react.js·前端框架
小山不高20 分钟前
react封装横向滚动组件
前端
拾光拾趣录21 分钟前
油猴插件开发学习:从零编写你的第一个浏览器增强脚本
前端·浏览器
国家不保护废物21 分钟前
深入浅出JavaScript事件循环(event loop):宏任务与微任务的奇幻之旅
前端·javascript·面试
FogLetter22 分钟前
React组件开发之Todos基础:从零打造一个优雅的待办事项应用
前端·javascript·react.js
刘羡阳23 分钟前
使用d3js实现了一个组织架构树形图(拖拽,展开收起)
前端