React 18中如何实现页面加载时仅执行一次目标函数

React 18严格模式下useEffect的开发环境双调用是官方设计的校验机制，不推荐直接关闭严格模式来规避问题，以下是可落地的无副作用方案，从逻辑层面保证统计函数仅执行一次，兼容开发、生产全环境。

方案1：useRef执行标记锁（优先推荐，适配页面级/全局级统计） #

利用useRef值在组件全生命周期持久化、不随重渲染/严格模式模拟卸载重置的特性，加一层执行判断，从根源阻断重复触发，没有额外侵入性。
适配场景：单页面路由级别的会话统计、全局挂载的统计组件。

import { useEffect, useRef } from 'react';
import mixpanel from 'mixpanel-browser';

// 可以单独抽成公共组件，在需要统计的页面/全局根节点挂载
function PageSessionTracker() {
  const hasInited = useRef(false);
  const sessionStart = useRef(0);

  useEffect(() => {
    // 已经执行过初始化直接拦截
    if (hasInited.current) return;
    hasInited.current = true;

    // 会话开始逻辑：记录时间、上报Mixpanel
    sessionStart.current = Date.now();
    mixpanel.track('session_start', {
      page_path: window.location.pathname,
      start_time: new Date().toISOString()
    });

    // 会话结束逻辑：计算时长、上报
    const trackEnd = () => {
      const duration = Date.now() - sessionStart.current;
      mixpanel.track('session_end', {
        page_path: window.location.pathname,
        end_time: new Date().toISOString(),
        duration_ms: duration
      });
    };

    // 覆盖所有会话结束场景：页面关闭、路由跳转、标签页切后台
    window.addEventListener('beforeunload', trackEnd);
    window.addEventListener('pagehide', trackEnd);
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') trackEnd();
    });

    return () => {
      window.removeEventListener('beforeunload', trackEnd);
      window.removeEventListener('pagehide', trackEnd);
      // 注意：不要在cleanup函数里重置hasInited标记，否则严格模式下第二次挂载仍会重复执行
      // 仅在路由真正离开、组件被永久销毁的场景下才需要重置标记
    };
  }, []);

  return null;
}

方案2：全局变量标记（仅适合全局一次性初始化场景） #

如果统计逻辑是整个应用生命周期只需要执行一次的全局逻辑（比如整个站点的首次会话初始化），可以直接把标记挂在window对象上，比ref更简单：

useEffect(() => {
  if (window.__mixpanelSessionInited) return;
  window.__mixpanelSessionInited = true;

  // 全局会话初始化、上报逻辑
}, [])

注意：路由级别的页面统计不要用这个方案，否则用户从其他页面切回当前页时，标记已经存在，不会重新触发当前页面的会话统计，会导致数据缺失。

统计准确性优化提示 #

• 单页应用不要只依赖组件卸载触发会话结束，建议搭配路由库的守卫钩子（比如react-router的useLocation监听变化），在路由跳转时主动触发上一个页面的结束上报，避免缓存页面导致的统计遗漏
• 如果不需要自定义特殊统计维度，直接开启Mixpanel自带的自动会话采集能力即可，官方已经处理了各种边界case，不需要手动实现时间计算逻辑
• 可以给会话加唯一ID做幂等校验，上报时带上相同ID的重复请求直接在前端拦截，进一步避免重复上报问题

注意：不要为了规避开发环境的双调用问题直接移除根组件的<StrictMode>，严格模式可以提前暴露副作用、闭包相关的潜在bug，直接关闭会丢失这层官方提供的校验能力。

内容的提问来源于stack exchange，提问作者Bon Andre Opina