ReactJS中window.removeEventListener失效问题：关闭粘性元素后滚动时元素再次恢复粘性

嘿，这个问题我太熟悉了——本质上是React函数组件的渲染特性导致事件监听的移除操作没生效，咱们来一步步拆解清楚：

你的代码里有两个核心问题，导致移除scroll监听器后元素依然会恢复粘性：

• handler函数引用不固定：React函数组件每次重新渲染时，都会重新创建handler函数。你在组件挂载时通过useEffect添加的是第一次渲染生成的handler，但点击关闭按钮时，closeSticky里调用removeEventListener传入的是当前渲染周期的新handler——两个函数的引用完全不同，所以移除操作根本没作用，原来的监听器还在默默工作，滚动时依然会触发setSticky(window.scrollY > 700)。
• useEffect依赖缺失：你的useEffect依赖是空数组，只会在组件挂载时执行一次。即便后续hidden状态变化，也不会重新执行useEffect来调整监听器，而且当handler引用变化时，也无法更新监听器。

我们可以通过useCallback缓存函数引用，再配合正确的useEffect依赖来彻底解决问题：

1. 用useCallback固定handler引用 #

使用useCallback包裹handler函数，确保每次渲染时它的引用都保持一致，这样添加和移除的是同一个函数：

const handler = useCallback(() => {
  setSticky(window.scrollY > 700);
}, []); // 这里依赖为空，因为setSticky是useState返回的固定引用，window.scrollY是全局变量

2. 调整useEffect的依赖与逻辑 #

让useEffect监听hidden和handler的变化，并且在组件卸载时自动移除监听器（避免内存泄漏）：

useEffect(() => {
  if (!hidden) {
    window.addEventListener("scroll", handler, false);
  } else {
    window.removeEventListener("scroll", handler, false);
  }

  // 组件卸载时强制清理监听器，防止内存泄漏
  return () => {
    window.removeEventListener("scroll", handler, false);
  };
}, [hidden, handler]); // 依赖加入hidden和handler，状态变化时自动更新监听器

3. 简化closeSticky函数 #

现在只需要更新状态即可，因为useEffect会根据hidden的变化自动处理监听器的添加/移除：

const closeSticky = () => {
  setHidden(true);
  setSticky(false);
};

import { useState, useEffect, useCallback } from 'react';

export default function MyComponent(props) {
  const [sticky, setSticky] = useState(false);
  const [hidden, setHidden] = useState(false);
  
  // 用useCallback固定handler引用
  const handler = useCallback(() => {
    setSticky(window.scrollY > 700);
  }, []);
  
  const closeSticky = () => {
    setHidden(true);
    setSticky(false);
  };
  
  // 动态管理scroll监听器
  useEffect(() => {
    if (!hidden) {
      window.addEventListener("scroll", handler, false);
    } else {
      window.removeEventListener("scroll", handler, false);
    }

    // 卸载时清理监听器
    return () => {
      window.removeEventListener("scroll", handler, false);
    };
  }, [hidden, handler]);
  
  return (
    <>
      <button onClick={closeSticky}>关闭粘性元素</button>
      <div 
        className={styles.myDiv} 
        style={sticky && !hidden ? {display: 'block'} : {display: 'none'}}
      >
        粘性内容...
      </div>
    </>
  );
}

• 渲染粘性元素时，记得同时判断sticky和hidden状态，确保关闭后即使旧监听器意外触发setSticky(true)，元素也不会重新显示。
• 这种用useCallback配合带依赖useEffect的方式，是React中处理全局事件监听的标准做法，能有效避免内存泄漏和引用不一致的问题。

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