在前端开发中,常常会应用轮询(setInterval),比方后端异步数据处理,须要定时查问最新状态。然而在用React Hook进行轮询操作时,可能会发现setInterval没有那么轻松驾驭,明天笔者就来谈谈在我的项目开发中是如何解决setInterval调用问题的,以及如何更加优雅的应用setInterval。
问题的引入
先从一个简略的例子开始,为了便于叙述,本文中的案例用一个计数定时器来演示。
import React, { useEffect, useState } from "react";
export default function IntervalExp() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => clearInterval(timer);
}, []);
return (
<div>
<p>以后计数:{count}</p>
</div>
);
}
首先应用useState定义了一个count变量,而后在useEffect中,定义了一个名为timer的定时器,并在定时器中执行count+1操作,并在组件卸载时革除定时器。
现实状态下,count会执行+1操作,并一直的递增。但理论并非如此,count在变为1当前,将不再有任何变动。起因很简略,useEffect中因为没有将依赖的count对象增加到依赖对象数组中,所以它每次拿到的都是老的count对象,也就是0。
办法一:增加依赖数组
import React, { useEffect, useState } from "react";
export default function IntervalExp() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(count + 1);
}, 1000);
console.log("更新了", timer);
return () => clearInterval(timer);
}, [count]);
return (
<div>
<p>以后计数{count}</p>
</div>
);
}
当把count对象退出到依赖数组当前,能够发现定时器当初能够失常工作了。然而留神这里有个坑,在return的时候,即组件卸载的时候,肯定要做清理操作,否则你的定时器会执行的越来越快,因为新的定时器会一直生成,但老的定时器却没有清理。
然而这种形式完满吗?并不然,如果定时器操作的数据蕴含父组件传递的props,或者是其余的state,都须要加到依赖数组中,这样做不仅不美观,而且容易出错。同时,这种形式还有个问题,就是定时器要在每次变动时要从新生成,这必然也会有很高的性能损耗。
办法二:不增加依赖数组的形式(useRef)
useRef是官网的hook,应用useRef定义的对象有个current对象,是能够存储数据的,而且存储的数据能够被批改,并在组件的每一次渲染中,都能从current中拿到最新的数据。基于ref的这一个性,实现一个名为useInterval的自定义hook。
import { useEffect, useRef } from "react";
export const useInterval = (cb: Function, time = 1000) => {
const cbRef = useRef<Function>();
useEffect(() => {
cbRef.current = cb;
});
useEffect(() => {
const callback = () => {
cbRef.current?.();
};
const timer = setInterval(() => {
callback();
}, time);
return () => clearInterval(timer);
}, []);
};
在这个自定义hook中,有回调函数和轮询工夫两个参数。应用useEffect把最新的回调函数赋值给ref.current,这样在第二个useEffect中就能从ref.current上拿到最新的callback,而后在定时器中执行它。
在我的项目中如何应用呢?
useInterval(() => {
setCount(count + 1);
}, 1000);
只需引入自定义hook,并依照下面的格局调用即可。
办法三:更高级的方法(useReducer)☆☆☆
回头看第一个例子,为什么在useEffect中不增加count就无奈实现想要的定时器成果呢,说白了是因为读取了state的数据,而又因为闭包起因拿不到最新的count数据,所以导致interval操作失败。其实借助useReducer就能够在不读取count的状况更新count数据。
import React, { useEffect, useReducer } from "react";
function reducer(state: { count: number }) {
return { count: state.count + 1 };
}
export default function IntervalExp() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
useEffect(() => {
setInterval(() => {
dispatch();
}, 1000);
}, []);
return (
<div>
<p>以后计数{state.count}</p>
</div>
);
}
在这个案例中,应用useReducer定义了一个简略的count操作方法,在interval中,通过调用dispatch办法,胜利更新了count数据。useReducer在须要操作多个state的简单业务逻辑场景下能够应用,尽管定义起来麻烦,然而能够实现将组件中的业务逻辑抽离进去,写出更加易于保护的代码,而且在目前这个场景中,useReducer比下面两个形式解决的更加优雅,也是本文举荐的形式。
总结
hook是React中十分有魅力的一个创造,灵便应用hook能够写出更有品质的代码。作者写本文的目标也是因为在理论开发中遇到了这一问题,因而心愿本文能够帮忙到其余开发者。
参考文章:usestate中的回调函数_React Hooks 中应用 setInterval 的若干办法