React Hook倒计时：简单易用的计时器组件

2023-09-12 09:02:56

概述

计时器在我们的日常生活中有着广泛的应用，例如短信验证码的倒计时、游戏中的倒计时等。在React中，我们可以使用Hook来轻松实现倒计时功能。在这个指南中，我们将创建一个可用于各种情况的计时器组件，并详细讲解其使用方法。

创建计时器组件

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

const CountdownTimer = ({ initialTime, onTimeout }) => {
  const [timeLeft, setTimeLeft] = useState(initialTime);

  useEffect(() => {
    if (!timeLeft) {
      onTimeout();
      return;
    }

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

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

  return (
    <div>
      {timeLeft}
    </div>
  );
};

export default CountdownTimer;

使用计时器组件

引入组件并将其添加到您的React项目中。

import CountdownTimer from './CountdownTimer';

const App = () => {
  return (
    <div>
      <CountdownTimer initialTime={10} onTimeout={() => console.log('Time out!')}/>
    </div>
  );
};

export default App;