在 src 目录下新建 hooks/index.ts 模块，自定义hooks都写在这里，自定义hooks都以use开头

自定义封装鼠标位置的 hook

export const useMousePosition = (delay:number = 0) => {const [position, setPosition] = useState({ x: 0, y: 0 }) // 鼠标的位置useEffect(() => {let timeId : null | NodeJS.Timeout = nullconst 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 // 返回鼠标的位置
}

import { useMousePosition } from '@/hooks/index'
const MouseInfo: React.FC = () => {const position = useMousePosition(200) // 调用自定义hooks获取位置，还可以传递参数return (<><p>鼠标的位置：{JSON.stringify(position)}</p></>)
}

自定义封装秒数倒计时的 hook

// 设置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默认设置为10const [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 = nulltimeId = setTimeout(() => {if(count>1) setCount(prev=>prev-1)else {clearTimeout(intervalId)setDisabled(false)}}, 1000)return ()=>clearTimeout(intervalId)}, [count])return [restCount,disabled] // 返回鼠标的位置
}

import { useCountDown } from '@/hooks/index'
const MouseInfo: React.FC = () => {const [count,disabled] = useCountDown(5) return (<><button disabled={disabled}>{disabled?`请仔细阅读本协议（${count}）秒`:'请确认协议'}</button></>)
}