用hooks写一个倒计时方法

2,289

使用hooks实现倒计时的方法还是很容易的, 关键在于怎样去优化它 一下方法都是逐渐优化的

第一种方法

使用两个useState,useEffect

1628133298554_2EDB4A10-2645-4fb0-A004-57E017D81D9A.png

第二种方法

使用一个useState

import React, { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(5);
  useEffect(() => {
    const newTimer = setInterval(() => {
      if (count > 0) {
        setCount((c) => c - 1);
      }
    }, 1000);
    return () => clearInterval(newTimer);
  }, [count]);

  return <div>{count}</div>;
}

第三种方法

因为数据每秒更新一次 导致setInterval每秒都会创建一次 这里使用setTimeout会更好

import React, { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(5);
  useEffect(() => {
    const newTimer = setTimeout(() => {
      if (count > 0) {
        setCount((c) => c - 1);
      }
    }, 1000);
    return () => clearInterval(newTimer);
  }, [count]);

  return <div>{count}</div>;
}

第四种方法

如果还是想使用setInterval 就需要保证useEffect只执行一次,所以第二个参数需要传入空数组,可是传入空数组因为使用了useState定义的变量却没有依赖,会导致有个一个警告,而且每次获取的count都有可能是旧值,解决方案就是在useEffect中不使用count就好

import React, { useState, useEffect } from "react";
export default function App() {
    const [count, setCount] = useState(5);
    useEffect(() => {
        const newTimer = setInterval(() => {
            setCount((c) => {
                if (c !== 0) {
                    return c - 1;
                }
                clearInterval(newTimer);
                return 0;
             });
    }, 1000);
}, []);

return <div>{count}</div>;

}