使用hooks实现倒计时的方法还是很容易的, 关键在于怎样去优化它 一下方法都是逐渐优化的
第一种方法
使用两个useState,useEffect
第二种方法
使用一个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>;
}