React中使用useRef实现点击启动的倒计时按钮（避免重渲染）

你的代码存在几个关键问题，导致倒计时无法正常工作：

1. 组件挂载即启动定时器：初始的useEffect依赖为空数组，组件一加载就会启动定时器，不符合点击开始才启动的需求。
2. 点击逻辑完全颠倒：handleClick里的条件判断搞反了，按钮文本也和状态不匹配——start为true时应该显示"暂停/取消"，而不是"Start"；点击逻辑里，当start为false时才应该启动定时器，而不是反过来。
3. 缺少倒计时终止逻辑：当secondsLeft到0时，没有自动停止定时器并重置状态。
4. intervalRef声明错误：应该用const声明，useRef返回的是稳定的引用，不需要用let。

修复后的完整代码 #

const { useState, useRef, useEffect } = React;

const Timer = () => {
  const [secondsLeft, setSecondsLeft] = useState(10);
  const [isRunning, setIsRunning] = useState(false); // 重命名状态，语义更清晰
  const intervalRef = useRef(null); // 用const声明，初始化为null

  const decreaseSeconds = () => {
    setSecondsLeft(prev => {
      if (prev <= 1) {
        // 倒计时到0时自动停止定时器
        clearInterval(intervalRef.current);
        setIsRunning(false);
        return 0;
      }
      return prev - 1;
    });
  };

  // 绑定isRunning状态，自动处理定时器的启动与清理
  useEffect(() => {
    if (isRunning) {
      intervalRef.current = setInterval(decreaseSeconds, 1000);
    }
    // 组件卸载或运行状态变化时，自动清理定时器
    return () => clearInterval(intervalRef.current);
  }, [isRunning]);

  const handleToggle = () => {
    if (isRunning) {
      // 当前正在运行，点击则停止
      setIsRunning(false);
    } else {
      // 当前未运行，点击则启动，同时重置倒计时（可根据需求移除重置逻辑）
      setSecondsLeft(10);
      setIsRunning(true);
    }
  };

  return (
    <div>
      <div>{secondsLeft}</div>
      <button onClick={handleToggle}>
        {isRunning ? "暂停" : "开始"}
      </button>
    </div>
  );
}

ReactDOM.render(
  <Timer />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

关键修改说明 #

• 状态语义优化：把start改为isRunning，避免字面意思混淆，逻辑更直观。
• 定时器自动管理：通过useEffect监听isRunning状态，状态切换时自动启动/清理定时器，不需要手动重复调用setInterval和clearInterval。
• 倒计时终止处理：在decreaseSeconds中判断剩余秒数，到0时自动停止定时器并重置运行状态。
• 点击逻辑修正：按钮点击时根据当前运行状态切换操作，按钮文本与状态完全匹配，符合用户预期。
• 引用声明规范：用const声明intervalRef，确保引用稳定，符合React Hooks的使用规范。

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