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

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

在本文中，我们将学习如何使用 React 的 Hooks 和 Suspense 进行数据获取。首先，我们会搭建一个简单的后端服务器，然后使用 Effect Hook 和 State Hook 从服务器请求资源，接着使用 TanStack Query 库来完成相同的任务，最后介绍 React Suspense 和错误边界。

技术要求

• 安装较新版本的 Node.js，Node 包管理器（npm）通常会随 Node.js 一起安装。如需了解安装方法，请访问 Node.js 官方网站 。
• 推荐使用 Visual Studio Code（VS Code），可参考 VS Code 官方网站 进行安装。
• 本文使用的版本如下：
• Node.js v22.14.0
• npm v10.9.2
• Visual Studio Code v1.97.2

搭建简单的后端服务器

在实现请求之前，我们需要搭建一个服务器。这里我们使用 json-server 工具从 JSON 文件创建一个模拟的 REST API。

创建 db.json 文件

为了使用 json-server <