React从小白到高手：创建无样式倒计时 Hook 组件，为应用增添互动魅力

2023-02-12 15:27:56

使用 React Hook 轻松实现倒计时功能

简介

在当今快节奏的时代，倒计时已成为许多应用中不可或缺的元素。无论是购物网站的限时抢购，还是视频直播的倒计时提醒，都离不开倒计时组件。在 React 应用中，实现倒计时功能需要用到计时器 API。不过，为了避免重复造轮子，我们可以使用更简洁的 Hook 组件来实现。

理解 Hook 组件

Hook 组件是 React 16.8 版本引入的一项强大功能，它允许我们在函数组件中使用状态和生命周期方法，而无需编写类组件。Hook 组件的使用非常简单，只需在函数组件中调用相应的 Hook 函数即可。

创建倒计时 Hook 组件

为了创建倒计时 Hook 组件，我们需要定义一个名为 useCountdown 的函数，该函数接收两个参数：目标时间和时间间隔。目标时间是倒计时结束的时间，时间间隔是倒计时每隔一段时间更新一次。

const useCountdown = (targetDate, interval) => {
  // 使用 useState 保存倒计时状态
  const [timeLeft, setTimeLeft] = useState(targetDate - Date.now());

  // 使用 useEffect 启动倒计时
  useEffect(() => {
    const intervalId = setInterval(() => {
      setTimeLeft(targetDate - Date.now());
    }, interval);

    // 清除倒计时
    return () => clearInterval(intervalId);
  }, []);

  // 返回倒计时状态和一个重置倒计时的函数
  return [timeLeft, () => setTimeLeft(targetDate - Date.now())];
};

使用倒计时 Hook 组件

在 React 组件中，我们可以使用 useCountdown Hook 组件来创建倒计时。以下是一个示例：

import React, { useState } from "react";
import useCountdown from "./useCountdown";

const Countdown = () => {
  const targetDate = new Date().getTime() + 1000 * 60;
  const interval = 1000;
  const [timeLeft, resetCountdown] = useCountdown(targetDate, interval);

  return (
    <div>
      <h1>倒计时：{timeLeft}</h1>
      <button onClick={resetCountdown}>重置倒计时</button>
    </div>
  );
};

export default Countdown;