React中用Hooks封装倒计时60S

在React中，你可以使用useState和useEffect这两个Hooks来创建一个倒计时组件。下面是一个简单的例子，演示如何使用Hooks封装一个倒计时60秒的组件。
首先，我们需要安装React和React Developer Tools插件，以确保你的开发环境已经准备好。
接下来，创建一个名为CountdownTimer.js的新文件，并在其中编写以下代码：

import React, { useState, useEffect } from 'react';
function CountdownTimer() {
// 设置初始倒计时状态为60
const [countdown, setCountdown] = useState(60);
// 使用useEffect Hook来监听倒计时结束的情况
useEffect(() => {
// 设置一个倒计时定时器，每秒更新一次countdown状态
const timer = setTimeout(() => {
setCountdown(countdown - 1);
}, 1000);
// 当倒计时结束时，清除定时器并显示警告消息
if (countdown === 0) {
clearTimeout(timer);
alert('倒计时结束!');
}
}, [countdown]); // 确保只有当countdown状态变化时才执行useEffect内的逻辑
return (
<div>
<h1>倒计时：{countdown}秒</h1>
</div>
);
}
export default CountdownTimer;

在这个例子中，我们使用了useState Hook来创建一个名为countdown的状态变量，并将其初始值设置为60。然后，我们使用useEffect Hook来监听countdown状态的变化。当countdown状态的值减少时，我们使用setTimeout函数设置一个定时器，每秒更新一次countdown状态的值。当countdown状态的值减少到0时，我们清除定时器并显示一个警告消息。最后，我们在返回的JSX中显示当前的倒计时时间。
现在，你可以在其他组件中使用这个CountdownTimer组件来显示倒计时时间。例如，在App.js文件中编写以下代码：

import React from 'react';
import CountdownTimer from './CountdownTimer';
function App() {
return (
<div>
<h1>我的倒计时应用</h1>
<CountdownTimer />
</div>
);
}
export default App;

在这个例子中，我们在App组件中引入了CountdownTimer组件，并在返回的JSX中将其渲染到页面上。这样，你就可以看到一个显示当前倒计时的组件了。你可以根据需要修改这个组件的样式和功能。希望这个例子能帮助你理解如何在React中使用Hooks来封装一个简单的倒计时组件。如果你有任何其他问题，请随时提问。