react hook倒计时、定时器（短信验证码）

用js写计时器实现倒计时功能很简单，但hooks写的话可能不太一样，这里我已经封装成一个组件了，可以直接copy拿去用

//verifyCode 子组件


const VerifyCode = ({ onClick, seconds = 60 }) => {
  const [time, setTime] = useState(0)
  const timer = useRef(null)

  useEffect(() => {
    timer.current && clearInterval(timer.current);
    return () => timer.current && clearInterval(timer.current);
  }, []);

  useEffect(()=> {
    if( time === seconds ) timer.current = setInterval(()=> setTime(time => --time), 1000)
    else if ( time <= 0 )timer.current && clearInterval(timer.current)
  }, [time])

  const getCode = () => {
    if (time) return;
    // 作为组件使用 
    onClick?.(()=> {
      setTime(seconds)
    })
    //直接使用
    setTime(seconds)
  }

  return (
    <div onClick={getCode}>
      { time? `${time}秒后获取`: '获取验证码' }
    </div>
  )
}
export default VerifyCode;

// 父组件

const getCode = (call) => {
    call?.()
}
  
<VerifyCode onClick={getCode} />