如何优化点击关闭弹窗的事件监听器，解决现有代码问题？

针对你提出的三个问题，可以通过以下思路和代码彻底解决：

核心优化思路 #

• 避免重复绑定监听器：只在组件挂载时添加一次全局点击监听器，而非每次弹窗状态变化都执行绑定逻辑。
• 按需触发关闭逻辑：监听器内部判断弹窗是否处于显示状态，且点击区域在弹窗外部时才执行关闭，无需在弹窗关闭时移除监听器。
• 减少useEffect触发次数：通过useRef跟踪弹窗最新状态，让全局监听器的useEffect仅执行一次，避免无效触发。

优化后的完整代码 #

function App() {
  const [isPopup, setPopup] = useState(false);
  const popupRef = useRef(null);
  // 用ref跟踪弹窗的最新状态，避免闭包陷阱
  const isPopupRef = useRef(isPopup);

  // 同步状态到ref，确保监听器能拿到最新的弹窗状态
  useEffect(() => {
    isPopupRef.current = isPopup;
  }, [isPopup]);

  // 仅在组件挂载时绑定一次全局点击监听器
  useEffect(() => {
    const handleGlobalClick = (e) => {
      // 只有弹窗显示，且点击的区域不在弹窗内部时，才关闭弹窗
      if (isPopupRef.current && popupRef.current && !popupRef.current.contains(e.target)) {
        setPopup(false);
      }
    };

    window.addEventListener('click', handleGlobalClick);
    
    // 组件卸载时移除监听器，避免内存泄漏
    return () => window.removeEventListener('click', handleGlobalClick);
  }, []);

  return (
    <div>
      <button onClick={() => setPopup(true)}>打开弹窗</button>
      {isPopup && (
        <div 
          ref={popupRef} 
          onClick={(e) => e.stopPropagation()}
          style={{ padding: '20px', border: '1px solid #ccc', margin: '10px 0' }}
        >
          这是弹窗内容，点击内部不会关闭弹窗
          <p>点击弹窗外部任意区域即可关闭</p>
        </div>
      )}
    </div>
  );
}

对应问题的解决说明 #

1. 解决“每次弹窗显示都添加监听器”的低效问题：全局点击监听器仅在组件挂载时绑定一次，后续不会随弹窗状态变化重复绑定，代码更简洁高效。
2. 解决“仅在组件卸载时移除监听器”的问题：监听器长期存在但仅在符合条件时触发关闭逻辑，无需在弹窗关闭时解绑，组件卸载时统一移除即可，避免不必要的解绑/绑定操作。
3. 解决“每次状态变化都触发useEffect”的低效问题：全局监听器的useEffect依赖为空数组，仅执行一次；同步状态的useEffect虽随状态变化触发，但逻辑极简，可忽略性能影响。

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