React函数组件中页面关闭时onLogOut仅触发一次的解决方案

你遇到的问题核心是两点：函数组件重复渲染时可能多次绑定beforeunload事件，加上部分浏览器的beforeunload回调会被触发多次，导致onLogOut重复执行。以下是确保仅触发一次的实现方案：

核心解决思路 #

• 用useRef维护一个执行标记，避免onLogOut被重复调用
• 通过useEffect绑定事件并在组件卸载时移除监听，防止重复绑定
• 遵循浏览器beforeunload规范，避免不必要的默认行为拦截

实现代码 #

import { useEffect, useRef } from 'react';

function YourComponent() {
  const hasExecutedLogOut = useRef(false);
  
  const onLogOut = () => {
    // 你的登出业务逻辑
    console.log('执行用户登出操作');
  };

  useEffect(() => {
    const handleBeforeUnload = (ev) => {
      // 仅在未执行过登出时调用
      if (!hasExecutedLogOut.current) {
        onLogOut();
        hasExecutedLogOut.current = true;
      }
      // 触发浏览器默认关闭确认提示（部分浏览器已不支持自定义文本）
      ev.returnValue = '';
      return '';
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    // 组件卸载时清理事件监听，并重置标记
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
      hasExecutedLogOut.current = false;
    };
  }, [onLogOut]);

  return <div>你的组件内容</div>;
}

关键细节说明 #

• useRef的标记不会随组件渲染重置，能稳定记录登出操作的执行状态
• useEffect的依赖数组加入onLogOut，确保登出函数更新时重新绑定事件
• 组件卸载时移除监听，避免内存泄漏和后续组件实例的事件冲突
• 现代浏览器大多不再支持自定义关闭提示文本，设置空字符串即可触发系统默认提示

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