React状态变更时无法移除事件监听器问题求助

核心问题 #

1. 函数引用不匹配：你每次添加/移除监听器时，都用了(event) => DeviceOrientation(event)这类匿名箭头函数。每次创建的箭头函数都是全新的实例，浏览器找不到对应的监听器，自然无法完成移除操作。
2. 逻辑判断错误：else分支里的事件类型完全搞反了——当noHover.matches为true（无hover能力的设备，比如移动端），你却在移除mousemove事件，实际应该移除的是deviceorientation；反之亦然。
3. 清理函数无效：返回的清理函数同样使用了匿名箭头函数，和添加时的函数引用不一致，无法完成正确清理。

修正后的代码 #

useEffect(() => {
  const noHover = window.matchMedia("(hover: none)");
  
  // 直接复用原函数引用，不要用箭头函数包裹
  const handleDeviceOrientation = DeviceOrientation;
  const handleMouseMove = MouseOrientation;

  if (!isOpen) {
    if (noHover.matches) {
      console.log('添加deviceorientation监听器');
      window.addEventListener('deviceorientation', handleDeviceOrientation, true);
    } else {
      console.log('添加mousemove监听器');
      window.addEventListener('mousemove', handleMouseMove, true);
    }
  } else {
    if (noHover.matches) {
      console.log('移除deviceorientation监听器');
      window.removeEventListener('deviceorientation', handleDeviceOrientation, true);
    } else {
      console.log('移除mousemove监听器');
      window.removeEventListener('mousemove', handleMouseMove, true);
    }
  }

  // 清理函数使用和添加时一致的引用
  return () => {
    window.removeEventListener('mousemove', handleMouseMove, true);
    window.removeEventListener('deviceorientation', handleDeviceOrientation, true);
  };
}, [isOpen]);

关键说明 #

• 复用函数引用：handleDeviceOrientation直接指向DeviceOrientation的引用，添加和移除时用同一个引用，浏览器才能精准匹配到对应的监听器。
• 修正逻辑对应关系：else分支移除的事件类型和if(!isOpen)分支添加的类型严格对应，确保移除的是当前设备实际使用的事件。
• 统一清理逻辑：组件卸载或isOpen状态变更时，清理函数会用正确的引用移除所有可能添加的监听器，避免内存泄漏。

如果你的DeviceOrientation和MouseOrientation是组件内部定义的函数（比如用useCallback包裹的），记得把它们加入useEffect的依赖数组，避免因函数重新创建导致的引用变化。

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