咨询React函数组件实现倒计时定时器的最佳实践方案

• 完全不需要为实现定时器改用类组件：React函数组件配合内置Hooks可实现和类组件完全等价的状态驱动定时器逻辑，写法更简洁、可维护性更强。
• 不存在强制要求使用的定时器第三方库：当前需求使用浏览器原生setInterval配合状态管理就是标准实现方式，只有需要复杂计时能力时才需要引入额外工具。

• 随机记忆文本未做状态持久：当前const numbers = makeid(7)会在每次组件重渲染时重新生成随机值，倒计时过程中任何状态变化都会导致展示内容刷新，无法作为稳定的记忆素材。
• 定时器逻辑完全缺失：点击处理函数仅设置了初始时间值，没有创建定时递减任务，也没有时间归0后的界面状态切换逻辑。
• 界面渲染无联动：输入框在页面加载时就始终展示，没有和倒计时结束状态绑定；随机数区域也没有在倒计时结束后自动隐藏。
• 输入框未绑定受控状态：所有输入项都是无值的非受控状态，用户输入内容无法被组件捕获。

必要的状态调整 #

补充对应状态替换原有零散的逻辑：

• memoryText：仅在组件首次挂载时生成一次的固定随机记忆文本，避免重渲染时刷新
• isCounting：标记当前是否处于倒计时阶段，控制不同功能区域的显隐
• countdownValue：替换原有的time状态，存储当前剩余倒计时秒数
• timerRef：存储定时器实例引用，避免闭包捕获旧值，同时方便组件卸载时清除内存泄漏

核心实现代码 #

import { useEffect, useRef, useState } from "react";
import { Sidebar_Users } from "components/dashboard/Sidebar/Sidebar_Users";
import BottomNavigation from "../../components/dashboard/BottomNavigation/BottomNavigation";

// 保留原有makeid函数
function makeid(length) {
  let result = '';
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  const charactersLength = characters.length;
  for (let i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}

function Baseline(props) {
  const [wStatus, setWStatus] = useState("completed");
  // 新增状态
  const [memoryText] = useState(() => makeid(7));
  const [isCounting, setIsCounting] = useState(false);
  const [countdownValue, setCountdownValue] = useState(5);
  const timerRef = useRef(null);

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

  const handleClick = (e) => {
    e.preventDefault();
    // 重置计时状态
    setIsCounting(true);
    setCountdownValue(5);
    // 启动定时任务
    timerRef.current = setInterval(() => {
      setCountdownValue(prev => {
        // 倒计时归0时，清除定时器并切换界面状态
        if (prev <= 1) {
          clearInterval(timerRef.current);
          setIsCounting(false);
          return 0;
        }
        return prev - 1;
      })
    }, 1000)
  }

  return (
    <>
      <Sidebar_Users dashboard={"Progress Map"}>
        <div>Working Memory Test</div>
        <div>You are about to do a small short term memory test.  A few letters will flash
on your computer monitor for 3 seconds.  Your job is to write down as many
letters as you can remember</div>

        {/* 随机记忆文本区域：仅倒计时阶段展示 */}
        {isCounting && (
          <div className="bg-white rounded-lg shadow p-4 items-center justify-center">{memoryText}</div>
        )}

        {/* 倒计时数字区域 */}
        <div className="bg-white rounded-lg shadow p-4 items-center justify-center">{isCounting ? countdownValue : ""}</div>

        {/* 输入框区域：仅倒计时结束后展示 */}
        {!isCounting && (
          <div className="bg-white rounded-lg shadow p-4 items-center justify-center">
            <div className="font-thin px-2 pb-4 text-lg">Enter your pin code</div>
            <div className="flex">
              <div>
                <input className="h-16 w-12 border mx-2 rounded-lg flex items-center text-center font-thin text-3xl" maxlength="1" max="9" min="0" inputmode="decimal"/>
                <input className="h-16 w-12 border mx-2 rounded-lg flex items-center text-center font-thin text-3xl" maxlength="1" max="9" min="0" inputmode="decimal"/>
                <input className="h-16 w-12 border mx-2 rounded-lg flex items-center text-center font-thin text-3xl" maxlength="1" max="9" min="0" inputmode="decimal"/>
                <input className="h-16 w-12 border mx-2 rounded-lg flex items-center text-center font-thin text-3xl" maxlength="1" max="9" min="0" inputmode="decimal"/>
                <input className="h-16 w-12 border mx-2 rounded-lg flex items-center text-center font-thin text-3xl" maxlength="1" max="9" min="0" inputmode="decimal"/>
              </div>
            </div>
          </div>
        )}

        {/* 原有按钮结构保留 */}
        <button onClick={handleClick} className="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 bg-gradient-to-r from-pink-500 to-orange-500 hover:from-teal-600 hover:to-green-300 text-white font-semibold rounded-md">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="-ml-1 mr-2 h-5 w-5"
          >
            <circle cx="12" cy="12" r="10"></circle>
            <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon>
          </svg>
          <span>Here we go</span>
        </button>
      </Sidebar_Users>
      <BottomNavigation />
    </>
  )
}

export default Baseline;

• 本场景的基础倒计时、界面显隐切换逻辑完全不需要引入第三方依赖，原生实现的可控性、性能都更优。
• 只有当需要实现倒计时暂停、进度持久化、跨标签页计时同步、后台运行计时等复杂能力时，才需要根据实际需求选用对应工具，无强制使用要求。

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