计时器:
组价加载开始倒计时; 组件销毁需要清除倒计时,防止内存泄漏;
需要用到hooks的状态管理 useState 来及时更新ui; 用到setInterval来实现计时功能;
错误写法:
const [count, setCount] = useState(6); // 2 倒计时
useEffect(()=>{
// 3 创建倒计时
timer = setInterval(() => {
console.log(`count`, count)
// 因为是闭包,所以每次拿到的都是原来的数据,
// 所以每次使用setContent 需要使用函数来获取当前的 count
setCount(count-1)
}, 1000)
// 4 组件销毁 清楚倒计时
return ()=>{
clearInterval(timer)
}
},[])
正确写法一:
import { useEffect, useState } from "react"
let timer = null; // 1 计时器
const Reject = (props) =>{
const [count, setCount] = useState(6); // 2 倒计时
useEffect(()=>{
// 3 创建倒计时
timer = setInterval(() => {
setCount(n => {
if (n) { // 3.1 倒计时每秒减少1
return n - 1
} else { // 3.2 倒计时为0时,清空倒计时
clearInterval(timer)
return 0
}
});
}, 1000)
// 4 组件销毁 清楚倒计时
return ()=>{
clearInterval(timer)
}
},[])
return <div>
页面不存在,{count}s后返回;
</div>
}
export default Reject;
正确写法二、单独提出去个函数也行
import { useEffect, useState } from "react"
let timer = null; // 1 计时器
const Reject = (props) =>{
const [count, setCount] = useState(6); // 2 倒计时
useEffect(()=>{
setTimer() // 调用函数
// 4 组件销毁 清楚倒计时
return ()=>{
clearInterval(timer)
}
},[])
const setTimer = () =>{
// 3 创建倒计时
timer = setInterval(() => {
setCount(n => {
if (n) { // 3.1 倒计时每秒减少1
return n - 1
} else { // 3.2 倒计时为0时,清空倒计时
clearInterval(timer)
return 0
}
});
}, 1000)
}
return <div>
页面不存在,{count}s后返回;
</div>
}
export default Reject;