React + TypeScript实现倒计时Hook：深入理解Hook机制

2023-12-12 23:08:41

揭秘 React 倒计时 Hook：轻松创建可暂停和重置的计时器

序幕：Hook简介

在 React 生态系统中，Hook 堪称一场革命，它赋予我们使用函数组件访问状态和生命周期方法的能力。这一创新机制消除了对类组件的依赖，为编写可重用且可维护的代码开辟了康庄大道。

倒计时 Hook：概念与实现

倒计时 Hook 是一种自定义 Hook，让我们能够在 React 应用程序中轻而易举地创建和管理倒计时。它的实现得益于 React 的 useEffect 和 useState Hook，它们允许我们追踪时间间隔并更新 UI 以反映剩余时间。

在 TypeScript 中，倒计时 Hook 可以这样定义：

import { useState, useEffect } from "react";

const useCountdown = (seconds: number) => {
  const [remainingSeconds, setRemainingSeconds] = useState(seconds);

  useEffect(() => {
    if (remainingSeconds > 0) {
      setTimeout(() => setRemainingSeconds(remainingSeconds - 1), 1000);
    }
  }, [remainingSeconds]);

  return remainingSeconds;
};

使用倒计时 Hook

要使用倒计时 Hook，我们只需要在我们的函数组件中调用它，如下所示：

import { useCountdown } from "./useCountdown";

const App = () => {
  const remainingSeconds = useCountdown(10);

  return <div>倒计时：{remainingSeconds} 秒</div>;
};

这段代码会创建一个从 10 秒开始的倒计时，并在每次更新时在屏幕上显示剩余时间。

扩展功能：暂停和重置

为了增强倒计时 Hook 的实用性，我们可以添加暂停和重置功能。通过调整 useEffect 钩子的依赖项数组，我们可以掌控倒计时的行为：

import { useState, useEffect, useRef } from "react";

const useCountdown = (seconds: number) => {
  const [remainingSeconds, setRemainingSeconds] = useState(seconds);
  const isPaused = useRef(false);

  useEffect(() => {
    if (!isPaused.current && remainingSeconds > 0) {
      setTimeout(() => setRemainingSeconds(remainingSeconds - 1), 1000);
    }
  }, [remainingSeconds, isPaused]);

  const pause = () => {
    isPaused.current = true;
  };

  const reset = () => {
    setRemainingSeconds(seconds);
    isPaused.current = false;
  };

  return { remainingSeconds, pause, reset };
};

现在，我们可以通过调用 pause 和 reset 方法来暂停或重置倒计时：

import { useCountdown } from "./useCountdown";

const App = () => {
  const { remainingSeconds, pause, reset } = useCountdown(10);

  return (
    <div>
      <button onClick={pause}>暂停</button>
      <button onClick={reset}>重置</button>
      <div>倒计时：{remainingSeconds} 秒</div>
    </div>
  );
};