如何消除React倒计时计时器的初始加载延迟？

你的问题根源在于组件初始化时所有状态值都是0，而useEffect中的定时器要等待1秒才会第一次执行getTime计算倒计时，所以会出现短暂的延迟显示。下面是两种直接有效的解决办法：

方法一：挂载时立即执行一次倒计时计算 #

修改useEffect，在创建定时器之前先手动调用一次getTime，让组件挂载瞬间就能拿到正确的倒计时数值，之后再靠定时器每秒更新：

function Timer() {
  const [days, setDays] = useState(0);
  const [hours, setHours] = useState(0);
  const [minutes, setMinutes] = useState(0);
  const [seconds, setSeconds] = useState(0);

  const deadline = "February, 17, 2023";

  const getTime = () => {
    const time = Date.parse(deadline) - Date.now();

    setDays(Math.floor(time / (1000 * 60 * 60 * 24)));
    setHours(Math.floor((time / (1000 * 60 * 60)) % 24));
    setMinutes(Math.floor((time / 1000 / 60) % 60));
    setSeconds(Math.floor((time / 1000) % 60));
  };

  useEffect(() => {
    // 立即执行一次，获取初始倒计时值
    getTime();
    const interval = setInterval(getTime, 1000);

    return () => clearInterval(interval);
  }, []);

  // 渲染逻辑...
}

方法二：初始化状态时直接计算初始值 #

提前编写计算初始倒计时的逻辑，把结果作为状态的初始值，让组件一开始渲染就显示正确数值，再配合定时器维持后续更新：

function Timer() {
  const deadline = "February, 17, 2023";

  // 计算初始倒计时数值
  const getInitialTime = () => {
    const time = Date.parse(deadline) - Date.now();
    return {
      days: Math.floor(time / (1000 * 60 * 60 * 24)),
      hours: Math.floor((time / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((time / 1000 / 60) % 60),
      seconds: Math.floor((time / 1000) % 60)
    };
  };

  const initialTime = getInitialTime();
  const [days, setDays] = useState(initialTime.days);
  const [hours, setHours] = useState(initialTime.hours);
  const [minutes, setMinutes] = useState(initialTime.minutes);
  const [seconds, setSeconds] = useState(initialTime.seconds);

  const getTime = () => {
    const time = Date.parse(deadline) - Date.now();

    setDays(Math.floor(time / (1000 * 60 * 60 * 24)));
    setHours(Math.floor((time / (1000 * 60 * 60)) % 24));
    setMinutes(Math.floor((time / 1000 / 60) % 60));
    setSeconds(Math.floor((time / 1000) % 60));
  };

  useEffect(() => {
    const interval = setInterval(getTime, 1000);

    return () => clearInterval(interval);
  }, []);

  // 渲染逻辑...
}

额外提醒：如果deadline是动态变化的值，记得把它加入useEffect的依赖数组中，避免闭包问题导致倒计时数值不更新。

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