构建前端 CRUD 应用起初很容易，但随着功能的增加，复杂性会迅速提升。对于每个 API 端点，都需要处理状态管理、同步、缓存和错误处理。本文将介绍一个名为 React Query 的库，以及它如何帮助解决所有这些问题。该库自称是“缺失的数据获取库”，为你的 React 应用提供“服务器状态管理”。
我们将使用一个完整的 React Query 演示项目来学习该库提供的核心功能。然后，你就可以将这些知识应用到自己的项目中。首先，在开始项目设置之前，让我们先了解一些内容。
关键要点
cacheTime 和 staleTime 等配置选项通过管理数据新鲜度和缓存持续时间来优化性能。关于 React Query 3
React Query 是由 Tanner Linsey 创建的一个开源项目。最新的主要版本 React Query 3 于 2020 年 12 月正式发布。在这个新版本中，添加了新功能并改进了现有功能。
需要注意的是，与之前非常流行的 React Query 2.x 版本相比，它有一些重大更改。有一个迁移指南清楚地解释了这些更改，因为你可能会遇到很多针对旧版本编写的过时教程。
新版本提供了巨大的改进，许多之前报告的错误都已解决。3.x 版本虽然已准备好用于生产环境，但仍在不断开发中，并定期修复新发现的错误。
前提条件
本文面向中高级前端开发者，他们已经掌握了以下方面的基本技能和知识：
在你的开发机器环境中，你需要设置以下内容：
关于项目
我们将分析的演示项目是一个 React 前端应用程序，它将使用 React Query 获取 REST JSON API 服务器提供的数据。该应用程序仅由五个页面组成，展示了 React Query 提供的功能。这些功能包括：
React Query 提供了更多功能，但本文篇幅有限，无法一一介绍。以下是我们将使用的应用程序的预览：
项目设置
在我们开始设置之前，我认为最好先简要了解一下项目中使用的其他依赖项。这些包括：
要在你自己的机器上设置 React Query 演示应用程序，请执行以下说明：
# 克隆项目 git clone git@github.com:sitepoint-editors/react-query-demo.git # 导航到项目目录 cd react-query-demo # 安装包依赖项 npm install # 为 json-server 设置数据库文件 cp api/sample.db.json api/db.json # 启动 json-server npm run json-server
json-server 使用的数据库文件包含一个用户数组。当你执行 npm run json-server 时，一个伪造的 API 服务器将在端口 3004 上启动。执行 GET 请求将产生以下示例 JSON 响应：
[
{
"id": 1,
"first_name": "Siffre",
"last_name": "Timm",
"email": "stimmes0@nasa.govz",
"gender": "Male"
},
{
"id": 2,
"first_name": "Fonzie",
"last_name": "Coggen",
"email": "fcoggen1@weather.com",
"gender": "Female"
},
{
"id": 3,
"first_name": "Shell",
"last_name": "Kos",
"email": "skos2@prweb.com",
"gender": "Female"
}
]接下来，启动将运行前端代码的开发服务器：
# 在另一个终端中，启动 React 开发服务器 npm run dev
转到你的浏览器并打开 http://localhost:3000 以访问应用程序。你应该会有与上面预览中相同的体验。请确保执行以下任务，以便彻底探索应用程序的功能：
完成所有上述任务后，我们可以开始对项目进行分解。请查看项目结构，以便了解每个组件和视图的位置。我将在本文中提供这些组件的简化版本，以便你了解在项目中使用 React Query 的基础知识。
安装 React Query
可以使用以下命令在空白或现有 React 项目中安装 React Query：
# 克隆项目 git clone git@github.com:sitepoint-editors/react-query-demo.git # 导航到项目目录 cd react-query-demo # 安装包依赖项 npm install # 为 json-server 设置数据库文件 cp api/sample.db.json api/db.json # 启动 json-server npm run json-server
该包包含你所需的一切——包括 Devtools 实用程序功能，我们将在后面的部分中探讨。安装包后，你需要更新你的顶级组件——App.jsx——如下所示：
[
{
"id": 1,
"first_name": "Siffre",
"last_name": "Timm",
"email": "stimmes0@nasa.govz",
"gender": "Male"
},
{
"id": 2,
"first_name": "Fonzie",
"last_name": "Coggen",
"email": "fcoggen1@weather.com",
"gender": "Female"
},
{
"id": 3,
"first_name": "Shell",
"last_name": "Kos",
"email": "skos2@prweb.com",
"gender": "Female"
}
]QueryClientProvider 的任何子组件都将能够访问 React Query 库提供的 hook。我们将在本文中使用的 hook 是：
useQueryuseInfiniteQueryuseMutationuseQueryClient以下是一个更新后的（简化版）App.jsx，其中包含我们将使用的子视图：
# 在另一个终端中，启动 React 开发服务器 npm run dev
(后续内容，请根据你的要求继续翻译剩余部分，包括UI组件、基本查询、分页查询、无限查询、Mutations等章节。)
以上是REACT查询3：获取和管理数据的指南的详细内容。更多信息请关注PHP中文网其他相关文章！
