React 是一个流行的前端框架，它提供了一种简单的方式来构建交互式用户界面。React 使用单页应用程序（SPA）的概念来创建应用程序，这意味着所有代码都加载到客户端并在需要时直接使用。然而，对于大型应用程序，这可能会导致性能问题，因为需要加载大量 JavaScript 代码。为了解决这个问题，React 引入了一个新的特性：Suspense。
什么是 Suspense？
Suspense 是一种 React 组件，它允许我们延迟渲染部分应用程序，直到需要时才加载它们。这个特性常常用于代码分离，以避免在加载应用程序时一次性把所有代码都加载到客户端。实际上，代码分离是一种将 JavaScript 代码拆分为较小文件的技术，以便在客户端加载代码时能减少开销和提高性能。Suspense 将子组件挂起直到满足一定的条件，例如获取数据或编译代码后，才会将它们呈现给用户。
如何使用 Suspense？
React 提供了一个叫作 React.lazy 的函数，可以与 Suspense 一同使用，用于加载动态 import() 中的组件。这个函数返回一个组件，该组件渲染动态 import() 加载的组件。为了避免在组件呈现之前加载大量 JavaScript 代码，我们可以将组件与其依赖项打包为一个单独的块。使用这个特性，我们可以在应用程序中加载多个块，而不是每个块都在应用程序加载时加载所有块。
下面是一个示例应用程序，它使用 React.lazy 和 Suspense 来实现代码分离：
------ ------ - -------- - ---- --------
----- ------------- - ------------- -- ---------------------------
-------- ----- -
------ -
-----
---------- -----------
--------- ---------------------------------
-------------- --
-----------
------
--
-在这个示例中，我们使用 React.lazy 来动态加载 ./LazyComponent 组件。当加载组件时，我们使用 Suspense 包装它，以保证在加载时显示一个加载指示器。如果加载组件成功，它将以正常方式呈现。否则，它将显示 fallback 属性中传入的组件。
提高性能
代码拆分可以改善应用程序的性能，因为只有在需要时才会加载代码。虽然 Suspense 可以帮助我们实现代码分离，但是要确保支持它的浏览器和运行时环境正确配置。如果你使用的是旧版本的 JavaScript 运行时，如 Internet Explorer，那么应该注意在执行 import() 的时候需要使用具有 ES6 模块支持的打包工具，例如 webpack。另外，如果你的应用程序使用服务器端渲染，你也需要在服务器上对 Suspense 进行正确配置。
结论
React 中的 Suspense 特性可以帮助我们实现代码分离，以减轻应用程序加载过多 JavaScript 代码的性能问题。它是一种洁净且易于实现的代码拆分技术。虽然 Suspense 很有用，但也需要依据特定环境和需求来正确配置和使用。通过使用 Suspense，可以提高应用程序的性能，并帮助我们实现更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672af3e1ddd3a70eb6d13a25