如何区分页面重载与重渲染？React函数组件识别页面重载方法

要区分页面重载（浏览器刷新）和组件内部重渲染/路由跳转导致的挂载，可以用以下两种可靠方法：

方法1：利用Performance API判断导航类型 #

performance API提供了页面导航的详细信息，能直接识别是否是页面重载：

import { useEffect } from 'react';

function YourComponent() {
  useEffect(() => {
    // 获取页面导航记录
    const navigationDetails = performance.getEntriesByType('navigation')[0];
    // 判断导航类型是否为重载
    if (navigationDetails?.type === 'reload') {
      console.log('页面发生了重载');
      // 这里执行页面重载需要的逻辑
    }
  }, []); // 空依赖数组确保只在组件挂载时执行一次

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

导航类型说明： #

• reload: 页面通过刷新按钮或location.reload()触发重载
• navigate: 页面首次加载或通过链接/路由跳转的正常导航
• back_forward: 通过浏览器前进/后退按钮触发的导航

方法2：使用sessionStorage标记（兼容旧浏览器） #

如果需要兼容不支持performance.getEntriesByType的旧浏览器，可以用sessionStorage标记区分页面重载和组件挂载：

import { useEffect } from 'react';

function YourComponent() {
  useEffect(() => {
    const reloadMarker = sessionStorage.getItem('pageReloadMarker');
    
    if (!reloadMarker) {
      // 没有标记，说明是页面首次加载或重载
      console.log('页面首次加载/重载');
    } else {
      // 存在标记，说明是路由跳转导致的组件重新挂载
      console.log('组件路由跳转挂载');
      sessionStorage.removeItem('pageReloadMarker');
    }

    // 组件正常卸载（路由跳转）时设置标记
    return () => {
      sessionStorage.setItem('pageReloadMarker', 'true');
    };
  }, []);

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

注意： #

这种方法无法区分首次加载和页面重载，只能区分是页面级别的加载（首次/重载）还是应用内部的组件挂载（路由跳转）。如果需要精准区分重载，优先用方法1。

为什么你的原代码会每次重渲染触发？ #

你提供的代码：

useEffect(() => {
  console.log("page rerender")
})

因为没有设置依赖数组，React会在每次组件重渲染时都执行这个useEffect。如果要只在组件挂载时执行（对应类组件的constructor执行时机），必须加上空依赖数组[]。

内容的提问来源于stack exchange，提问作者reed richards