React组件卸载时无法移除通过setTimeout添加的keydown事件监听的原因解析

嘿，你的分析其实完全命中了核心问题！让我帮你把这个逻辑理得更清楚，顺便补充一点你可能没注意到的细节：

问题的本质：函数引用的唯一性 #

浏览器的addEventListener和removeEventListener有一个铁规则：只有当移除时传入的函数引用、事件名、捕获/冒泡参数（第三个布尔值）完全和添加时一致，才能成功移除监听。

在你最开始的代码里，theFunction是定义在useEffect内部的：

useEffect(() => {
  const timeoutID = setTimeout(() => {
    clearTimeout(timeoutID);
    window.addEventListener("keydown", theFunction, true);
  }, 500);

  function theFunction(event: KeyboardEvent) {
    // do something
  }

  return () => {
    window.removeEventListener("keydown", theFunction, true);
  };
}, []);

每次你的弹窗组件挂载时，useEffect会重新执行，这时会在内存中创建一个全新的theFunction实例。哪怕函数的代码完全一样，它在内存中的引用地址是不同的——对JS来说，这就是两个完全不同的函数。

当组件卸载时，useEffect的清理函数会执行，但它尝试移除的是这次挂载时创建的theFunction实例。如果组件多次挂载，每次添加的监听都是用的不同的theFunction实例，前一次的监听对应的函数引用已经被丢弃，后续的清理函数根本找不到要移除的那个监听，导致事件监听越堆越多。

为什么把函数移到组件外就解决了？ #

当你把theFunction移到组件定义之外（在imports下面），这个函数就变成了一个模块级的固定引用——它在整个应用生命周期中只会被创建一次，内存地址永远不变。

不管你的组件挂载多少次，addEventListener和removeEventListener用的都是同一个函数引用，所以每次清理函数执行时，都能精准找到对应的监听并移除，自然不会出现堆叠的问题。

额外的React细节：严格模式的影响 #

你提到用了React 16的严格模式，这其实也可能放大了这个问题。在开发环境下，严格模式会模拟组件的挂载-卸载-重新挂载流程，用来检测可能的内存泄漏。如果你的函数引用每次都变，这个模拟流程会直接导致多出来的监听残留，让你更容易在DevTools里看到堆叠的情况。

另一种可行的解决方案：useCallback #

如果你不想把函数放在组件外（比如函数需要访问组件内部的状态或props），可以用useCallback来缓存函数引用：

const Component = () => {
  // 用useCallback缓存函数，依赖数组为空则永远返回同一个引用
  const theFunction = useCallback((event: KeyboardEvent) => {
    // do something
  }, []);

  useEffect(() => {
    const timeoutID = setTimeout(() => {
      window.addEventListener("keydown", theFunction, true);
    }, 500);

    return () => {
      clearTimeout(timeoutID); // 补充：原来的clearTimeout在setTimeout回调里无效，应该放在清理函数里，防止组件在500ms内卸载时留下无效定时器
      window.removeEventListener("keydown", theFunction, true);
    };
  }, [theFunction]); 
};

这样也能保证每次添加和移除用的是同一个函数引用，同时还能让函数访问组件内部的变量（只要把依赖项加到useCallback的数组里就行）。

总结 #

核心就是：removeEventListener认的是函数的内存引用，而不是函数的代码内容。当你在组件内部（包括useEffect里）定义函数时，每次组件挂载都会生成新的引用，导致清理函数无法匹配到之前添加的监听。把函数移到组件外或用useCallback缓存引用，就能让添加和移除的函数是同一个，从而解决堆叠问题。

内容来源于stack exchange