顶级 React 数据获取库
在 React 中使用 XMLHttpRequest 和 Fetch API 获取数据固然可行,但需要编写大量样板代码。使用数据获取库是更佳选择,因为以下解决方案能够简化项目中的数据获取逻辑,并提供众多强大的内置功能。
热门图书馆
Axios(99k ⭐)-> 一个基于 Promise 的同构 HTTP 客户端,可以使用同一套代码库在浏览器和 NodeJS 环境下运行。服务器端使用原生 NodeJS http模块,浏览器端使用 XMLHttpRequests。
React Query(33k ⭐)-> 一个开箱即用的库,无需任何配置即可处理数据获取、缓存、后台更新和过期数据。它与后端无关,因此您可以将 React Query 与任何异步数据获取客户端一起使用。
SWR(26k ⭐)-> 一个由 Next.js 团队创建的用于数据获取的 React Hooks 库,轻量级且与后端无关。
Apollo Client(18k ⭐)-> 一个功能全面的 JavaScript 状态管理库,支持使用 GraphQL 管理本地和远程数据。您可以使用它来获取、缓存和修改应用程序数据,同时自动更新 UI。
Relay(17k ⭐)-> 由 Facebook 开发的用于 React 的生产就绪 GraphQL 客户端,从一开始就以高性能为设计目标,基于组件的本地数据依赖项声明。
urql(8k ⭐)-> 一个高度可定制且功能全面的 GraphQL 客户端,随着业务增长,您可以添加规范化缓存等功能。
RTK Query ( 9k ⭐) -> Redux Toolkit 包中包含的一个可选插件,其功能建立在 Redux Toolkit 中的其他 API 之上。
数据获取
Web应用程序通常需要从服务器获取数据才能显示。它们通常还需要更新这些数据,并将更新后的数据发送到服务器,并保持客户端缓存的数据与服务器上的数据同步。而如今应用程序中使用的其他行为的实现,则使这一切变得更加复杂:
- 跟踪加载状态以便显示用户界面加载指示器
- 避免对相同数据进行重复请求
- 乐观的更新旨在提升用户界面速度。
- 在用户与用户界面交互时管理缓存生命周期
共同特征
- 与传输方式和协议无关(REST、GraphQL 等)
- 缓存、重新获取、轮询、实时
- 分页、加载更多、无限滚动
- 请求和响应拦截
- 重新验证重点,网络恢复
- 性能优化
- 请求取消