react 中如何自定义hooks

本文介绍了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 }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值