17、React中Suspense组件的使用与异步资源处理

React中Suspense组件的使用与异步资源处理

1. 延迟加载组件

在React应用中，有时用户需要等待代码库完全下载后，组件才能进行初始渲染。为了优化这一过程，我们可以使用 React.lazy 来延迟加载主组件，而不是在初始时就导入它。

1.1 使用 React.lazy 延迟加载组件

示例代码如下：

const Main = React.lazy(() => import("./Main"));

这里我们告诉React，在 Main 组件初始渲染之前，先不要加载其代码库。当组件渲染时，会使用 import 函数进行导入。

1.2 运行时导入代码的状态

运行时导入代码就像从互联网加载其他资源一样，会经历以下状态：
- 请求待处理 ：JavaScript代码的请求处于等待状态。
- 成功 ：返回一个JavaScript文件。
- 失败 ：发生错误。

1.3 使用 Suspense 组件处理延迟加载

为了让用户知道代码正在加载，我们可以使用 Suspense 组件。 Suspense 组件的工作方式与 <