自定义hooks
-
-
-
- [自定义封装鼠标位置的 hook](#自定义封装鼠标位置的 hook)
- [自定义封装秒数倒计时的 hook](#自定义封装秒数倒计时的 hook)
-
-
在 src 目录下新建 hooks/index.ts 模块,自定义hooks都写在这里,自定义hooks都以use开头
自定义封装鼠标位置的 hook
javascript
export const useMousePosition = (delay:number = 0) => {
const [position, setPosition] = useState({ x: 0, y: 0 }) // 鼠标的位置
useEffect(() => {
let timeId : null | NodeJS.Timeout = null
const mouseMoveHandler = (e: MouseEvent) => {
if(timeId !== null) return
timeId = setTimeout(() => {
console.log({ x: e.clientX, y: e.clientY })
setPosition({ x: e.clientX, y: e.clientY })
timeId = null
}, delay)
}
window.addEventListener('mousemove', mouseMoveHandler)
return () => window.removeEventListener('mousemove', mouseMoveHandler)
}, [])
return position // 返回鼠标的位置
}
javascript
import { useMousePosition } from '@/hooks/index'
const MouseInfo: React.FC = () => {
const position = useMousePosition(200) // 调用自定义hooks获取位置,还可以传递参数
return (
<>
<p>鼠标的位置:{JSON.stringify(position)}</p>
</>
)
}
自定义封装秒数倒计时的 hook
javascript
// 设置hooks函数的类型,num后面加一个?代表可传可不穿,不穿默认为10
type useCountDown = (num?: number) => [number, boolean]
export const useCountDown: useCountDown = (num: number = 10) => {
const seconds = Math.round(Math.abs(num)) || 10 // 对边界值进行处理,取绝对值再取整,如果传入为0默认设置为10
const [count, setCount] = useState(seconds)
const [disabled, setDisabled] = useState(true)
// useEffect(() => {
// let intervalId : null | NodeJS.Interval = null
// intervalId = setInterval(() => {
// if(count>1) setCount(prev=>prev-1)
// else {
// clearInterval(intervalId)
// setDisabled(false)
// }
// }, 1000)
// return ()=>clearInterval(intervalId)
// }, [])
useEffect(() => {
let timeId : null | NodeJS.Timeout = null
timeId = setTimeout(() => {
if(count>1) setCount(prev=>prev-1)
else {
clearTimeout(intervalId)
setDisabled(false)
}
}, 1000)
return ()=>clearTimeout(intervalId)
}, [count])
return [restCount,disabled] // 返回鼠标的位置
}
javascript
import { useCountDown } from '@/hooks/index'
const MouseInfo: React.FC = () => {
const [count,disabled] = useCountDown(5)
return (
<>
<button disabled={disabled}>{disabled?`请仔细阅读本协议(${count})秒`:'请确认协议'}</button>
</>
)
}