React中如何每秒调用函数实现秒表时间更新？

要让CheckTimeUpdation每秒运行一次，你需要用setInterval配合React的useEffect管理定时器生命周期，同时修正原代码中变量持久化的问题，以下是具体实现：

核心问题修正与方案 #

1. 变量持久化：原代码中startsec是普通变量，组件重新渲染时会被重置，改用useRef保存持久化值。
2. 定时器管理：用setInterval触发定时任务，通过useEffect在组件卸载时清理定时器，避免内存泄漏；点击启动按钮时先清理旧定时器，防止重复启动。
3. 状态更新逻辑：完善UpdateTime函数，正确更新秒数状态。

修改后的完整代码 #

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

// 假设Clock组件实现如下
function Clock({ timerSeconds }) {
  return <div>{timerSeconds} 秒</div>;
}

function App() {
  const [time, updateTime] = useState(0);
  // 用useRef保存开始时间和定时器ID，避免组件重渲染时重置
  const startsecRef = useRef(0);
  const intervalRef = useRef(null);

  // 更新时间状态
  const UpdateTime = (elapsed) => {
    updateTime(elapsed);
  };

  // 每秒检查并更新秒数
  const CheckTimeUpdation = () => {
    const currentsec = Math.floor(Date.now() / 1000.0);
    if (currentsec > startsecRef.current) {
      UpdateTime(currentsec - startsecRef.current);
    }
  };

  // 启动秒表逻辑
  const GetStartTime = () => {
    // 清理之前的定时器，防止重复触发
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
    }
    // 记录当前开始时间（秒级）
    startsecRef.current = Math.floor(Date.now() / 1000.0);
    // 启动每秒执行的定时任务
    intervalRef.current = setInterval(CheckTimeUpdation, 1000);
    // 重置显示时间为0
    updateTime(0);
  };

  // 组件卸载时清理定时器，避免内存泄漏
  useEffect(() => {
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, []);

  return (
    <div className="App">
      <Clock timerSeconds={time} />
      <div>
        <button onClick={GetStartTime}>启动秒表</button>
      </div>
    </div>
  );
}

export default App;

关键说明 #

• useRef的作用：startsecRef和intervalRef用来保存组件生命周期内不会被重置的值，不会因为组件重渲染而丢失数据，也不会触发额外的重渲染。
• setInterval定时：setInterval(CheckTimeUpdation, 1000)会让目标函数每隔1000毫秒（1秒）执行一次，实现秒数的实时更新。
• 定时器清理：组件卸载时通过useEffect的返回函数清理定时器，点击启动按钮时先清理旧定时器，避免多个定时器同时运行导致时间更新混乱。

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