如何在React中优雅的使用Interval（轮询）
在前端开发中，经常会使用轮询（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可以写出更有品质的代码。作者写本文的目的也是因为在实际开发中遇到了这一问题，因此希望本文可以帮助到其他开发者。