使用 react 函数组件 封装一个 倒计时hook 支持 暂停 清空 继续
时间: 2023-12-14 11:39:12 浏览: 31
好的,这里是一个使用 React 函数组件封装的倒计时 Hook,支持暂停、清空和继续。
```javascript
import React, { useState, useEffect } from "react";
function useCountdown(initialCountdown) {
const [countdown, setCountdown] = useState(initialCountdown);
const [isPaused, setIsPaused] = useState(false);
useEffect(() => {
let intervalId;
if (!isPaused && countdown > 0) {
intervalId = setInterval(() => {
setCountdown(countdown => countdown - 1);
}, 1000);
}
return () => clearInterval(intervalId);
}, [countdown, isPaused]);
const pauseCountdown = () => setIsPaused(true);
const resetCountdown = () => setCountdown(initialCountdown);
const resumeCountdown = () => setIsPaused(false);
return {
countdown,
pauseCountdown,
resetCountdown,
resumeCountdown
};
}
function Countdown({ initialCountdown }) {
const { countdown, pauseCountdown, resetCountdown, resumeCountdown } =
useCountdown(initialCountdown);
return (
<div>
<h1>{countdown}</h1>
<button onClick={pauseCountdown}>Pause</button>
<button onClick={resetCountdown}>Reset</button>
<button onClick={resumeCountdown}>Resume</button>
</div>
);
}
export default Countdown;
```
使用方式:
```javascript
import Countdown from "./Countdown";
function App() {
return <Countdown initialCountdown={60} />;
}
```