react 实现短信倒计时功能

项目场景：

前段时间的移动端项目中登录时,缺少短信发送后倒计时功能,这里写一下以后方便使用

---

功能流程

1. 发送验证码
2. 验证码发送成功后按钮隐藏,倒计时显示
3. 页面开始倒计时
4. 倒计时结束后恢复发送验证码功能

---

代码实现：

  const [isNote, setIsNote] = useState(false);
  const [time, setTime] = useState(null);
  const timeRef = useRef();

  useEffect(() => {
    if (time && time != 0) {
      timeRef.current = setTimeout(() => {
        setTime((time) => time - 1);
      }, 1000);
    } else {
      setIsNote(false);
    }
    return () => {
      clearInterval(timeRef.current);
    };
  }, [time]);

  /****
   * 发送短信验证码
   */
  const note = () => {
  	axios(url).then((res)=>{
  		if(res.code == 200){
			setTime(60);
    		setIsNote(true);
  		}
  	})
  }

//--------------------- 页面

       {isNote ? (
                <div>{time}秒后可重新发送 </div>
              ) : (
                <div onClick={() => note()}>
                  发送验证码
                </Flex>
              )}