React Query 避免加载状态
date
Nov 5, 2025
slug
react-query-avoid-loading-state
status
Published
tags
React Query
summary
让你的应用像"预知未来"一样流畅
type
Post
小伙伴们好！今天咱们聊聊如何让用户少看或不看加载动画。毕竟，没人喜欢盯着转圈圈看对吧？
开场白：加载动画的爱恨情仇
加载动画就像电梯里的音乐——必要但烦人。做得好，用户能接受；做不好，用户想摔手机。
今天我们要做一个博客应用，目标是：让加载动画消失！（或者至少让它不那么烦人）
基础版：传统的"转圈圈"体验
先看看没优化的版本：
用户体验：点击文章 → 看圈圈 → 文章出现
这就像去餐厅，每点一道菜都要等30分钟——能吃，但体验糟糕！
方案一：预取（Prefetch）- 未卜先知
核心思想：提前下单
预取就像是：
- 传统方式：客人坐下 → 点菜 → 等待 → 上菜
- 预取方式：看到客人走向餐桌 → 提前准备 → 客人坐下就上菜！
实现：鼠标悬停 = 准备数据
用户把鼠标放在链接上 = "我可能要点这个"
React Query："收到！我先去拿数据！"
优化：抽取配置
别重复自己（DRY原则）：
TypeScript 加持：类型安全
queryOptions 帮你检查拼写错误，妈妈再也不担心我写错属性名了！注意事项：别解构 queryClient！
这就像：
方案二：占位符数据 - 先给个"预览"
预取很好，但网络慢怎么办？我们需要 Plan B！
问题：部分数据 vs 完整数据
列表页有的数据：
详情页需要的数据：
我们已经有标题了，为啥不先显示它？
initialData 的陷阱
看起来完美？不！React Query 会说："哦，缓存里有数据了，我不用请求了！"
结果：用户只看到标题，文章内容永远不会加载！😱
这就像外卖员说："你不是已经有包装盒了吗？那我不送了！"
placeholderData 救场！
placeholderData 的特点：- 不会存入缓存
- 仍会触发真实请求
- 提供临时显示的数据
这就像餐厅先上小菜，主菜还在做！
使用 isPlaceholderData 优化体验
用户体验升级：
- 立即看到标题（不是白屏！）
- 看到"内容加载中"（知道在等什么）
- 内容到达，平滑替换
终极方案：预取 + 占位符
三重保障：
- 最佳情况：预取完成，无加载状态
- 一般情况：预取中，显示占位符
- 最差情况：没预取，至少有标题
TypeScript 用户注意
占位符数据必须兼容完整类型：
对比总结
方案 | 适用场景 | 优点 | 缺点 |
预取 | 用户行为可预测 | 完全避免加载 | 可能浪费流量 |
initialData | 有完整数据 | 立即显示 | 会阻止请求 |
placeholderData | 有部分数据 | 渐进增强 | 仍需请求 |
最佳实践
- 能预测就预取：鼠标悬停、路由即将切换
- 有啥显示啥：用 placeholderData 显示部分数据
- 别让用户猜：用 isPlaceholderData 显示合适的加载提示
- 统一管理：抽取 queryOptions 复用配置
记住：最好的加载动画是不需要加载动画！通过预取和占位符，让你的应用像读心术一样流畅！