import { useState, useRef, useEffect } from 'react'
// useTimeDown(要倒计时的时间,倒计时结束后的回调函数)
export default function useTimeDown (init, CallBack) {
const [count, setCount] = useState(init)
const refTime = useRef(null)
const start = () => {
// 1.开始倒数
setCount(init)
// 2.开启定时器
refTime.current = setInterval(() => {
setCount((count) => count - 1)
}, 1000)
}
useEffect(
() => {
// console.log(1)
if (count === 0) {
// 倒数结束后,要:
// 1.做用户指定的动作
CallBack()
// 2.清空定时器
clearInterval(refTime.current)
}
},
// 依赖项为 count , 它变化时副作用函数工作
[count]
)
// 副作用函数的清理函数,模拟 componentWillUnMount
useEffect(() => {
// 销毁定时器
return () => {
clearInterval(refTime.current)
}
}, [])
return {
count,
start
}
}
封装倒计时组件(逻辑复用)
最新推荐文章于 2022-11-14 16:19:47 发布