React Hooks更新异常：startTime状态首次点击未更新求助

嘿，别担心代码杂乱的问题——大家刚开始捣鼓React组件的时候，谁没踩过Hook的异步更新坑呢！我来帮你拆解下这个startTime状态首次点击不生效的问题：

问题原因 #

React的useState状态更新是异步批量处理的，当你在startTimer里调用setStartTime(Date.now())后，紧接着去使用startTime变量时，它依然是初始值0——因为状态更新不会立刻同步到变量中。所以第一次点击启动按钮时，你传给timer函数的startTime是旧值，计时器自然没法正确计算时间差；第二次点击时，上一次的状态更新已经完成，这时候startTime才是正确的时间戳，所以功能就正常了。

修复方案 #

最适合这个场景的解决办法是用useRef代替useState来存储startTime——因为useRef的current属性是同步更新的，不需要等待React重新渲染就能拿到最新值，完美适配计时器这种需要立即获取更新值的场景。

修改后的完整代码 #

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

function Stopwatch() {
  const [milliSecondsHook, setMilliSecondsHook] = useState(0);
  const [secondsHook, setSecondsHook] = useState(0);
  const [minutesHook, setMinutesHook] = useState(0);
  const [hoursHook, setHoursHook] = useState(0);
  const [running, setRunning] = useState(2);
  const [id, setId] = useState(0);
  const [split, setSplit] = useState(0);
  const startTimeRef = useRef(0); // 用ref替代state存储启动时间

  // 简化toggleRunning逻辑，移除重复代码
  function toggleRunning() {
    if (running === 1) {
      setRunning(0);
    } else if (running === 0 || running === 2) {
      setRunning(1);
    }
  }

  function pauseTimer(id) {
    startTimer();
  }

  const milliSeconds = (diff) => diff % 1000 / 10 // milliseconds
  const seconds = (diff) => (diff / 1000) % 60; // seconds
  const minutes =(diff) => (diff / 1000 / 60) % 60; // minutes
  const hours = (diff) => diff / 1000 / 60 / 60; // hours

  function timer(startTime) {
    const intervalId = setInterval(function() {
      const currentTime = Date.now();
      const diff = currentTime - startTime;
      setMilliSecondsHook(Math.trunc(milliSeconds(diff)));
      setSecondsHook(Math.trunc(seconds(diff)));
      setMinutesHook(Math.trunc(minutes(diff)));
      setHoursHook(Math.trunc(hours(diff)));
    }, 50);
    return intervalId;
  }

  function startTimer() {
    console.log(running);
    if (running === 2) {
      startTimeRef.current = Date.now(); // 同步更新ref的值
    }
    toggleRunning();
    if (running === 0 || running === 2) {
      clearInterval(id);
      setId(timer(startTimeRef.current)); // 传入ref的最新值
    } else if (running === 1) {
      clearInterval(id);
    }
  }

  function splitTime() {
    // 这里可以实现拆分时间的逻辑
  }

  if(running === 0 || running === 2) {
    return (
      <div>
        <div>{hoursHook}:{minutesHook}:{secondsHook}:{milliSecondsHook}</div>
        <button onClick={startTimer}>start</button>
        <button onClick={splitTime}>split</button>
      </div>
    )
  } else if(running === 1) {
    return (
      <div>
        <div>{hoursHook}:{minutesHook}:{secondsHook}:{milliSecondsHook}</div>
        <button onClick={pauseTimer}>pause</button>
        <button onClick={splitTime}>split</button>
      </div>
    )
  } else {
    return (
      <div>
        <div>{hoursHook}:{minutesHook}:{secondsHook}:{milliSecondsHook} wrong</div>
        <button onClick={startTimer}>start</button>
        <button onClick={splitTime}>split</button>
      </div>
    )
  }
}
export default Stopwatch;

额外优化点 #

1. 简化了toggleRunning函数的逻辑，移除了重复的状态更新代码
2. 将时间显示格式调整为更符合习惯的时:分:秒:毫秒
3. 把input标签换成了语义化的button标签，更适合按钮交互场景

补充说明 #

如果之后需要处理暂停后继续计时的逻辑，只需要在暂停时记录当前的时间差，继续时用当前时间减去累计的时间差即可——用ref依然能很好地适配这种场景，因为它能随时获取最新的存储值。

没关系，首次提问完全没问题，遇到问题就是学习的好机会，加油！

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