use-timer：React 的定时器 Hook 简介

use-timer：React 的定时器 Hook 简介

use-timer 是一个为 React 应用程序设计的轻量级定时器 Hook。它允许开发者以简单的方式在 React 组件中添加计时器功能，无论是倒计时还是普通计时都可以轻松实现。

项目快速启动

首先，你需要将 use-timer 添加到你的项目中。使用 npm 或 yarn 安装：

npm i use-timer
# 或者
yarn add use-timer

然后，在你的 React 组件中引入 use-timer 并按照以下示例使用它：

import React from 'react';
import { useTimer } from 'use-timer';

const App = () => {
  const {
    time,
    start,
    pause,
    reset,
    status
  } = useTimer();

  return (
    <div>
      <button onClick={start}>开始</button>
      <button onClick={pause}>暂停</button>
      <button onClick={reset}>重置</button>
      <p>已逝时间：{time}</p>
      {status === 'RUNNING' && <p>运行中...</p>}
    </div>
  );
};

export default App;

应用案例和最佳实践

基础计时器

创建一个简单的计时器，记录从开始到当前的时间：

import { useTimer } from 'use-timer';

const BasicTimer = () => {
  const {
    time,
    start,
    pause,
    reset
  } = useTimer();

  return (
    // ...
  );
};

递减计时器

设置一个倒计时，从初始值开始递减：

const {
  time,
  start,
  pause,
  reset
} = useTimer({
  initialTime: 100,
  timerType: 'DECREMENTAL'
});

结束时间计时器

设置一个具有明确结束时间的计时器：

const {
  time,
  start,
  pause,
  reset
} = useTimer({
  endTime: 30,
  initialTime: 10
});

回调函数

你可以提供回调函数，当时间到达结束或更新时执行：

const {
  time,
  start,
  pause,
  reset
} = useTimer({
  endTime: 10,
  onTimeOver: () => {
    console.log('时间到了！');
  },
  onTimeUpdate: (time) => {
    console.log('时间更新：', time);
  }
});

典型生态项目

目前尚无特定的生态项目列出。不过，use-timer 的设计允许它被广泛地用于各种需要计时器功能的 React 应用程序中。开发者可以根据自己的需求，结合 use-timer 实现多种定时相关的功能。