React Query 无限查询

date
Nov 5, 2025
slug
react-query-Infinite-query
status
Published
tags
React Query
summary
让用户在你的应用里"刷到停不下来"
type
Post
小伙伴们好！今天咱们聊聊那个让人又爱又恨的功能——无限滚动。

开场：一个让发明者后悔的发明

20年前，UI工程师 Aza Raskin 发明了无限滚动。如今他说："我很后悔。"
但用户说："真香！"
这就像发明了薯片的人后悔让大家变胖，但我们还是一片接一片停不下来... 😅

分页 vs 无限滚动：两种不同的"剧集观看模式"

传统分页：像看DVD

无限滚动：像刷抖音

这就是 useQuery 和 useInfiniteQuery 的根本区别！

useInfiniteQuery：你的无限滚动管家

普通的 useQuery 就像个老实人，你要第几页就给你第几页。
而 useInfiniteQuery 就像个贴心管家：
  • "主人，我帮您记住看到哪了"
  • "下一页？我这就去拿"
  • "所有看过的都给您拼好了"

基础实现：三个关键配置

魔法解释：getNextPageParam

这个函数接收三个参数，就像服务员告诉你：
  • lastPage："刚给您上的这道菜"（最后一页的数据）
  • allPages："您今天吃的所有菜"（所有页面的数组）
  • lastPageParam："刚才那道是第几道"（最后的页码）
你要返回："下一道上什么"（下一页的参数）

游标分页：更优雅的方式

有些 API 不用页码，而是用"游标"（就像书签）：

数据结构：多维数组的秘密

useInfiniteQuery 返回的数据结构很特别：
想要扁平化？JavaScript 来帮忙：

触发加载：两种方式

方式一：点击按钮加载

方式二：滚动自动加载（真·无限滚动）

这就像在商场电梯上放了个感应器——快到顶了自动加载下一段！

双向无限查询：聊天应用的福音

想象微信聊天记录，你可能从中间某条消息进入：
用户可以：
  • 向上滚动看历史（fetchPreviousPage）
  • 向下滚动看新消息（fetchNextPage）

重要：数据刷新的"一致性难题"

这是个大坑！看这个例子：

场景：删除了一条数据

React Query 的解决方案：全部重新获取

当触发刷新时，React Query 会：
  1. 重新获取第1页
  1. 用 getNextPageParam 计算第2页
  1. 获取第2页
  1. 继续...直到所有页面都刷新
这保证了数据一致性，但也意味着：
  • 如果你刷了100页，刷新要重新请求100次 😅

性能优化：限制缓存页数

这就像抖音的策略——你能一直往下刷，但不会真的把所有视频都存在手机里！

最佳实践总结

DO 应该做的

  1. 设置合理的触发点
    1. 提供加载状态反馈
      1. 处理没有更多数据的情况

        DON'T 不要做的

        1. 不要无限制地缓存（会爆内存）
        1. 不要忘记处理加载失败
        1. 不要在第一屏就触发自动加载（让用户主动滚动）

        道德思考：用户体验 vs 用户时间

        无限滚动就像薯片：
        • 用户："再刷最后一条"（3小时后...）
        • 产品："DAU又创新高！"
        • 开发："用户体验真好！"
        但记住 Aza Raskin 的后悔——我们在创造让人上瘾的东西。适度使用，给用户一个"停下来"的机会。

        总结

        useInfiniteQuery 让无限滚动实现变得简单：
        1. 自动管理分页：不用自己维护页码
        1. 数据自动拼接：多页数据自动组合
        1. 一致性保证：刷新时确保数据正确
        1. 灵活的触发方式：按钮或自动都行
        1. 性能优化：可限制缓存大小
        记住：好的无限滚动就像好的自助餐——让用户吃得开心，但别撑着！
        今天的"无底洞制造指南"就分享到这里！如果你曾经刷某个应用刷到凌晨3点，欢迎在评论区分享你的"上瘾"经历（以及如何戒掉的）！下期见！ 📱✨

        © 拾光 2025 - 2026

        粤ICP备2025472574号