React Query 分页

date
Nov 5, 2025
slug
react-query-pagination
status
Published
tags
React Query
summary
让你的数据像看电视剧一样"一集一集"来
type
Post
小伙伴们好！今天咱们聊聊分页——这个让大数据变得"平易近人"的神奇技术。

开场：为什么需要分页？

想象一下这两个场景：

场景一：小而美

场景二：巨无霸

这就像是：
  • 场景一：点一杯咖啡，立即到手
  • 场景二：点了整个咖啡店的库存，然后说"我其实只想喝一杯"

分页原理：数据的"连续剧模式"

分页就像看电视剧：
  • 一次给你一集（一页）
  • 想看下一集？点"下一页"
  • 想回看？点"上一页"
  • 不会一次性把整季砸给你
API 分页参数：
  • page：第几集（页）
  • per_page：每集多长（每页多少条）

基础实现：造个遥控器

先从最简单的开始：

状态管理：记住当前在看第几集

React Query 集成：让缓存知道这是第几页

缓存结构就像这样：

问题一：切换页面时的"白屏闪烁"

基础版的问题：
这就像换电视频道时的"雪花屏"——体验很差！

优化一：用旧数据占位

还记得上一课的 placeholderData 吗？这里它又派上用场了！
这行代码的意思是："新数据还没来？先显示上一页的，别让屏幕空着！"

加点视觉反馈

效果：
  • 点击"下一页"
  • 旧列表变半透明（告诉用户：数据在更新）
  • 新数据到达，恢复正常透明度
  • 没有白屏，没有跳动！

优化二：按钮的智能禁用

别让用户做无用功：
判断是否最后一页的小技巧：
  • 如果返回的数据不足一页（比如只有2条，而 PAGE_SIZE 是4）
  • 说明没有更多数据了！

终极优化：预加载下一页

这是真正的"黑科技"——提前偷偷加载下一页！
这就像是：
  • 你在看第3集
  • React Query 偷偷下载第4集
  • 你点"下一集"，瞬间播放！

完整的用户体验流程

  1. 首次加载：显示加载动画（没办法，第一次总要等）
  1. 切换页面：
      • 立即显示半透明的旧数据（无白屏）
      • 按钮禁用防误操作
      • 新数据到达，平滑切换
  1. 返回已访问页：瞬间显示（从缓存读取）
  1. 访问下一页：很可能瞬间显示（已预加载）

缓存可视化

最佳实践总结

DO 应该做的：

  1. 合理设置每页大小
    1. 记得重置页码
      1. 使用 placeholderData 避免闪烁
      1. 预加载提升体验

      DON'T 不要做的：

      1. 不要一次加载所有页（那就不叫分页了）
      1. 不要忘记处理边界（第一页、最后一页）
      1. 不要在加载时让用户乱点（禁用按钮）

      进阶思考

      无限滚动 vs 分页

      • 分页：用户有掌控感，知道自己在哪
      • 无限滚动：适合刷内容（抖音模式）

      虚拟滚动

      当单页数据还是太多时，考虑虚拟滚动（只渲染可见区域）

      总结

      React Query 的分页功能让我们能够：
      1. 缓存每一页：访问过的页面秒开
      1. 平滑切换：用 placeholderData 消除白屏
      1. 智能预加载：让用户感觉"这网站真快！"
      1. 优雅降级：网络慢也有好体验
      记住：好的分页就像好的电梯——用户几乎感觉不到在"翻页"，数据就自然地出现了！

      © 拾光 2025 - 2026

      粤ICP备2025472574号