React中区分浏览器关闭与页面刷新及关闭事件监听问题

你用的useEffect清理函数只会在组件卸载时触发——页面刷新时组件会先卸载再重新挂载，所以会执行；但浏览器关闭/标签页关闭时，浏览器会直接终止页面的JS进程，导致React的组件卸载逻辑没机会运行，所以清理函数不会执行。

要正确监听浏览器关闭/页面卸载，需要用浏览器原生的beforeunload和unload事件，以下是可行的实现：

import { useEffect } from 'react';

function YourComponent() {
  useEffect(() => {
    // 页面即将卸载时触发（刷新、关闭标签/浏览器都会触发）
    const handleBeforeUnload = (e) => {
      // 这里执行同步操作，比如保存用户临时数据
      // 如果需要弹出确认离开的提示框，设置returnValue（浏览器会用默认文案，自定义文案大多不生效）
      e.returnValue = ''; // 空字符串也会触发弹窗，不同浏览器表现略有差异
    };

    // 页面卸载时触发（优先用同步逻辑或sendBeacon）
    const handleUnload = () => {
      // 同步操作直接写在这里
      // 如果需要发送请求，用navigator.sendBeacon，浏览器会在后台完成发送
      const payload = JSON.stringify({ action: 'user_left' });
      navigator.sendBeacon('/api/record', payload, {
        type: 'application/json'
      });
    };

    // 添加事件监听
    window.addEventListener('beforeunload', handleBeforeUnload);
    window.addEventListener('unload', handleUnload);

    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
      window.removeEventListener('unload', handleUnload);
    };
  }, []);

  return <div>Your Component</div>;
}

关键注意事项 #

• beforeunload中尽量只做同步操作，异步操作可能被浏览器拦截；如果不需要弹窗提示，也可以不设置e.returnValue，直接执行同步逻辑。
• unload事件里的普通异步请求（比如fetch、axios）大概率不会完成，因为浏览器会快速终止进程，必须用navigator.sendBeacon——这个API是浏览器专门为页面卸载时的异步请求设计的，会在后台独立完成。
• 完全区分「页面刷新」和「浏览器关闭」非常困难，浏览器没有提供原生API支持，如果业务不需要严格区分，上面的方案就足够覆盖场景。

内容的提问来源于stack exchange，提问作者Demon Wizard