React Query 轮询

date

Nov 5, 2025

slug

react-query-polling

status

Published

🚀 先复习一下基础知识

React Query 的四大天王原则：

缓存优先：有货就先给你，管它新不新鲜

默认即过期：staleTime = 0，刚拿到就算"过期"

过期就更新：数据过期了？有触发就偷偷更新

四大触发器：查询键变了、新组件上场、切回标签页、网络重连

这些原则让 React Query 用起来很爽，但是... 总有些特殊场景它们搞不定。

❓ 问题：老板要看实时数据！

想象你在给老板做一个销售仪表板。老板要求：我就盯着看，不切换，不点页面，数据也要更新！

这时候，你需要的是自动定时更新——也就是"轮询"（Polling）！

`refetchInterval`：你的自动刷新器

React Query 提供了 refetchInterval 来实现轮询：

这就像是：

普通模式：老板按 F5 才刷新

轮询模式：页面自己每 5 秒按一次 F5

智能计时器：不会"抢拍子"

refetchInterval 的计时器很聪明。如果你手动刷新了，或者其他触发器起作用了，计时器会重置。

原理： React Query 会确保在执行完上一个请求后，再等待指定的时间间隔才发起下一个请求，避免请求堆积。

🎯 高级玩法：条件轮询

有时候，你不想一直轮询下去。比如：等待一个任务完成。

场景：等待计算完成

假设后端在处理一个耗时任务，直到 finished: true 才算完成。

实现：动态控制轮询

你可以给 refetchInterval 传入一个函数，而不是固定的毫秒数：

这个函数会根据当前数据状态，返回 false 停止轮询，或返回毫秒数继续。

🌍 实际应用场景

轮询特别适合这些场景：

场景	`refetchInterval` 示例	策略说明
实时仪表板	`1000` (1秒)	对实时性要求较高的展示数据，如股价。
任务状态监控	`2000` (2秒)	检查耗时操作的进度条、视频转码等。
消息通知	`30000` (30秒)	定期检查是否有未读消息。

🔋 省电小贴士

默认情况下，refetchInterval 在页面标签切换到后台时会自动暂停。

⚠️ 注意事项和最佳实践

性能考虑

❌ 不好： refetchInterval: 100 (太频繁，服务器会哭)。

✅ 好： refetchInterval: 5000 (5秒，合理的间隔)。

轮询 vs WebSocket

方案	特点	适合场景
轮询 (Polling)	单向通信，定期询问，简单易实现。	仪表板、任务进度、通知提醒（实时性要求不高）。
WebSocket	双向通信，服务器主动推送，资源消耗高。	实时聊天、多人协作、在线游戏（实时性要求极高）。

经验之谈：优先使用轮询，当性能或实时性要求达到瓶颈时，再考虑 WebSocket。

📋 总结

React Query 的轮询功能就像给你的应用装了个"自动刷新器"：

基础轮询：通过设置 refetchInterval: 毫秒数 实现定时刷新。

智能重置：手动刷新会重置计时器。

条件轮询：传入函数，根据数据状态动态返回 false 或毫秒数，实现任务完成后自动停止。

合理使用：找到服务器压力和用户体验之间的甜蜜点。

记住：轮询就像定闹钟，设置合理的间隔很重要。太频繁会累死服务器，太稀疏用户体验差。找到那个甜蜜点，你的应用就能像瑞士手表一样精准运行！⏰