React Hooks打造通用倒计时组件，开箱即用！

2023-11-30 21:08:51

使用React Hooks打造功能强大的倒计时组件

在前端开发中，倒计时组件是一种至关重要的元素，用于展示时间敏感的事件，例如秒杀活动、活动倒计时或游戏中的计时器。传统上，使用类组件来实现倒计时组件，但随着React Hooks的出现，我们有了更简洁、更优雅的方式来创建和管理状态。本文将深入探讨使用React Hooks来封装一个倒计时组件，涵盖其设计、实现和使用场景。

React Hooks：函数式组件的新利器

React Hooks是一组特殊的函数，允许我们在不使用类组件的情况下使用状态和其他React特性。它们极大地简化了函数组件的编写，让我们能够以更声明式和更具可读性的方式管理组件状态。

倒计时组件的设计

一个倒计时组件应该具备以下特性：

以天、小时、分钟和秒的形式展示倒计时
支持自定义初始时间和持续时间
在倒计时结束后执行回调函数

基于这些要求，我们可以设计一个使用React Hooks的倒计时组件：

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

const CountDown = ({ initialTime, duration, onFinish }) => {
  const [days, setDays] = useState(0);
  const [hours, setHours] = useState(0);
  const [minutes, setMinutes] = useState(0);
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      if (duration > 0) {
        const timeLeft = duration - 1;
        setDays(Math.floor(timeLeft / (60 * 60 * 24)));
        setHours(Math.floor((timeLeft % (60 * 60 * 24)) / (60 * 60)));
        setMinutes(Math.floor((timeLeft % (60 * 60)) / 60));
        setSeconds(Math.floor(timeLeft % 60));
      } else {
        clearInterval(interval);
        onFinish();
      }
    }, 1000);
    return () => clearInterval(interval);
  }, [duration, onFinish]);

  return (
    <div>
      <span>{days}天</span>
      <span>{hours}时</span>
      <span>{minutes}分</span>
      <span>{seconds}秒</span>
    </div>
  );
};

export default CountDown;

组件实现

这个组件使用React Hooks useState来管理倒计时状态，并使用 useEffect来在组件挂载后创建和更新倒计时。useEffect 钩子每秒更新一次状态，直到倒计时达到零，然后调用 onFinish 回调函数。

使用倒计时组件

我们可以这样使用这个组件：

import CountDown from './CountDown';

const App = () => {
  const [duration, setDuration] = useState(1000 * 60 * 60); // 一小时

  const onFinish = () => {
    alert('倒计时已到！');
  };

  return (
    <div>
      <CountDown initialTime={duration} onFinish={onFinish} />
    </div>
  );
};

export default App;