本篇通译自 https://blog.devgenius.io/how-to-better-poll-apis-in-react-312bddc604a4
作者: Zachary Lee
替代 setInterval，间隔调用异步方法的更好解决方案
在 Web 开发中，我们可能需要不断地轮询后端 API 以获取页面上要更新的最新数据。虽然 WebSocket 是更好的选择，但在某些情况下轮询也可以。
那么如何在 React 中做到这一点呢？
setInterval
我们可以使用 setInterval 连续执行 async 方法，这可能是最简单的解决方案。
const App = () => {
const [origin, setOrigin] = useState('');
const updateState = useCallback(async () => {
const response = await fetch('https://httpbin.org/get');
const data = await response.json();
setOrigin(data?.origin ?? '');
}, []);
useEffect(() => {
setInterval(updateState, 3000);
}, [updateState]);
return <main>{`Your origin is: ${origin}`}</main>;
};
但是这个解决方案有一些问题。首先setInterval是不准确的, 二是粒度不易控制，造成浪费。例如，对于一个响应时间较长的 API 请求，上一次响应的内容在页面上还没有更新，下一个请求会重新发送。
这并不理想。
setTimeout + async…await
我们可以使用setTimeoutand async...await来实现一个自定义钩子：
const useIntervalAsync = (fn: () => Promise<unknown>, ms: number) => {
const timeout = useRef<number>();
const run = useCallback(async () => {
await fn();
timeout.current = window.setTimeout(run, ms);
}, [fn, ms]);
useEffect(() => {
run();
return () => {
window.clearTimeout(timeout.current);
};
}, [run]);
};
接下来，它是这样使用的：
const App = () => {
const [origin, setOrigin] = useState('');
const updateState = useCallback(async () => {
const response = await fetch('https://httpbin.org/get');
const data = await response.json();
setOrigin(data?.origin ?? '');
}, []);
useIntervalAsync(updateState, 3000);
return <main>{`Your origin is: ${origin}`}</main>;
};
此解决方案使用async...await和setTimeout来确保异步任务在上一个异步任务完成后再执行
但是异步任务总是很棘手。想象一个案例：如果使用这个钩子的组件在等待异步响应时被卸载，那么这个定时任务将一直在后台运行。这是一个严重的错误，我们可以通过记录挂载状态来避免这种情况。
const useIntervalAsync = (fn: () => Promise<unknown>, ms: number) => {
const timeout = useRef<number>();
const mountedRef = useRef(false);
const run = useCallback(async () => {
await fn();
if (mountedRef.current) {
timeout.current = window.setTimeout(run, ms);
}
}, [fn, ms]);
useEffect(() => {
mountedRef.current = true;
run();
return () => {
mountedRef.current = false;
window.clearTimeout(timeout.current);
};
}, [run]);
};
可以通过记录mountedRef. 很简单，对，但其实很实用，当然你也可以把mounted状态做成自定义hook，方便复用。例如useMountedState下面：
import { useCallback, useEffect, useRef } from 'react';
const useMountedState = () => {
const mountedRef = useRef(false);
const getState = useCallback(() => mountedRef.current, []);
useEffect(() => {
mountedRef.current = true;
return () => {
mountedRef.current = false;
};
}, []);
return getState;
};
export default useMountedState;
复杂案例
在一些比较复杂的情况下，我们可能需要主动更新页面信息。例如，在一些交互之后，我希望updateState立即调用以更新页面上的最新数据。
当然我可以updateState直接调用，但是下一个定时任务可能会执行的很快，很浪费。所以我们可以添加一些特性来useIntervalAsync让它支持刷新。
import { useCallback, useEffect, useRef } from 'react';
const useIntervalAsync = <R = unknown>(fn: () => Promise<R>, ms: number) => {
const runningCount = useRef(0);
const timeout = useRef<number>();
const mountedRef = useRef(false);
const next = useCallback(
(handler: TimerHandler) => {
if (mountedRef.current && runningCount.current === 0) {
timeout.current = window.setTimeout(handler, ms);
}
},
[ms],
);
const run = useCallback(async () => {
runningCount.current += 1;
const result = await fn();
runningCount.current -= 1;
next(run);
return result;
}, [fn, next]);
useEffect(() => {
mountedRef.current = true;
run();
return () => {
mountedRef.current = false;
window.clearTimeout(timeout.current);
};
}, [run]);
const flush = useCallback(() => {
window.clearTimeout(timeout.current);
return run();
}, [run]);
return flush;
};
export default useIntervalAsync;
可以看到我们已经添加了flush方法。它的内部逻辑是取消下一个定时任务，run直接执行该方法。
但是我们添加了一个runningCount，这是为了什么？
想象一个案例：当钩子在内部run以正常的逻辑间隔执行函数时，而异步响应正在等待解决，flush被外部调用以期望立即执行，然后run将再次执行。这是因为最后一个run还没有解决，最新的计划任务还没有创建，所以不能取消。
也就是说，run此时有两个函数正在执行，虽然这并不关键，但是如果我们仍然使用前面的逻辑，那么这两个run在解决后会创建两个定时任务。这会导致更大的浪费。
所以我们可以使用runningCount来记录当前的执行次数，并在函数中保证只有在是下一个任务时才创建新的定时任务。runningCount 0
另外，通过 TypeScript 的泛型，我们可以很方便的包装原有的函数以适应更多的情况。一个简单的例子：
const App = () => {
const [origin, setOrigin] = useState('');
const updateState = useCallback(async () => {
const response = await fetch('https://httpbin.org/get');
const data = await response.json();
setOrigin(data?.origin ?? '');
}, []);
const update = useIntervalAsync(updateState, 3000);
return (
<main>
<div>{`Your origin is: ${origin}`}</div>
<button onClick={update}>update</button>
</main>
);
};
本文由mdnice多平台发布
