随着前端项目规模的不断增加，JavaScript 应用程序也变得越来越复杂和庞大。对于用户来说，这可能会导致加载时间过长和应用程序变得缓慢。为了避免这种情况，React 提供了一种概念叫做“懒加载”。
懒加载是指在需要的时候再去加载某个模块，而不是在应用程序启动时立即加载所有模块。这种方法可以使应用程序变得更加轻量级、加载更快。React 也提供了一个非常简单的方法来实现懒加载模块，那就是使用 React.lazy 组件。
React.lazy 的使用
React.lazy 组件是从 React 16.6 版本开始引入的。该组件允许您延迟加载一个或多个组件。下面是一个简单的示例：
const OtherComponent = React.lazy(() => import('./OtherComponent'));在这个例子中，我们正在导入 OtherComponent 组件，但使用 React.lazy 将它们包装起来，React.lazy 会返回一个新的组件类，其中包含我们想要使用的组件。
请注意，React.lazy 只支持默认导出（export default）。
React.lazy 懒加载示例
让我们看一下如何在 React 应用程序中使用 React.lazy 组件。我们将创建一个简单的应用程序，在不使用懒加载时加载所有组件。然后，我们将使用懒加载模块来加载其中一个组件。
首先，我们需要创建一个新的 React 应用程序。在终端中运行以下命令：
npx create-react-app my-app
接下来，我们要创建两个组件：
Home.js
-- -------------------- ---- -------
------ ----- ---- --------
----- ---- - -- -- -
------ -
-----
----------- -- --- ---- ---------
------
--
--
------ ------- -----About.js
-- -------------------- ---- -------
------ ----- ---- --------
----- ----- - -- -- -
------ -
-----
----------- -- --- ----- ---------
------
--
--
------ ------- ------现在，我们将这些组件用于创建我们的应用程序。
App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- ---------
------ ----- ---- ----------
----- --- - -- -- -
------ -
-----
----- --
------ --
------
--
--
------ ------- ----这个简单的应用程序有两个组件：Home 和 About。现在，我们将使用 React.lazy 懒加载 About 组件。
App.js
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
------ ---- ---- ---------
----- ----- - ------- -- -------------------
----- --- - -- -- -
------ -
-----
----- --
--------- ---------------------------------
------ --
-----------
------
--
--
------ ------- ----在这个例子中，我们使用 React.lazy 和 Suspense 组件来创建动态加载的组件。Suspense 组件包装懒加载组件，并在加载组件时提供一个可选的回退 UI，以便在组件被加载之前展示。
现在，我们已经完成了这个简单的 React 应用程序。当加载应用程序时，首先会加载 Home 组件，而 About 组件则只有在渲染时才会被加载。
结论
懒加载对于分解庞大的应用程序非常有用。使用 React.lazy 和 Suspense 组件，您可以轻松地创建动态加载的组件。这个功能能够确保您的应用程序始终保持高效，并且只加载用户需要浏览的页面。
希望您学到了新知识，并可以在您的下一个项目中使用 React.lazy 懒加载模块实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3e44ef40ec5a964e59e7d