开启倒计时，嘿嘿，这次用hooks来实现哟

 一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

话不多说，直接上代码....

首先，要封装好一个自定义hooks

import { useEffect, useRef, useState } from 'react'

export default function useCountDown (initCount = 10, callBack = () => {}) {
  const timeId = useRef<{id:number}>({ id: 0 })
  const [count, setCount] = useState(initCount)

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

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

  return { count, start }
}

其次，在组件中使用，在发送验证码，后端拿到手机号后，且手机号通过验证后，开始倒计时

//定义一个Boolean，状态变为false时开始倒计时

const [sendable, setSentable] = useState(true)

//使用自定义hooks
const { count, start } = useCountDown(5, () => { setSentable(true) })
//初始值为true，点击之后变为falsesetSentable(false)

// 开始倒计时start()