倒计时功能在网站和应用程序中随处可见，用于各种场合，如在线考试、活动开始前的等待、限时促销等。如果你是一名 React 新手，可能会认为实现这样的功能需要编写复杂的代码。但事实上，React 的设计理念和功能强大的钩子（Hooks）让这变得异常简单。
本文将带你一步步实现一个简单的 60 秒倒计时器，让你理解 React 中状态管理和副作用的处理方式，以及如何使用 React 的钩子简化代码。
为什么需要倒计时器？#
倒计时器可以提高用户体验，给予用户明确的时间反馈。在特定时间内完成任务或者等待某事件的发生，倒计时器可以提供清晰的视觉指示，帮助用户做出反应。
起步：创建 React 应用#
首先，确保你已经安装了 Node.js 和 npm，并通过下面的命令创建一个新的 React 应用：
npx create-react-app countdown-timer
进入项目，启动应用：
cd countdown-timer
npm start
倒计时逻辑的思考#
实现倒计时功能的核心在于两点：
状态管理：倒计时时间的持续更新是一个典型的状态管理问题。
副作用处理：时间的更新依赖于 JavaScript 的定时器，这是一个副作用。
而在 React 中，useState钩子用于状态管理，useEffect钩子用于处理副作用。
编写倒计时组件
在项目的src文件夹中，创建一个名为Countdown.js的文件，并编写如下代码：
// 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 <div>剩余时间：{seconds} 秒</div>;
};
export default Countdown;
解析关键点#
useState 钩子：用来声明倒计时的状态seconds，并初始化为 60。setSeconds是一个函数，用来更新 seconds 的值。
useEffect 钩子：处理副作用，这里的副作用是定时器。useEffect接收一个函数，这个函数会在组件渲染到屏幕之后执行。当seconds发生变化时，就会重新执行这个函数。
在 useEffect 的回调函数中，我们使用setTimeout设置一个每秒钟调用一次的定时器，每次调用都会通过setSeconds减少seconds的值。
注意，我们在useEffect中返回了一个函数，这个函数会在组件卸载前或useEffect重新执行前调用，用于清理上一个定时器，这避免了内存泄漏的问题。
使用 Countdown 组件#
在src/App.js中，引入并使用Countdown组件：
// src/App.js
import React from 'react';
import './App.css';
import Countdown from './Countdown';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>倒计时器</h1>
<Countdown />
</header>
</div>
);
}
export default App;
现在，启动应用，你应该能在页面上看到从 60 倒数的倒计时器。
总结#
通过这个简单的示例，我们学习了如何在React中使用useState和useEffect钩子来管理状态和副作用。这展示了React的声明式编程特性 —— 你只需要告诉React你想要的结果是什么，React会负责实现它。
现在你已经知道如何创建一个简洁的倒计时器了，你可以将这个知识应用到更复杂的功能中，或者尝试为倒计时器添加额外的特性，比如重置按钮、自定义时间等。
期初我的想法是在
useEffect里使用setTimeOut然后用一个 for 循环来实现的。虽然也能实现但是这里有一个问题，知道是为什么吗？🤭