当前位置：首页 > React

react实现计时器

2026-01-27 18:17:28React

React 实现计时器的方法

使用 useState 和 useEffect 实现基础计时器

通过 React 的 useState 和 useEffect 可以轻松实现一个计时器功能。以下是一个简单的倒计时示例：

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

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const [isActive, setIsActive] = useState(false);

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

  return (
    <div>
      <div>计时: {seconds} 秒</div>
      <button onClick={() => setIsActive(!isActive)}>
        {isActive ? '暂停' : '开始'}
      </button>
      <button onClick={() => setSeconds(0)}>重置</button>
    </div>
  );
}

export default Timer;

实现倒计时功能

如果需要倒计时功能，可以调整初始状态和计时逻辑：

react实现计时器

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

function CountdownTimer() {
  const [timeLeft, setTimeLeft] = useState(60); // 60秒倒计时
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    let timer = null;
    if (isRunning && timeLeft > 0) {
      timer = setInterval(() => {
        setTimeLeft(prevTime => prevTime - 1);
      }, 1000);
    } else if (timeLeft === 0) {
      clearInterval(timer);
    }
    return () => clearInterval(timer);
  }, [isRunning, timeLeft]);

  return (
    <div>
      <div>剩余时间: {timeLeft} 秒</div>
      <button onClick={() => setIsRunning(!isRunning)}>
        {isRunning ? '暂停' : '开始'}
      </button>
      <button onClick={() => setTimeLeft(60)}>重置</button>
    </div>
  );
}

export default CountdownTimer;

使用自定义 Hook 封装计时器逻辑

为了复用计时器逻辑，可以将其封装为自定义 Hook：

react实现计时器

import { useState, useEffect } from 'react';

function useTimer(initialTime = 0, isCountdown = false) {
  const [time, setTime] = useState(initialTime);
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    let interval = null;
    if (isActive) {
      interval = setInterval(() => {
        setTime(prevTime => isCountdown ? prevTime - 1 : prevTime + 1);
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [isActive, isCountdown]);

  const start = () => setIsActive(true);
  const pause = () => setIsActive(false);
  const reset = () => {
    setIsActive(false);
    setTime(initialTime);
  };

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

export default useTimer;

然后在组件中使用这个自定义 Hook：

import React from 'react';
import useTimer from './useTimer';

function TimerComponent() {
  const { time, start, pause, reset } = useTimer(0, false);

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

export default TimerComponent;

格式化显示时间

为了更友好地显示时间，可以添加格式化函数：

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

// 在组件中使用
<div>{formatTime(time)}</div>