React中无法移除eventListener怎么办？已尝试useCallback仍无效

核心问题排查与修复 #

1. 确保useCallback的依赖项完全正确 #

useCallback会根据依赖数组生成稳定的函数引用，如果依赖项不全，每次组件渲染都会生成新的函数实例。这时候你在清理函数里移除的是新函数，和之前绑定到window上的旧函数不是同一个，自然无法生效。
检查noCursorEventListener内部用到的所有状态、props或外部变量，全部添加到依赖数组中：

const noCursorEventListener = React.useCallback((e) => {
  console.log('ncel');
  // 你的业务逻辑
}, [/* 这里写入所有依赖变量，比如state、props */]);

2. 把useCallback函数加入useEffect的依赖数组 #

添加监听的useEffect必须将noCursorEventListener列为依赖，这样当函数引用更新时，useEffect会自动执行清理逻辑，移除旧监听并绑定新的。如果漏加这个依赖，组件更新时旧的监听会一直挂在window上：

React.useEffect(() => {
  window.addEventListener('mousemove', noCursorEventListener);
  return () => {
    console.log('remove el');
    window.removeEventListener('mousemove', noCursorEventListener);
  };
}, [noCursorEventListener]);

3. 额外防御：绑定前先清理一次 #

如果还是存在重复绑定的问题，可以在添加新监听前先执行一次移除操作，避免意外残留旧监听：

React.useEffect(() => {
  window.removeEventListener('mousemove', noCursorEventListener);
  window.addEventListener('mousemove', noCursorEventListener);
  return () => {
    window.removeEventListener('mousemove', noCursorEventListener);
  };
}, [noCursorEventListener]);

4. 排查其他监听来源 #

如果以上操作后仍有'ncel'日志，可能是其他组件或全局代码也绑定了mousemove事件。可以在监听函数中打印调用栈定位来源：

const noCursorEventListener = React.useCallback((e) => {
  console.log('ncel');
  console.trace(); // 打印调用栈
}, [/* 依赖项 */]);

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