REACT查询3：获取和管理数据的指南

使用 React Query 简化前端 CRUD 应用的数据获取

构建前端 CRUD 应用起初很容易，但随着功能的增加，复杂性会迅速提升。对于每个 API 端点，都需要处理状态管理、同步、缓存和错误处理。本文将介绍一个名为 React Query 的库，以及它如何帮助解决所有这些问题。该库自称是“缺失的数据获取库”，为你的 React 应用提供“服务器状态管理”。

我们将使用一个完整的 React Query 演示项目来学习该库提供的核心功能。然后，你就可以将这些知识应用到自己的项目中。首先，在开始项目设置之前，让我们先了解一些内容。

关键要点

• React Query 3 简化了 React 应用中的状态管理和数据获取，高效地处理缓存、同步和错误管理。
• 该库适用于熟悉 React、React Router 和 REST API 的中高级开发者。
• React Query 3 在 2.x 版本的基础上增加了新功能和改进，并为升级用户提供了迁移指南。
• 演示项目中演示的关键功能包括基本查询、分页查询和无限查询，以及创建、更新和删除操作。
• React Query 的 Devtools 实用程序通过实时可视化内部状态和流程来辅助调试。
• cacheTime 和 staleTime 等配置选项通过管理数据新鲜度和缓存持续时间来优化性能。
• 该库支持无限滚动和复杂状态依赖等高级场景，增强了用户体验和开发者体验。

关于 React Query 3

React Query 是由 Tanner Linsey 创建的一个开源项目。最新的主要版本 React Query 3 于 2020 年 12 月正式发布。在这个新版本中，添加了新功能并改进了现有功能。

需要注意的是，与之前非常流行的 React Query 2.x 版本相比，它有一些重大更改。有一个迁移指南清楚地解释了这些更改，因为你可能会遇到很多针对旧版本编写的过时教程。

新版本提供了巨大的改进，许多之前报告的错误都已解决。3.x 版本虽然已准备好用于生产环境，但仍在不断开发中，并定期修复新发现的错误。

前提条件

本文面向中高级前端开发者，他们已经掌握了以下方面的基本技能和知识：

• React
• React Router
• React Hooks
• REST API 数据获取

在你的开发机器环境中，你需要设置以下内容：

• Node.js
• Git
• REST 客户端，例如 Postman、Insomnia 或 VS Code 的 REST 扩展

关于项目

我们将分析的演示项目是一个 React 前端应用程序，它将使用 React Query 获取 REST JSON API 服务器提供的数据。该应用程序仅由五个页面组成，展示了 React Query 提供的功能。这些功能包括：

• 基本查询
• 分页查询
• 无限查询
• 创建操作
• 更新操作
• 删除操作

React Query 提供了更多功能，但本文篇幅有限，无法一一介绍。以下是我们将使用的应用程序的预览：

项目设置

在我们开始设置之前，我认为最好先简要了解一下项目中使用的其他依赖项。这些包括：

• Vite：一个非常快速的构建工具
• WindiCSS：一个非常快速的 Tailwind CSS 编译器
• React Hook Form：一个使用 React hook 的表单构建器和验证库
• React Modal：一个可访问的模态组件
• Axios：一个基于 Promise 的浏览器 HTTP 客户端
• JSON Server：一个完整的伪造 REST API 服务器

要在你自己的机器上设置 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 是：

• useQuery
• useInfiniteQuery
• useMutation
• useQueryClient

以下是一个更新后的（简化版）App.jsx，其中包含我们将使用的子视图：

# 在另一个终端中，启动 React 开发服务器
npm run dev

(后续内容，请根据你的要求继续翻译剩余部分，包括UI组件、基本查询、分页查询、无限查询、Mutations等章节。)

以上是REACT查询3：获取和管理数据的指南的详细内容。更多信息请关注PHP中文网其他相关文章！