如何在React应用中追踪特定Props活跃组件的屏幕停留时长？

核心思路 #

通过自定义Hook封装计时器逻辑，结合React生命周期、页面焦点事件（visibilitychange）和路由变化监听，精准控制计时器的启动、暂停与停止，最终统计组件在屏幕活跃状态下的累计渲染时长。

自定义Hook实现（可复用） #

import { useState, useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';

export function useActiveDuration() {
  // 存储累计活跃时长（毫秒）
  const [activeDuration, setActiveDuration] = useState(0);
  // 计时器ID、上次计时开始时间、运行状态的引用（跨渲染保留）
  const timerRef = useRef(null);
  const startTimeRef = useRef(Date.now());
  const isRunningRef = useRef(false);
  // 监听路由变化，用于页面跳转时停止计时
  const location = useLocation();

  // 启动计时器：记录开始时间，启动定时更新
  const startTimer = () => {
    if (isRunningRef.current) return;
    startTimeRef.current = Date.now();
    isRunningRef.current = true;
    timerRef.current = setInterval(() => {
      if (isRunningRef.current) {
        const elapsed = Date.now() - startTimeRef.current;
        setActiveDuration(prev => prev + elapsed);
        startTimeRef.current = Date.now();
      }
    }, 1000); // 每秒更新一次，可根据精度需求调整间隔
  };

  // 暂停计时器：计算当前片段时长并累加，停止定时任务
  const pauseTimer = () => {
    if (!isRunningRef.current) return;
    const elapsed = Date.now() - startTimeRef.current;
    setActiveDuration(prev => prev + elapsed);
    isRunningRef.current = false;
    if (timerRef.current) {
      clearInterval(timerRef.current);
      timerRef.current = null;
    }
  };

  // 停止计时器：清空时长，重置状态
  const stopTimer = () => {
    pauseTimer();
    setActiveDuration(0);
  };

  // 组件挂载时启动计时，监听页面焦点变化
  useEffect(() => {
    startTimer();

    const handleVisibilityChange = () => {
      document.visibilityState === 'visible' ? startTimer() : pauseTimer();
    };
    window.addEventListener('visibilitychange', handleVisibilityChange);

    // 组件卸载时清理资源
    return () => {
      stopTimer();
      window.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, []);

  // 路由跳转时停止计时
  useEffect(() => {
    return () => stopTimer();
  }, [location.pathname]);

  return { activeDuration, startTimer, pauseTimer, stopTimer };
}

在目标组件中使用 #

针对带有特定Props的组件，直接引入Hook并使用，可在组件卸载时记录或上报时长：

import { useActiveDuration } from './useActiveDuration';

function TargetComponent({ specificProp }) {
  const { activeDuration } = useActiveDuration();

  // 组件卸载时输出/上报活跃时长
  useEffect(() => {
    return () => {
      console.log(`特定Props组件（props: ${specificProp}）活跃时长：${(activeDuration / 1000).toFixed(2)}秒`);
      // 此处可添加上报至后端、存储到本地等逻辑
    };
  }, [activeDuration, specificProp]);

  return (
    <div>
      <p>当前活跃时长：{(activeDuration / 1000).toFixed(2)}秒</p>
      {/* 组件业务内容 */}
    </div>
  );
}

关键细节说明 #

• 精度控制：代码中用1秒间隔更新时长，若需要更高精度（如100毫秒），可缩小setInterval的间隔，但需注意性能开销。
• 路由适配：若项目未使用react-router，可替换为监听window.popstate事件，或根据项目路由方案调整跳转监听逻辑。
• 灵活扩展：Hook返回的startTimer/pauseTimer方法可用于自定义场景（比如组件内部的状态切换需要暂停计时）。
• 内存安全：所有计时器和事件监听都会在组件卸载或路由跳转时清理，避免内存泄漏。

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