如何检测React中useState创建的页码是否在最近5秒内发生变化？

要检测useState创建的页码状态是否在最近5秒内变化，只需要额外维护一个记录上次页码更新时间戳的状态，再通过时间差判断即可，具体实现步骤如下：

1. 定义两个状态：一个存储当前页码page，另一个存储上次页码变化的时间戳lastPageChangeTime（初始值设为0，代表从未修改过）。
2. 使用useEffect监听page的变化，每次页码更新时，将当前时间戳存入lastPageChangeTime。
3. 通过计算当前时间与lastPageChangeTime的差值，判断是否小于5000毫秒（即5秒），以此得到状态是否近期变化的结果。

完整代码示例：

import { useState, useEffect } from 'react';

function PageNavigator() {
  const [page, setPage] = useState(1);
  const [lastPageChangeTime, setLastPageChangeTime] = useState(0);

  // 页码更新时同步记录时间戳
  useEffect(() => {
    setLastPageChangeTime(Date.now());
  }, [page]);

  // 核心判断逻辑
  const isPageUpdatedRecently = Date.now() - lastPageChangeTime < 5000;

  return (
    <div>
      <span>当前页码：{page}</span>
      <button onClick={() => setPage(prev => prev + 1)}>下一页</button>
      <button onClick={() => setPage(prev => prev - 1)} disabled={page === 1}>上一页</button>
      <p>{isPageUpdatedRecently ? "页码在最近5秒内有更新" : "页码超过5秒未更新"}</p>
    </div>
  );
}

补充说明 #

• 初始状态下，lastPageChangeTime为0，此时Date.now() - 0必然远大于5000（除非页面刚加载不足5秒），符合"未近期变化"的预期。
• 如果需要处理页面刚加载时的特殊场景（比如刚加载就认为是"近期变化"），可以将lastPageChangeTime的初始值设为Date.now()。

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