React/Typescript下如何动态检测浏览器刷新？

针对你遇到的performance API状态无法重置、window.event已废弃的问题，以下是两种可靠的实现方案，覆盖F5快捷键和浏览器刷新按钮触发的场景：

方案1：结合 beforeunload 与 sessionStorage 精准区分刷新与路由跳转 #

核心思路是在页面即将卸载时标记状态，页面加载时校验标记，同时在路由跳转时清除标记，避免误判。

import { useEffect } from 'react';

// 自定义Hook封装刷新检测逻辑
const useDetectRefresh = (onRefresh: () => void) => {
  useEffect(() => {
    // 页面加载时检查是否由刷新触发
    const isRefresh = sessionStorage.getItem('isRefreshing');
    if (isRefresh) {
      onRefresh();
      sessionStorage.removeItem('isRefreshing');
    }

    // 监听页面卸载事件，标记即将执行刷新
    const handleBeforeUnload = () => {
      sessionStorage.setItem('isRefreshing', 'true');
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
      // 路由跳转时清除标记，防止把路由切换误判为刷新
      sessionStorage.removeItem('isRefreshing');
    };
  }, [onRefresh]);
};

// 在组件中使用
const App = () => {
  const handleRefresh = () => {
    localStorage.removeItem('products-list');
    console.log('检测到浏览器刷新');
  };

  useDetectRefresh(handleRefresh);

  return <div>你的应用内容</div>;
};

export default App;

方案2：监听F5快捷键 + beforeunload 覆盖全场景 #

针对用户手动按F5的场景直接触发操作，同时通过sessionStorage处理点击刷新按钮的情况，确保所有刷新场景都被覆盖。

import { useEffect } from 'react';

const useDetectRefresh = (onRefresh: () => void) => {
  useEffect(() => {
    let isF5Pressed = false;

    // 监听F5按键事件
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'F5') {
        isF5Pressed = true;
        onRefresh();
      }
    };

    // 监听页面卸载，处理点击刷新按钮的场景
    const handleBeforeUnload = () => {
      if (!isF5Pressed) {
        sessionStorage.setItem('refreshTriggered', 'true');
      }
    };

    // 页面加载时校验是否为刷新按钮触发的刷新
    const checkRefreshOnLoad = () => {
      const refreshTriggered = sessionStorage.getItem('refreshTriggered');
      if (refreshTriggered) {
        onRefresh();
        sessionStorage.removeItem('refreshTriggered');
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('beforeunload', handleBeforeUnload);
    checkRefreshOnLoad();

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('beforeunload', handleBeforeUnload);
      sessionStorage.removeItem('refreshTriggered');
    };
  }, [onRefresh]);
};

// 使用示例同方案1

补充：performance API方案的局限性说明 #

你提到的performance.getEntriesByType('navigation')方案，仅在页面首次加载时能准确检测刷新状态，多次刷新后可能因浏览器缓存或API状态未更新导致检测失效，因此不推荐作为核心方案，仅可用于简单场景的首次加载检测。

内容的提问来源于stack exchange，提问作者Rodrigo César Nunes