一文搞懂React倒计时，从此告别繁琐代码

倒计时功能在网站和应用程序中随处可见，用于各种场合，如在线考试、活动开始前的等待、限时促销等。如果你是一名 React 新手，可能会认为实现这样的功能需要编写复杂的代码。但事实上，React 的设计理念和功能强大的钩子（Hooks）让这变得异常简单。

本文将带你一步步实现一个简单的 60 秒倒计时器，让你理解 React 中状态管理和副作用的处理方式，以及如何使用 React 的钩子简化代码。

为什么需要倒计时器？

倒计时器可以提高用户体验，给予用户明确的时间反馈。在特定时间内完成任务或者等待某事件的发生，倒计时器可以提供清晰的视觉指示，帮助用户做出反应。

起步：创建 React 应用

首先，确保你已经安装了 Node.js 和 npm，并通过下面的命令创建一个新的 React 应用：

npx create-react-app countdown-timer

进入项目，启动应用：

Copy
cd countdown-timer
npm start

倒计时逻辑的思考

实现倒计时功能的核心在于两点：

状态管理：倒计时时间的持续更新是一个典型的状态管理问题。
副作用处理：时间的更新依赖于 JavaScript 的定时器，这是一个副作用。

而在 React 中，useState钩子用于状态管理，useEffect钩子用于处理副作用。

编写倒计时组件
在项目的src文件夹中，创建一个名为Countdown.js的文件，并编写如下代码：

Copy
// src/Countdown.js
import React, { useState, useEffect } from 'react';

const Countdown = () => {
// 使用useState管理倒计时时间
const [seconds, setSeconds] = useState(60);

// 使用useEffect处理倒计时逻辑
useEffect(() => {
if (seconds > 0) {
// 只有当seconds大于0时，才设置定时器
const timerId = setTimeout(() => setSeconds(seconds - 1), 1000);
// 清理定时器
return () => clearTimeout(timerId);
}
}, [seconds]);// 依赖于 seconds，每当 seconds 变更时都会重新设置 timeout

return 剩余时间：{seconds} 秒 ;
};

export default Countdown;

解析关键点

useState 钩子：用来声明倒计时的状态seconds，并初始化为 60。setSeconds是一个函数，用来更新 seconds 的值。

useEffect 钩子：处理副作用，这里的副作用是定时器。useEffect接收一个函数，这个函数会在组件渲染到屏幕之后执行。当seconds发生变化时，就会重新执行这个函数。

在 useEffect 的回调函数中，我们使用setTimeout设置一个每秒钟调用一次的定时器，每次调用都会通过setSeconds减少seconds的值。

注意，我们在useEffect中返回了一个函数，这个函数会在组件卸载前或useEffect重新执行前调用，用于清理上一个定时器，这避免了内存泄漏的问题。

使用 Countdown 组件

在src/App.js中，引入并使用Countdown组件：

Copy
// src/App.js
import React from 'react';
import './App.css';
import Countdown from './Countdown';

function App() {
return (


倒计时器
<Countdown />


);
}

export default App;

现在，启动应用，你应该能在页面上看到从 60 倒数的倒计时器。

总结

通过这个简单的示例，我们学习了如何在React中使用useState和useEffect钩子来管理状态和副作用。这展示了React的声明式编程特性 —— 你只需要告诉React你想要的结果是什么，React会负责实现它。

现在你已经知道如何创建一个简洁的倒计时器了，你可以将这个知识应用到更复杂的功能中，或者尝试为倒计时器添加额外的特性，比如重置按钮、自定义时间等。

期初我的想法是在useEffect里使用 setTimeOut 然后用一个 for 循环来实现的。虽然也能实现但是这里有一个问题，知道是为什么吗？🤭