react 中如何自定义hooks

首相要知道自定义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)
     = setInterval(() => {
      setCount((count) => count - 1)
    }, 1000)
  }
  useEffect(() => {
    return () => {
      ('..........')
      clearInterval()
    }
  }, [])

  useEffect(
    () => {
      (count, )
      if (count === 0) {
        clearInterval()
        callBack()
      }
    },
    [count]
  )

  return { count, start }
}