当前位置：网站首页>验证码倒计时自定义hooks

验证码倒计时自定义hooks

2022-08-10 19:13:00 【大风起兮云飞扬丶】

需要注意：虽然定时器中在不停的调用setTime改变time的值，但是在定时器中输出time的值是不会变的。因为函数式组件中每执行一次setState都会形成一个新的闭包，所以你改变的值只在你新的闭包中才能访问到。但是可使用useEffect+依赖的形式访问到这个值。

const useTimer = () => {
    
  const [time, setTime] = useState();
  const timeId = useRef(null);

  const start = (count) => {
    
    if (timeId.current) {
    
      clearTimer();
    }
    setTime(count);
    timeId.current = setInterval(() => {
    
      setTime((t) => --t);
    }, 1000);
  };

  const clearTimer = () => {
    
    clearInterval(timeId.current);
  };

  useEffect(() => {
    
    if (time <= 0) {
    
      clearTimer();
    }
  }, [time]);

  useEffect(() => clearTimer, []);

  return {
     time, start };
};

使用方法：

  const {
    time,start}= useTimer();
  start(3)
原网站

版权声明
本文为[大风起兮云飞扬丶]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_45932565/article/details/126250974

边栏推荐

猜你喜欢

随机推荐