react 中如何自定义hooks

最新推荐文章于 2025-06-15 13:00:05 发布

时间管理maste

最新推荐文章于 2025-06-15 13:00:05 发布

阅读量5.3k

点赞数 5

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/DDAD9527/article/details/121341862

本文介绍了React自定义Hooks的概念和使用规则，并通过一个自定义倒计时Hook `useCountDown` 的例子，展示了如何实现和复用状态逻辑。自定义Hooks遵循以`use`开头的命名规范，只能在函数组件或其它自定义Hooks中使用。`useCountDown`接收初始化时间和结束回调，能实时返回剩余时间并控制倒计时的启动。该Hook可用于需要倒计时功能的场景，提高代码复用性和组件的简洁性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首相要知道自定义hooks的目的是什么,区别于自定义组件

自定义hooks最大的好处就是可以逻辑复用

1. 自定义 Hooks 是一个函数，约定函数名称必须以 use 开头，React 就是通过函数名称是否以 use 开头来判断是不是 Hooks

2. Hooks 只能在函数组件中或其他自定义 Hooks 中使用，否则，会报错！

3. 自定义 Hooks 用来提取组件的状态逻辑，根据不同功能可以有不同的参数和返回值（就像使用普通函数一样）

下面这是一个自定义倒计时的 hooks

① 首先定义一个函数并导出

② 先明白需求,我需要函数来干什么

第一:我可以传递一个定时器的初始时间(initCount) ,如果不传默认10秒

第二: 当时间结束时,我需要做什么, callBack=()=>{} 结束之后的回调函数

第三: 我可以获取到剩余的时间吗?

第四: 我可以自己控制什么时候执行这个定时器吗

③ 明白需求后对着下面格式书写代码

④ 该hooks 可以传递一个时间,并使用结束时候的回调函数

⑤ 该hooks 可以实时返回:剩余时间( count ),什么时候开始执行倒计时( start( ) )

export default function useCountDown (initCount = 10, callBack = () => {}) {
  const timeId = useRef(null)

  const [count, setCount] = useState(initCount)

  const start = () => {
    setCount(initCount)
    timeId.current = setInterval(() => {
      setCount((count) => count - 1)
    }, 1000)
  }
  useEffect(() => {
    return () => {
      console.log('..........')
      clearInterval(timeId.current)
    }
  }, [])

  useEffect(
    () => {
      console.log(count, timeId.current)
      if (count === 0) {
        clearInterval(timeId.current)
        callBack()
      }
    },
    [count]
  )

  return { count, start }
}