React 自定义 hook 实现验证码倒计时

[heycn]

避免陷入闭包陷阱

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

const useCountDown = second => {
  const [seconds, setSeconds] = useState(second)
  useEffect(() => {
    setTimeout(() => {
      if (seconds > 0) {
        setSeconds(seconds - 1)
      }
    }, 1000)
  }, [seconds])

  return [seconds, setSeconds]
}

const App = () => {
  const [seconds, setSeconds] = useCountDown(0)
  return (
    <button disabled={seconds !== 0} onClick={() => setSeconds(60)}>
      {seconds > 0 ? `${seconds}s后可点击` : '点击开始倒计时'}
    </button>
  )
}

[heycn]

如果你想严格地控制 Timer 的执行次数，请使用使用 useRef + clearInterval，并且在 useEffect 中的 return => {} 里调用

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

type CountDown = (second: number) => [number, (seconds: number) => void]
export const useCountDown: CountDown = second => {
  const [seconds, setSeconds] = useState(second)
  const timer = useRef<number>()

  useEffect(() => {
    if (seconds > 0) {
      timer.current = window.setTimeout(() => {
        console.log('update')
        setSeconds(seconds - 1)
      }, 1000)
    }
    return () => window.clearInterval(timer.current)
  }, [seconds])

  return [seconds, setSeconds]
}