React 是一个流行的 JavaScript 库，用于构建用户界面。在 React 应用程序中，组件是构建块。组件可以嵌套在其他组件中，形成树形结构。React 应用程序可能包含数百个组件，这些组件可能会导致应用程序的加载时间过长，从而影响用户体验。因此，React 提供了一种异步加载组件的方法，以提高应用程序的性能。
为什么需要异步加载组件？
在 React 应用程序中，组件是静态的，它们被编译成 JavaScript 代码并打包到单个文件中。如果应用程序包含大量组件，那么打包后的文件可能会很大，从而导致应用程序的加载时间过长。这会影响用户体验，因为用户需要等待很长时间才能看到应用程序的内容。
为了避免这个问题，React 提供了一种异步加载组件的方法。异步加载组件意味着组件不会在应用程序加载时立即加载，而是在需要时才加载。这样可以减少应用程序的加载时间，提高应用程序的性能和用户体验。
如何异步加载组件？
React 提供了两种异步加载组件的方法：动态 import 和 React.lazy。
动态 import
动态 import 是一种在运行时异步加载 JavaScript 模块的方法。它可以用于异步加载组件。使用动态 import 异步加载组件的步骤如下：
- 创建一个异步函数，该函数返回一个 import() 方法的调用，该调用加载组件的模块。
- 将异步函数传递给 React.lazy 方法，该方法返回一个新的组件。
- 在组件树中使用新的组件。
下面是一个使用动态 import 异步加载组件的示例：
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
----- -------------- - ------- -- ----------------------------
-------- ----- -
------ -
-----
--------- ---------------------------------
--------------- --
-----------
------
--
-
------ ------- ----在上面的示例中，我们定义了一个名为 AsyncComponent 的组件，并使用 lazy 方法将其包装。然后，我们在组件树中使用 Suspense 组件，该组件显示一个加载指示器，直到异步加载完成。最后，我们将 AsyncComponent 组件作为 Suspense 组件的子组件。
React.lazy
React.lazy 是一个用于异步加载组件的高阶组件。它可以用于异步加载组件。使用 React.lazy 异步加载组件的步骤如下：
- 使用 React.lazy 方法包装组件。
- 在组件树中使用新的组件。
下面是一个使用 React.lazy 异步加载组件的示例：
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
----- -------------- - ------- -- ----------------------------
-------- ----- -
------ -
-----
--------- ---------------------------------
--------------- --
-----------
------
--
-
------ ------- ----在上面的示例中，我们使用 lazy 方法将 AsyncComponent 组件包装起来。然后，我们在组件树中使用 Suspense 组件，该组件显示一个加载指示器，直到异步加载完成。最后，我们将 AsyncComponent 组件作为 Suspense 组件的子组件。
总结
异步加载组件是一种提高 React 应用程序性能的方法。React 提供了两种异步加载组件的方法：动态 import 和 React.lazy。使用这些方法可以减少应用程序的加载时间，提高应用程序的性能和用户体验。
示例代码
下面是一个完整的示例代码，演示如何使用 React.lazy 异步加载组件：
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
------ -------- ---- ------------
----- -------------- - ------- -- ----------------------------
-------- ----- -
------ -
-----
---------- -----------
--------- ---------------------------------
--------------- --
-----------
------
--
-
-------------------- --- ---------------------------------在上面的示例代码中，我们定义了一个名为 AsyncComponent 的组件，并使用 lazy 方法将其包装。然后，我们在组件树中使用 Suspense 组件，该组件显示一个加载指示器，直到异步加载完成。最后，我们将 App 组件渲染到页面上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6513a17e95b1f8cacdc0fe04