React 怎么封装一个带轮询和自动重试的数据请求 Hook？

Question

仓乃文 · Accepted Answer

实际项目中经常需要轮询接口获取最新数据，且网络异常时自动重试。封装一个 usePolling Hook 统一管理定时器、重试计数和错误状态，避免每个组件重复写轮询逻辑。

完整实现：
```javascript
function usePolling(url, { interval = 5000, maxRetries = 3, retryDelay = 1000 } = {}) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [retryCount, setRetryCount] = useState(0);
  const controllerRef = useRef(null);

useEffect(() => {
    fetchData();
    const id = setInterval(fetchData, interval);  // 定时轮询
    return () => {
      clearInterval(id);
      controllerRef.current?.abort();
    };
  }, [fetchData, interval]);

return { data, error, retryCount, refetch: fetchData };
}
```

补充说明：
- 页面不可见时应暂停轮询，用 document.visibilitychange 事件控制
- AbortController 确保新请求发出时旧请求被取消，避免竞态
- 指数退避重试（retryDelay * 2^retryCount）比固定延迟更友好
- 生产环境推荐用 React Query 的 refetchInterval 配置，功能更完善
- 组件卸载时清理函数会清除定时器和取消请求，防止内存泄漏