平时工作偶尔会把一些逻辑相通的功能作逻辑复用,这里记录下来 希望对大家实际开发有些帮助
需求 : 点击一个按钮 按钮用 过n秒回复
import { useState, useEffect, useRef } from 'react'
// 第一参数为你定时的数字
// 第二参数为你定时结束时想做的事
// 返回的第一参数为可变值
// 返回第二参数为触发函数
export function useTimer (Num, callBack = () => {}) {
const [num, setNum] = useState(Num)
const ref = useRef(null)
// 调用这个方法,开始倒数
const start = () => {
setNum(Num) // 重新赋值
// 定时器
ref.current = setInterval(() => {
setNum((num) => num - 1)
}, 1000)
}
// 倒数为0 关闭定时器
useEffect(
() => {
if (num === 0) {
return () => {
clearInterval(ref.current) // 关闭定时器
callBack() // 自己想做的事
}
}
},
[num]
)
// 解决当正在计数的组件开始倒数 删除组件导致无法取消定时器
useEffect(() => {
return () => {
clearInterval(ref.current)
}
}, [])
// 返回可变值 与 触发函数
return {
num, // 可变值
start // 触发函数
}
}
第一步: 搭建基础结构
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
export default function App () {
const [IsShow, setIsShow] = useState(true)
const isShow = () => {
setIsShow(false)
}
return (
<div>
<button disabled={!IsShow} onClick={isShow}>
{IsShow ? '显示' : '还有' + '可变值'+'秒恢复'}
</button>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
第二步 导入引用
import { useTimer } from './userDefined'
第三步 分析
点击按钮需要禁用过五秒恢复,
所以第一参数为需求五秒,第二参数为按钮恢复也就是设置setIsShow(true)
const { num, start } = useTimer(5, () => {
setIsShow(true)
})
返回值我们会拿到可变值以及触发函数,在点击时触发,所以在点击事件中我们调用这个触发函数.
const isShow = () => {
setIsShow(false)
start()
}
完整写法
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import { useTimer } from './userDefined'
export default function App () {
const { num, start } = useTimer(5, () => {
setIsShow(true)
})
const [IsShow, setIsShow] = useState(true)
const isShow = () => {
setIsShow(false)
start()
}
return (
<div>
<button disabled={!IsShow} onClick={isShow}>
{IsShow ? '显示' : '还有' + num + '秒恢复'}
</button>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))