React hooks - 自定义hooks

自定义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>
    </>
  )
}
相关推荐
Keepreal49619 分钟前
word文件预览实现
前端·javascript·react.js
郝开19 分钟前
5. React中的组件:组件是什么;React定义组件
前端·javascript·react.js
Keepreal4962 小时前
pdf文件预览实现
javascript·react.js
Python私教3 小时前
React + Ant Design + Tailwind CSS 打造「无痕」垂直滚动区域:功能全上,滚动条隐身
前端·css·react.js
aesthetician6 小时前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
知识分享小能手16 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
蓝瑟18 小时前
React 项目实现拖拽排序功能,如何在众多库中选对 “它”
前端·javascript·react.js
小刘不知道叫啥19 小时前
React 源码揭秘 | 合成事件
前端·javascript·react.js
冰万森20 小时前
解决 React 项目初始化(npx create-react-app)速度慢的 7 个实用方案
前端·react.js·前端框架