当前位置：首页 > React

react实现倒计时

2026-01-27 12:54:57React

使用 `useState` 和 `useEffect` 实现基础倒计时

以下是一个简单的 React 倒计时组件，从指定时间（如 60 秒）开始倒数：

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

function Countdown() {
  const [count, setCount] = useState(60);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => (prevCount > 0 ? prevCount - 1 : 0));
    }, 1000);

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

  return <div>剩余时间: {count}秒</div>;
}

支持自定义初始时间和格式

扩展功能，允许传入初始时间并格式化显示（如 MM:SS）：

function Countdown({ initialSeconds = 60 }) {
  const [seconds, setSeconds] = useState(initialSeconds);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => (prev > 0 ? prev - 1 : 0));
    }, 1000);

    return () => clearInterval(interval);
  }, [initialSeconds]);

  const formatTime = (sec) => {
    const mins = Math.floor(sec / 60).toString().padStart(2, '0');
    const secs = (sec % 60).toString().padStart(2, '0');
    return `${mins}:${secs}`;
  };

  return <div>{formatTime(seconds)}</div>;
}

添加暂停和继续功能

通过状态控制实现倒计时的暂停与继续：

function CountdownWithControls() {
  const [seconds, setSeconds] = useState(60);
  const [isActive, setIsActive] = useState(true);

  useEffect(() => {
    let interval = null;
    if (isActive && seconds > 0) {
      interval = setInterval(() => {
        setSeconds(prev => prev - 1);
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [isActive, seconds]);

  const toggle = () => setIsActive(!isActive);
  const reset = () => {
    setIsActive(false);
    setSeconds(60);
  };

  return (
    <div>
      <div>剩余时间: {seconds}s</div>
      <button onClick={toggle}>{isActive ? '暂停' : '继续'}</button>
      <button onClick={reset}>重置</button>
    </div>
  );
}

使用自定义 Hook 复用逻辑

将倒计时逻辑抽象为自定义 Hook useCountdown：

function useCountdown(initialSeconds) {
  const [seconds, setSeconds] = useState(initialSeconds);
  const [isRunning, setIsRunning] = useState(true);

  useEffect(() => {
    if (!isRunning || seconds <= 0) return;

    const timer = setInterval(() => {
      setSeconds(prev => prev - 1);
    }, 1000);

    return () => clearInterval(timer);
  }, [isRunning, seconds]);

  const start = () => setIsRunning(true);
  const pause = () => setIsRunning(false);
  const reset = (newSeconds = initialSeconds) => {
    pause();
    setSeconds(newSeconds);
  };

  return { seconds, start, pause, reset };
}

// 使用示例
function CountdownComponent() {
  const { seconds, start, pause, reset } = useCountdown(30);

  return (
    <div>
      <div>{seconds}秒</div>
      <button onClick={start}>开始</button>
      <button onClick={pause}>暂停</button>
      <button onClick={() => reset()}>重置</button>
    </div>
  );
}