使用 react 函数组件 封装一个 倒计时hook
时间: 2023-12-14 11:39:10 浏览: 31
好的,下面是一个使用 React 函数组件封装的倒计时 Hook:
```jsx
import React, { useState, useEffect } from 'react';
const useCountdown = (initialTime, interval = 1000) => {
const [time, setTime] = useState(initialTime);
useEffect(() => {
const timer = setInterval(() => {
setTime(prevTime => prevTime - interval);
}, interval);
return () => clearInterval(timer);
}, [interval]);
return time;
};
const Countdown = ({ initialTime }) => {
const time = useCountdown(initialTime);
const minutes = Math.floor(time / 1000 / 60);
const seconds = Math.floor((time / 1000) % 60);
return (
<div>
{minutes}:{seconds < 10 ? `0${seconds}` : seconds}
</div>
);
};
export default Countdown;
```
这个 Hook 接收两个参数:初始时间和时间间隔(默认为 1000ms)。它返回一个代表剩余时间的状态变量 `time`。每当计时器递减时,`time` 就会被更新。
在 `Countdown` 组件中,我们使用了这个 hook,并且将剩余时间转换为分钟和秒数,然后将其渲染到页面上。
使用这个倒计时 Hook 的示例代码如下:
```jsx
import Countdown from './Countdown';
function App() {
return (
<div>
<Countdown initialTime={60000} />
</div>
);
}
export default App;
```
这个例子会渲染一个倒计时,初始值为 60 秒。每隔一秒钟,这个值会减少 1 秒,直到倒计时结束。