在 React 开发中，动态加载组件是非常常见的需求，特别是在应用程序中需要根据用户操作或程序状态动态加载组件时。在本文中，我们将介绍在 React 中动态加载组件的几种方法，并提供示例代码。
使用 React.lazy
自 React 16.6 版本起，React 提供了一个懒加载组件的方式，通过引入 React.lazy 来实现，这个 API 可以让我们减小使用大量组件而导致的首屏打开缓慢的问题，只有在需要时才加载组件。
使用 React.lazy 的方式非常简单，只需要使用 React.lazy 方法来加载我们需要的组件，然后使用类似于动态引入的方式来使用它。下面是一个简单的示例：
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
----- ------------- - ------- -- ---------------------------
-------- ----- -
------ -
-----
--------- ---------------------------------
-------------- --
-----------
------
--
-
------ ------- ----在上面的代码中，我们使用 React.lazy 来加载 ./LazyComponent 组件，并使用 Suspense 组件来包裹，fallback 属性指示 LazyComponent 加载过程中的展示内容，可以是一个加载动画或一个过渡占位符。
需要注意的是，使用 React.lazy 时，需要符合以下条件：
React.lazy只能用于默认导出组件。- 需要使用
Suspense组件来包裹动态加载组件。 - 渲染前未加载的组件组件需要在 React 组件层级上先声明，否则会导致加载失败。
使用高阶组件方式
使用高阶组件可以非常方便地实现动态加载组件的功能。下面是一个通用的高阶组件示例，我们可以直接在此基础上进行扩展：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- -------------- - ----------------- -- -
------ ----- ------- --------- -
----- - -
---------- -----
--
------------------- -
---------------------------- -- -
--------------- ---------- ----------- ---
---
-
-------- -
----- - - ---------------------
------ - - -- --------------- -- - -----
-
--
--
------ ------- ---------------使用这个高阶组件时，只需按如下方式加载组件：
import AsyncComponent from './AsyncComponent';
const SomeComponent = AsyncComponent(() => import('./SomeComponent'));在上面的代码中，我们先声明了一个高阶组件 AsyncComponent，然后通过传入 import() 方法来动态加载组件。渲染时，组件会自动按需加载，最后生成的 SomeComponent 可以跟其他扩展过的组件一样使用。
结论
本篇文章介绍了两种在 React 中动态加载组件的方式，它们都可以很好地满足我们的需求。在实际开发中，我们可以根据具体情况来选择哪种方式使用。使用懒加载组件 API 可以减少代码量，使用高阶组件方式可以更加灵活，根据自身的开发经验、项目要求来选用最适合自己的方式。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f1377b6fbf960197379d96