react倒计时重新计时_如何使用React挂钩创建倒数计时器

react倒计时重新计时

介绍 (Introduction)

In this tutorial, you will create a countdown timer. This timer will help you learn how to leverage React hooks to update state and manage side effects in a React component.

在本教程中，您将创建一个倒数计时器。 这个计时器将帮助您学习如何利用React钩子来更新状态和管理React组件中的副作用。

With React hooks, you can create cleaner code, reusable logic between components, and update state without classes.

使用React钩子，您可以创建更简洁的代码，组件之间的可重用逻辑以及无需类即可更新状态。

Countdown timers are a common UI component and can serve many purposes. They can communicate to users how long they have been doing something or how much time until some event happens. The event you will countdown to in this tutorial is DigitalOcean’s HacktoberFest.

倒数计时器是常见的UI组件，可以用于多种用途。 他们可以向用户传达他们已经做了多长时间，或者直到某个事件发生之前需要花费多长时间。 您将在本教程中倒数的事件是DigitalOcean的HacktoberFest 。

By the end of this tutorial, you will have a functional and reusable Countdown timer using React’s useState() and useEffect() hooks.

在本教程结束时，您将使用React的useState()和useEffect()钩子来使用一个可重复使用的Countdown计时器。

先决条件 (Prerequisites)

Before you begin this guide, you’ll need the following:

在开始本指南之前，您需要满足以下条件：

• You will need a development environment running Node.js; this tutorial was tested on Node.js version 10.20.1 and npm version 6.14.4. To install this on macOS or Ubuntu 18.04, follow the steps in How to Install Node.js and Create a Local Development Environment on macOS or the Installing Using a PPA section of How To Install Node.js on Ubuntu 18.04.

  您将需要一个运行Node.js的开发环境； 本教程已在Node.js 10.20.1版和npm 6.14.4版上进行了测试。 要将其安装在macOS或Ubuntu 18.04上，请遵循如何在macOS上安装Node.js并创建本地开发环境中的步骤，或如何在Ubuntu 18.04上安装Node.js的 使用PPA安装部分中的步骤 。

• In this tutorial, you will create apps with Create React App. You can find instructions for installing an application with Create React App at How To Set Up a React Project with Create React App

  在本教程中，您将使用Create React App创建应用程序 。 您可以在如何使用Create React App 设置React项目中找到有关使用Create React App安装应用程序的说明。

• You will also need basic knowledge of JavaScript, which you can find in How To Code in JavaScript, along with a basic understanding of HTML and CSS. A useful resource for HTML and CSS is the Mozilla Developer Network.

  您还将需要JavaScript的基础知识，您可以在如何使用JavaScript进行编码中找到该知识，以及对HTML和CSS的基本理解。 Mozilla开发人员网络是HTML和CSS的有用资源。

第1步-创建一个空项目 (Step 1 — Creating an Empty Project)

In this step, you’ll create a new project using Create React App. Then you will delete the sample project and related files that are installed when you bootstrap the project.

在这一步中，您将使用Create React App创建一个新项目。 然后，您将删除示例项目以及在引导项目时安装的相关文件。

To start, make a new project. In your terminal, run the following script to install a fresh project using create-react-app:

首先，创建一个新项目。 在您的终端中，运行以下脚本以使用create-react-app安装新项目：

• npx create-react-app react-hooks-counter

  npx create-react-app react-hooks-counter

After the project is finished, change into the directory:

项目完成后，转到目录：

• cd react-hooks-counter

  cd react-hooks-counter

In a new terminal tab or window, start the project using the Create React App start script. The browser will auto-refresh on changes, so leave this script running while you work:

在新的终端标签或窗口中，使用Create React App启动脚本启动项目。 浏览器将自动刷新所做的更改，因此在工作时请保持此脚本运行：

• npm start
  npm开始

You will get a local running server. If the project did not open in a browser window, you can open it with http://localhost:3000/. If you are running this from a remote server, the address will be http://your_server_ip:3000.

您将获得本地正在运行的服务器。 如果未在浏览器窗口中打开项目，则可以使用http://localhost:3000/打开它。 如果您是从远程服务器运行的，则该地址将为http:// your_server_ip :3000 。

Your browser will load with a simple React application included as part of Create React App:

您的浏览器将加载一个简单的React应用程序，该应用程序是Create React App的一部分：

You will be building a completely new set of custom components, so you’ll need to start by clearing out some boilerplate code so that you can have an empty project.

您将构建一套全新的自定义组件，因此您需要从清除一些样板代码开始，以便拥有一个空项目。

To start, open src/App.js in a text editor. This is the root component that is injected into the pag