需求:React Hooks useEffect使用定时器,每3秒更新一次值
代码如下:
javascript
const [MyV, setMyV] = useState(0);
useEffect(() => {
// 每隔3s,增加1
const interval = setInterval(() => {
setMyV(MyV+1);
}, 3 * 1000);
return () => {
clearInterval(interval);
};
}, []);
实际,页面展示MyV 一直是 1。 因为setInterval会行程一个闭包。此闭包内用到的的上下文的state都是创建时的初始值。因此 setMyV(MyV+1);
时,MyV一直都是 0
优化方法1 :setMyV的函数形式
适用于此案例,只涉及一个state的变更
原理分析:
setMyV((v) => v + 1);
里的v不属于闭包内部的变量,而是一个形参,因此不会一直使用0+1,而是最新的数据+1
javascript
const interval = setInterval(() => {
setMyV((v) => v + 1);
}, 3 * 1000);
优化方法2 :使用ref
适用于复杂案例,或许会涉及多个state的变更、甚至更多代码、方法、state的关联调用
原理分析:useRef 返回
一个具有单个 current 属性 的 ref 对象
,并初始化为你提供的 初始值。且 在后续useRef 将返回
相同的对象
。因此,在此setInterval的闭包里,它只会关注myRef这个ref对象指向的地址 ,不再变化即可。myRef内部的current属性千变万化,以及myRef.current内部的其他属性用到的其它state (此处指MyV)也都是最新的。
javascript
const [MyV, setMyV] = useState(0);
const myRef: any = useRef();
myRef.current = () => {
setMyV(MyV + 1);
//只要是在这里访问、处理的,永远是最新的数据
//...
};
useEffect(() => {
// 每隔3s,增加1
const interval = setInterval(() => {
myRef.current();
}, 3 * 1000);
return () => {
clearInterval(interval);
};
}, []);