当前位置：首页 > React

react如何判断是刷新页面的

2026-01-26 08:58:43React

判断页面刷新的方法

在React中，可以通过监听浏览器的beforeunload事件或检查performance.navigation属性来判断页面是否被刷新。以下是几种常见的方法：

使用`beforeunload`事件

通过监听beforeunload事件，可以在页面刷新或关闭前执行特定操作。需要注意的是，这种方式不能直接区分刷新和关闭，但可以用于执行清理操作。

useEffect(() => {
  const handleBeforeUnload = () => {
    console.log('页面即将刷新或关闭');
  };

  window.addEventListener('beforeunload', handleBeforeUnload);

  return () => {
    window.removeEventListener('beforeunload', handleBeforeUnload);
  };
}, []);

使用`performance.navigation`属性

performance.navigation.type可以用于判断页面是如何加载的。不过，这种方式在现代浏览器中已被废弃，推荐使用PerformanceNavigationTiming。

if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {
  console.log('页面是通过刷新加载的');
}

使用`PerformanceNavigationTiming`

PerformanceNavigationTiming提供了更详细的页面加载信息，可以通过type属性判断是否为刷新。

const navigationEntries = performance.getEntriesByType('navigation');
if (navigationEntries.length > 0 && navigationEntries[0].type === 'reload') {
  console.log('页面是通过刷新加载的');
}

使用`localStorage`或`sessionStorage`

可以通过存储时间戳的方式判断页面是否刷新。在页面加载时检查存储的时间戳，如果时间戳存在且未过期，则可以认为是刷新。

useEffect(() => {
  const lastLoadTime = localStorage.getItem('lastLoadTime');
  const currentTime = new Date().getTime();

  if (lastLoadTime && currentTime - lastLoadTime < 1000) {
    console.log('页面是通过刷新加载的');
  }

  localStorage.setItem('lastLoadTime', currentTime.toString());
}, []);

使用路由状态

如果应用使用了路由（如React Router），可以通过检查路由状态或传递参数的方式判断是否为刷新。

import { useLocation } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();

  useEffect(() => {
    if (location.state?.isReload) {
      console.log('页面是通过刷新加载的');
    }
  }, [location.state]);

  return null;
}