如何用 React 的自定义 Hook 写一个倒计时？

前端

2023-12-10 14:45:30

简介

React 是一个非常流行且功能强大的前端框架，它提供了很多内置的 Hook，帮助我们在函数组件中使用状态和副作用等功能。然而，有时我们需要创建自己的自定义 Hook 来处理更复杂的逻辑。

在这个教程中，我们将学习如何使用 React 自定义 Hook 来实现一个倒计时功能。我们将从创建一个简单的倒计时组件开始，然后逐步改进它，使其更加健壮和可重用。

前提条件

在继续之前，您需要具备以下知识：

React 基础知识
JavaScript 函数和闭包
React 状态管理

创建一个简单的倒计时组件

首先，创建一个新的 React 项目，然后安装 react 和 react-dom。

npx create-react-app my-app

cd my-app

npm install react react-dom

现在，在 src 目录中创建一个名为 App.js 的文件。在这个文件中，我们将编写我们的倒计时组件。

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

function App() {
  const [secondsRemaining, setSecondsRemaining] = useState(10);

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

  return (
    <div>
      <h1>Countdown: {secondsRemaining}</h1>
    </div>
  );
}

export default App;

这个组件使用 useState Hook 来管理倒计时的秒数，并使用 useEffect Hook 来每秒递减秒数。

要使用这个组件，只需在 index.js 文件中将其渲染到 DOM 中。

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

现在，当您运行应用程序时，您将看到一个简单的倒计时，从 10 秒开始倒数。

改进倒计时组件

我们的倒计时组件现在可以工作了，但它还有很多可以改进的地方。首先，它只能倒数 10 秒。其次，它没有暂停或重置功能。

要改进这些问题，我们可以使用 useRef Hook 来存储倒计时的间隔 ID。这将允许我们暂停和重置倒计时。

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

function App() {
  const intervalId = useRef(null);
  const [secondsRemaining, setSecondsRemaining] = useState(10);

  useEffect(() => {
    if (secondsRemaining > 0) {
      intervalId.current = setTimeout(() => {
        setSecondsRemaining(secondsRemaining - 1);
      }, 1000);
    }

    return () => {
      clearInterval(intervalId.current);
    };
  }, [secondsRemaining]);

  const handlePause = () => {
    clearInterval(intervalId.current);
  };

  const handleReset = () => {
    setSecondsRemaining(10);
  };

  return (
    <div>
      <h1>Countdown: {secondsRemaining}</h1>
      <button onClick={handlePause}>Pause</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}

export default App;