构建 React 计时器集合钩子：随时暂停并继续！

前端

2023-11-11 14:26:49

序言

React 的钩子是函数组件中使用状态和生命周期的强大方法。利用钩子，我们可以创建可重用的代码片段，以简洁的方式处理复杂逻辑。在本文中，我们将介绍如何使用 React 钩子来构建一个计时器集合钩子，从而轻松管理多个计时器。

需求分析

在开始编码之前，让我们先明确我们的需求：

创建计时器： 能够创建多个计时器，每个计时器都有自己的持续时间和回调函数。
暂停计时器： 能够暂停所有计时器或仅暂停特定计时器。
恢复计时器： 能够恢复所有计时器或仅恢复特定计时器。
获取剩余时间： 能够获取每个计时器的剩余时间。
根据剩余时间继续计时器： 能够根据剩余时间继续计时器，而不是从头开始。

实现计时器集合钩子

现在，让我们一步一步地实现计时器集合钩子：

1. 定义 Hook

首先，我们定义一个名为 useTimerCollection 的钩子：

import { useState, useEffect } from 'react';

export const useTimerCollection = () => {
  const [timers, setTimers] = useState([]);

  // ... Remaining code
};

2. 创建计时器

要创建计时器，我们使用 createTimer 函数：

const createTimer = (duration, callback) => {
  const timer = {
    duration,
    callback,
    remainingTime: duration,
    isActive: false,
  };

  setTimers(timers => [...timers, timer]);
};

3. 暂停计时器

要暂停计时器，我们使用 pauseTimer 函数：

const pauseTimer = (timerId) => {
  const timer = timers.find(timer => timer.id === timerId);

  if (timer) {
    timer.isActive = false;
  }
};

4. 恢复计时器

要恢复计时器，我们使用 resumeTimer 函数：

const resumeTimer = (timerId) => {
  const timer = timers.find(timer => timer.id === timerId);

  if (timer) {
    timer.isActive = true;
  }
};

5. 获取剩余时间

要获取计时器的剩余时间，我们使用 getRemainingTime 函数：

const getRemainingTime = (timerId) => {
  const timer = timers.find(timer => timer.id === timerId);

  if (timer) {
    return timer.remainingTime;
  }

  return 0;
};

6. 根据剩余时间继续计时器

要根据剩余时间继续计时器，我们使用 continueTimer 函数：

const continueTimer = (timerId) => {
  const timer = timers.find(timer => timer.id === timerId);

  if (timer) {
    timer.remainingTime = timer.duration - timer.elapsedTime;
    timer.isActive = true;
  }
};

7. 使用计时器集合钩子

现在，我们可以使用计时器集合钩子来管理多个计时器：

const App = () => {
  const { timers, createTimer, pauseTimer, resumeTimer, getRemainingTime, continueTimer } = useTimerCollection();

  return (
    <div>
      {/* ... Timer controls and display */}
    </div>
  );
};