React组件卸载时清理useEffect 解决滚动监听导致的状态更新警告

问题根因 #

• 你在useEffect中给window对象绑定了滚动事件处理函数，但没有对应的卸载逻辑
• 当组件销毁后，滚动事件仍然处于监听状态，触发时会尝试更新已经卸载组件的state，进而触发内存泄漏警告

修复方案 #

你只需要给useEffect补充清理逻辑，在组件卸载时移除绑定的滚动事件即可，推荐使用标准的addEventListener/removeEventListener方式绑定事件，避免覆盖其他业务逻辑绑定的window滚动事件。
修复后代码如下：

const [position, setPosition] = useState(null);

useEffect(() => {
  const handleScroll = () => {
    if(window.pageYOffset > 100){
      setPosition(true);
    } else if (window.pageYOffset < 100) {
      setPosition(false);
    }
  }
  // 绑定滚动事件
  window.addEventListener('scroll', handleScroll)
  // 注册清理函数，组件卸载时移除事件
  return () => window.removeEventListener('scroll', handleScroll)
}, [])

可选优化 #

滚动事件触发频率非常高，如果业务允许可以添加防抖逻辑减少setPosition的执行次数，提升性能。

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