验证码倒计时自定义hooks

需要注意：虽然定时器中在不停的调用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 };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

使用方法：

  const {time,start}= useTimer();
  start(3)
1
2