React 是一种流行的 JavaScript 库，用于构建用户界面。在大型应用程序中，将代码拆分成小块以提高性能和加载时间非常重要。React 有两个主要的解决方案来实现此目标：React.lazy() 和 react-loadable。但是，自 React 16.6 版本起，一个新的 API 被引入了——React.Suspense，它可以更好地管理代码拆分和延迟加载。
什么是 React.Suspense？
React.Suspense 是 React 16.6 中引入的新功能，它使得组件异步加载变得更加容易。通过在组件树中添加一个 Suspense 组件，React 可以暂停挂起渲染，直到所有异步操作都完成为止。这意味着您可以轻松地将所有异步加载的组件打包在一起，并在需要时进行加载。
为什么选择 React.Suspense？
相比之前的解决方案，React.Suspense 具有很多优点：
- 更简单：使用
React.Suspense不需要任何额外的库或配置，只需使用原生的 React API 即可。 - 更直观：
React.Suspense的 API 相对来说更加简洁和直观，不需要编写大量的代码。 - 更灵活：
React.Suspense允许您混合同步和异步组件。这意味着，如果您的应用程序中只有部分组件需要异步加载，您可以仍然使用同步加载进行其余部分的开发。
如何使用 React.Suspense？
使用 React.Suspense 非常简单。以下是一个示例：
------ ------ - -------- - ---- --------
------ ----------- ---- ----------------
------ -------------- ---- -------------------
-------- ----- -
------ -
-----
------ --------
--------- ------------------------- ----
------------ --
-----------
------
--
-在此示例中，当 <MyComponent /> 组件正在加载时，<Suspense> 组件将渲染 fallback 属性所指定的组件，即 <LoadingSpinner />。一旦 <MyComponent /> 加载完成，<Suspense> 将继续正常渲染 <MyComponent />。
替换 react-loadable
相比之前的解决方案 react-loadable，React.Suspense 更容易使用。
以下是一个使用 react-loadable 的示例：
------ -------- ---- -----------------
----- ----------- - ----------
------- -- -- ------------------------
-------- ---------------
---
-------- ----- -
------ -
-----
------ --------
------------ --
------
--
-在此示例中，MyComponent 是使用 Loadable 函数创建的。此函数将异步加载 <MyComponent /> 并在加载时显示 loading 属性指定的组件。
以下是同样功能的示例代码，使用 React.Suspense 实现：
------ ------ - -------- - ---- --------
------ ----------- ---- ----------------
------ -------------- ---- -------------------
-------- ----- -
------ -
-----
------ --------
--------- ------------------------- ----
------------ --
-----------
------
--
-这里只需要使用一个 Suspense 组件即可完成与 react-loadable 相同的效果。
结论
React.Suspense 是 React 中新引入的功能，它可以更好地管理代码拆分和延迟加载。相比之前的解决方案，React.Suspense 更加简单、
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/50278