10、使用 Hooks 和 React Suspense 进行数据获取

使用 Hooks 和 React Suspense 进行数据获取

在前端开发中，数据获取是一个常见且重要的任务。本文将介绍如何使用 React 的 Hooks 和 React Suspense 来实现数据获取，同时还会涉及到搭建简单的后端服务器、使用 TanStack Query 库等内容。

技术要求

在开始之前，需要满足以下技术要求：
- 安装较新版本的 Node.js，可从其 官方网站 获取安装信息。
- 安装 Node 包管理器（npm），通常会随 Node.js 一起安装。
- 建议使用 Visual Studio Code（VS Code）作为开发编辑器，可从 官方网站 获取安装信息。

本文使用的版本如下：
| 工具 | 版本 |
| ---- | ---- |
| Node.js | v22.14.0 |
| npm | v10.9.2 |
| Visual Studio Code | v1.97.2 |

虽然安装较新版本通常不会有问题，但某些步骤在新版本中可能会有所不同。如果遇到代码和步骤方面的问题，建议使用上述提到的版本。

搭建简单的后端服务器

在实现请求之前，需要先搭建一个服务器。为了专注于用户界面，我们将使用 json-server 工具从 JSON 文件创建一个模拟的