在 React.js 单页面应用中，页面初始化时需要加载很多组件和静态资源，这会增加页面的加载时间和渲染时的复杂度，影响用户体验。为了优化页面性能和用户体验，我们可以采用组件的懒加载技术。
组件的懒加载指的是在组件被需要时才进行加载，而不是在应用初始化时就全部加载，从而减少页面的繁重负载。下面我们就介绍一下 React.js SPA 应用中如何优雅地懒加载组件。
基本概念
在 React.js 中，我们可以通过异步组件来实现懒加载，异步组件是指在需要的时候才从服务器或本地加载组件代码。异步组件可以提高页面的加载速度，从而使用户可以更快地访问页面。
React.js 中的异步组件使用 React.lazy() 函数进行定义，该函数需要传入一个返回 import() 方法的函数，import() 方法可以动态地加载组件代码。具体定义代码如下所示：
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
----- ------------- - ------- -- ---------------------------
-------- ----- -
------ -
-----
--------- ---------------------------------
-------------- --
-----------
------
--
-
------ ------- ----在上述代码中，React.lazy() 函数定义了一个名为 LazyComponent 的异步组件，该组件的代码在需要时才会被加载。
在组件渲染时，我们需要将该组件包裹在 Suspense 组件中，Suspense 组件的 fallback 属性用于指定在组件加载完成之前显示的内容。在上述代码中，我们设置显示的内容为 "Loading..."。
方式一：基于路由的懒加载
在 React.js SPA 应用中，通常采用基于路由的懒加载方式，即根据用户页面访问的路由来加载相应的组件。
我们可以使用 react-router-dom 库中的 lazy() 函数和 Suspense 组件来实现基于路由的懒加载，具体实现代码如下：
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
------ - ------ ------ - ---- -------------------
----- ---- - ------- -- ------------------
----- ----- - ------- -- -------------------
----- ------- - ------- -- ---------------------
-------- ----- -
------ -
-----
--------- ---------------------------------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
-----------
------
--
-
------ ------- ----在上述代码中，我们通过 Route 组件来定义应用的路由，并使用 lazy() 函数来定义异步组件，当用户访问相应的路由时，会动态加载相应的组件。
方式二：手动触发的懒加载
除了基于路由的懒加载方式，我们还可以手动触发组件的异步加载。比如，在某些情况下，用户通过操作或滚动页面来触发组件的加载。这时，我们需要手动创建一个异步组件，然后在代码中触发它的加载。
具体实现代码如下：
-- -------------------- ---- -------
------ ------ - --------- ---------- ----- -------- - ---- --------
----- ------------- - ------- -- ---------------------------
-------- ----- -
----- --------- ----------- - ----------------
------------ -- -
----- ------------ - -- -- -
-- --------------- - ---- -
-----------------
-
--
--------------------------------- --------------
------ -- -- -
------------------------------------ --------------
--
-- ----
----- ----------- - -- -- -
-----------------
--
------ -
-----
------- -------------------------- ------------------
-------- -- -
--------- ---------------------------------
-------------- --
-----------
--
------
--
-
------ ------- ----在上述代码中，我们将异步组件 LazyComponent 包裹在 Suspense 组件中，使用 useState 来控制组件的加载，当用户点击按钮或滚动页面时，会触发组件的加载。
总结
组件的懒加载是 React.js 应用中优化性能的一种重要方式，可以有效缩短页面加载时间和优化用户体验。
在 React.js 中，我们可以使用 React.lazy() 函数和 Suspense 组件来实现组件的懒加载，以及通过基于路由和手动触发等方式来实现组件的异步加载。
我们在实际开发中要根据具体的业务场景和用户使用行为来选择合适的组件懒加载方式，以实现最佳的应用性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d025948841e9894b4d8fb