React.lazy 和 Suspense 是 React 16.6 中引入的新特性，它们可以帮助我们更好地实现代码分割和懒加载，提高应用程序的性能。在本文中，我们将深入探讨 React.lazy 和 Suspense 的最佳实践，并给出一些实用的示例代码。
React.lazy 和 Suspense 是什么？
React.lazy 是一个代码分割的技术，它允许我们将组件按需加载，而不是一次性加载所有组件。这样可以减少应用程序的初始加载时间，提高用户体验。React.lazy 接受一个返回组件的函数作为参数，这个函数只有在组件被渲染时才会被调用。
Suspense 是一个可以在组件加载时显示一个加载器的 React 组件。它可以与 React.lazy 一起使用来实现懒加载。当一个组件被 React.lazy 加载时，如果它还没有加载完成，Suspense 将会显示一个指定的加载器，直到组件加载完成后再将其渲染出来。
如何使用 React.lazy 和 Suspense？
使用 React.lazy 和 Suspense 非常简单。我们只需要将需要懒加载的组件包装在 React.lazy 中，并将其作为一个组件渲染。如果需要在组件加载时显示一个加载器，我们可以将 Suspense 组件作为组件树的父级，并为其设置一个 fallback 属性，这个属性指定了在组件加载时显示的加载器。
下面是一个使用 React.lazy 和 Suspense 的示例代码：
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
----- ------------- - ------- -- ---------------------------
-------- ----- -
------ -
-----
--------- ---------------------------------
-------------- --
-----------
------
--
-
------ ------- ----在上面的代码中，我们通过调用 lazy() 方法来创建一个懒加载组件。然后，我们将这个组件包装在 Suspense 组件中，并为其设置一个 fallback 属性，这个属性指定了在组件加载时显示的加载器。最后，我们将 Suspense 组件作为根组件渲染到页面中。
最佳实践
1. 只在必要时使用 React.lazy
虽然 React.lazy 可以帮助我们实现代码分割和懒加载，但并不是所有组件都适合使用它。通常，我们只需要对那些较大的组件进行懒加载，而不是对所有组件都进行懒加载。因为如果我们对所有组件都进行懒加载，可能会增加代码的复杂度，降低应用程序的性能。
2. 将懒加载组件分组
当我们使用 React.lazy 时，我们可以将多个懒加载组件分组，并将它们按需加载。这样可以进一步减少应用程序的初始加载时间。
下面是一个示例代码，演示了如何将多个懒加载组件分组：
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
----- -------------- - ------- -- ----------------------------
----- -------------- - ------- -- ----------------------------
-------- ----- -
------ -
-----
--------- ---------------------------------
-----
--------------- --
--------------- --
------
-----------
------
--
-
------ ------- ----在上面的代码中，我们将两个懒加载组件包装在一个 div 元素中，并将这个 div 元素作为一个懒加载组件渲染。
3. 使用预加载来提高性能
React.lazy 还提供了一个预加载功能，可以在组件被渲染之前预加载组件。这样可以进一步提高应用程序的性能。
下面是一个示例代码，演示了如何使用预加载功能：
-- -------------------- ---- -------
------ ------ - ----- -------- - ---- --------
----- ------------- - ------- -- ---------------------------
-------- ----- -
----- ------ -------- - ----------------
----- ----------- - -- -- -
------------------------
--------------
--
------ -
-----
------- -------------------------- ------------------
----- -- -
--------- ---------------------------------
-------------- --
-----------
--
------
--
-
------ ------- ----在上面的代码中，我们通过调用 LazyComponent.preload() 方法来预加载组件。然后，我们在按钮被点击时显示这个组件。
结论
React.lazy 和 Suspense 是 React 16.6 中引入的新特性，它们可以帮助我们更好地实现代码分割和懒加载，提高应用程序的性能。在使用 React.lazy 和 Suspense 时，我们需要注意只在必要时使用它们，将懒加载组件分组，并使用预加载来进一步提高性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675b563233771ef380867017