React类组件转函数组件正确实现及计时器案例排错

你的转换写法存在逻辑错误，无法复现原类组件效果的核心原因是Hooks闭包陷阱：

• 你给useEffect传入空依赖数组[]，意味着定时器回调仅在组件首次挂载时创建，回调内部捕获的state永远是初始值{minutes:2, seconds:0}，无法获取后续更新的状态值
• 你虽然使用了函数式setState，但计算新状态时没有使用回调参数携带的最新前置状态，反而引用了外层闭包中的旧状态，等于函数式更新完全没有发挥作用
• 原类组件中读取this.state始终能拿到最新值，是因为类组件state挂载在组件实例上属于可变引用，和函数组件每次渲染独立闭包捕获值的逻辑有本质区别，直接照搬类组件的状态读取逻辑必然出问题

不需要重构整体结构，只需要把定时器内的状态判断、更新逻辑全部放到setState的回调中，基于最新的前置状态计算即可：

import React, { useEffect, useState } from "react";

export default function Timer() {
  const [state, setState] = useState({
    minutes: 2,
    seconds: 0
  });

  useEffect(() => {
    const myInterval = setInterval(() => {
      setState(prevValue => {
        const { seconds, minutes } = prevValue;
        if (seconds > 0) {
          return { ...prevValue, seconds: seconds - 1 };
        }
        if (minutes === 0) {
          clearInterval(myInterval);
          return prevValue;
        }
        return { ...prevValue, minutes: minutes - 1, seconds: 59 };
      });
    }, 1000);

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

  return (
    <div>
      {state.minutes === 0 && state.seconds === 0 ? (
        <h1>Busted!</h1>
      ) : (
        <h1>
          Time Remaining: {state.minutes}:{state.seconds < 10 ? `0${state.seconds}` : state.seconds}
        </h1>
      )}
    </div>
  );
}

• 生命周期映射：componentDidMount对应空依赖useEffect的执行时机，componentWillUnmount对应该effect返回的清理函数，componentDidUpdate对应携带相关依赖项的useEffect
• 状态读取差异：不要在仅执行一次的effect（空依赖）中直接读取state/props，这类场景下优先使用函数式setState获取最新前置状态，避免闭包捕获旧值
• 状态定义建议：如果状态值之间没有强关联，优先拆分为多个独立的useState（比如单独存minutes和seconds），比维护一个对象类型的state更简洁，也能减少手动合并属性的冗余代码

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