React组件卸载后handleScroll仍生效？useEffect清理函数作用解析

一、清理函数移除handleScroll的工作原理 #

React的useEffect清理函数，会在组件卸载时或者当前effect重新执行前自动触发。

你在useEffect内部定义了handleScroll，每次effect执行时都会生成一个新的handleScroll函数实例，但对应的清理函数是和这次effect执行时的handleScroll绑定的——也就是说，添加监听时用的是A版本的handleScroll，后续清理时调用removeEventListener('scroll', handleScroll)，这里的handleScroll就是A版本，和添加时的引用完全一致，所以浏览器能精准找到并移除这个监听事件。

如果你的handleScroll是定义在useEffect外面的，每次组件渲染都会生成新的函数引用，那清理时用的新函数和之前添加的旧函数不是同一个，就会导致监听没法被正确移除。

二、组件卸载后handleScroll“仍在运行”的常见原因 #

看起来函数还在跑，大概率不是scroll监听没被移除，而是以下几种情况：

• 异步操作延迟执行：如果handleScroll里有setTimeout、API请求这类异步逻辑，组件卸载后，异步任务才完成，这时候回调函数会继续执行（比如尝试更新组件状态），就会让你误以为handleScroll还在响应滚动。
• 函数引用不稳定导致监听没移除：如果handleScroll没定义在useEffect内部，也没通过useCallback包裹来稳定引用，那每次effect执行时会添加新的监听，但清理时用的是新的函数引用，旧的监听就留在了window上，组件卸载后旧监听依然会触发。
• 组件实际没卸载：比如你用display: none或者条件渲染里的隐藏逻辑，但组件其实还存在于DOM树中，根本没触发卸载，那scroll监听自然会继续工作。

解决建议 #

• 处理异步操作：在组件卸载时取消异步任务，比如用AbortController终止API请求，或者在组件内部维护一个isMounted状态，在异步回调里先判断是否已挂载再执行后续逻辑。
• 稳定函数引用：要么把handleScroll定义在useEffect内部，要么用useCallback包裹handleScroll，并把它作为useEffect的依赖项传入。
• 检查组件状态：用React DevTools查看组件树，确认目标组件是否真的被卸载了。

内容的提问来源于stack exchange，提问作者SAE _