DEV Community ·

使用 React Query 构建动态信息流页面

💡 原文英文，约1400词，阅读约需5分钟。

📝

内容提要

本文讲解如何用 React Query 构建带有“无限滚动”和“返回顶部”功能的页面。首先，用 Vite 创建 React 应用，并安装 axios 和 react-query。使用 json-server 模拟后端，设置帖子数据。在用户接近页面底部时加载更多内容，使用 useInfiniteQuery 钩子分页获取帖子。实现“返回顶部”按钮，当有新帖子时显示，点击后返回顶部并同步最新内容。通过 useMutation 添加新帖子以测试功能。

🎯

关键要点

本文讲解如何用 React Query 构建带有“无限滚动”和“返回顶部”功能的页面。
首先，用 Vite 创建 React 应用，并安装 axios 和 react-query。
使用 json-server 模拟后端，设置帖子数据。
当用户接近页面底部时加载更多内容，使用 useInfiniteQuery 钩子分页获取帖子。
实现“返回顶部”按钮，当有新帖子时显示，点击后返回顶部并同步最新内容。
通过 useMutation 添加新帖子以测试功能。

🔎

延伸解读

无限滚动的实现细节

在实现无限滚动功能时，需注意用户的滚动位置与容器高度的比较。这一机制确保了在用户接近底部时自动加载更多内容，提升了用户体验。开发者应确保在数据加载时处理好状态，以避免用户在等待时的空白界面。

返回顶部按钮的逻辑

返回顶部按钮的显示与隐藏逻辑依赖于新帖子的添加。通过比较最新帖子与当前显示的第一条帖子，开发者可以动态控制按钮的可见性。这种设计不仅提升了用户体验，还能有效引导用户关注新内容。

使用 React Query 的优势

React Query 提供了强大的数据管理功能，简化了数据获取和缓存的过程。通过使用 useInfiniteQuery 和 useMutation，开发者可以轻松实现复杂的交互功能，如动态加载和数据更新，减少了手动管理状态的复杂性。

❓

延伸问答

如何使用 React Query 实现无限滚动功能？

通过使用 useInfiniteQuery 钩子，当用户接近页面底部时自动加载更多帖子。

如何创建一个返回顶部的按钮？

创建一个按钮，当有新帖子时显示，点击后返回顶部并同步最新内容。

如何设置模拟后端以支持 React 应用？

使用 json-server 模拟后端，提供假 API 端点供 React 应用使用。

如何在 React 中添加新帖子？

使用 useMutation 钩子来添加新帖子，并在成功后使缓存的帖子列表失效以更新数据。

如何检测用户是否接近页面底部？

通过比较当前滚动位置与容器总高度，判断用户是否接近底部。