React中如何统计页面加载次数且避免无限循环？

你需要的「仅用户触发浏览器刷新时计数+1、不出现无限循环」的场景，useEffect直接传入**空依赖数组[]**即可。

空依赖数组的作用是让effect内的逻辑仅在组件首次挂载到DOM时执行1次，后续组件内state、props变化触发的重渲染都不会重复触发这段逻辑，从根源上避免无限循环问题。

注意事项 #

页面刷新会清空React运行时的内存数据，单纯用组件state存计数会导致每次刷新计数都重置为0，需要配合持久化存储（如localStorage）保存累计值。

可直接运行的示例代码 #

import { useEffect, useState, useRef } from 'react';

export default function PageViewCounter() {
  const [loadCount, setLoadCount] = useState(0);
  // 用于规避React18严格模式开发环境下双挂载导致的重复计数
  const hasExecutedCount = useRef(false);

  useEffect(() => {
    if (hasExecutedCount.current) return;
    hasExecutedCount.current = true;

    // 读取历史累计加载次数
    const historyCount = Number(window.localStorage.getItem('page_load_count') || 0);
    const currentCount = historyCount + 1;
    // 更新存储和页面展示状态
    window.localStorage.setItem('page_load_count', String(currentCount));
    setLoadCount(currentCount);
  }, []); // 空依赖，仅组件首次挂载时执行，匹配页面刷新/首次打开场景

  return (
    <div>
      页面累计刷新/加载次数：<strong>{loadCount}</strong>
    </div>
  );
}

逻辑说明 #

• 点击浏览器刷新按钮时，整个网页会重新加载，React应用会从头启动，组件会走完整的首次挂载流程，刚好触发空依赖的effect执行，完成计数+1
• 不要把effect内部更新的state（比如示例里的loadCount）加入依赖数组，否则会出现「effect执行→更新state→组件重渲染→依赖变化触发effect再次执行」的无限循环
• 示例里的useRef标记仅用于兼容React18+严格模式的开发环境双挂载校验，这个双挂载行为只在开发环境出现，生产环境不会触发，不影响线上逻辑
• 如果需要精准识别「点击刷新按钮触发的加载」，排除首次打开、前进后退按钮触发的加载，可以在effect内加一层判断：if (window.performance.navigation.type === 1) 再执行计数逻辑即可。

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