React倒计时组件刷新时先闪现旧数据再展示新数据问题

为啥会闪现旧值？ #

1. 现在的代码只在组件第一次渲染时算一次时间，没做实时更新；而且浏览器有页面快照缓存（bfcache），刷新时会先跳出之前的页面内容，再加载新计算的数值。
2. 初始渲染的时间是静态计算的，没在组件真正挂载后重新获取当前时间。

直接改代码就行 #

核心思路 #

• 用React状态存储倒计时数值，定时刷新保证实时性
• 阻止浏览器缓存页面快照，刷新直接加载最新内容
• 加加载状态，避免初始渲染时显示空值

修改后的完整代码：

import React, { useState, useEffect } from 'react';
import { intervalToDuration } from "date-fns";

export function App(props) {
  // 用状态存剩余时间，初始设为null
  const [remaining, setRemaining] = useState(null);
  const endDate = "2023-02-26T00:00:00.000Z";
  const end = new Date(endDate);

  // 封装计算剩余时间的函数
  const getRemainingTime = () => {
    const now = new Date();
    const duration = intervalToDuration({ start: now, end });
    setRemaining(duration);
  };

  useEffect(() => {
    // 组件一挂载就先算一次最新时间
    getRemainingTime();
    // 每秒更新一次倒计时，保证实时性
    const timer = setInterval(getRemainingTime, 1000);

    // 监听pageshow事件，防止浏览器用缓存的旧页面
    const handlePageShow = (e) => {
      if (e.persisted) {
        getRemainingTime();
      }
    };
    window.addEventListener('pageshow', handlePageShow);

    // 组件卸载时清掉定时器和监听，防止内存泄漏
    return () => {
      clearInterval(timer);
      window.removeEventListener('pageshow', handlePageShow);
    };
  }, []);

  // 还没计算完的时候显示加载，避免闪现undefined
  if (!remaining) {
    return <div className='App'>加载中...</div>;
  }

  return (
    <div className='App'>
      <h1>Time left until anniversary</h1>
      <h1>{remaining.months}</h1>
      <h1>{remaining.days}</h1>
      <h1>{remaining.hours}</h1>
      <h2>Countdown above!</h2>
    </div>
  );
}

关键修改点说明 #

• 用useState管理剩余时间，状态更新时组件自动重新渲染
• 新增定时器每秒更新一次，保证倒计时实时变化
• 监听pageshow事件，从浏览器缓存加载页面时立刻重新计算时间
• 添加加载状态，初始渲染不再显示空值或旧缓存内容

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