在 React 16.6 版本之前，我们只能使用同步方式加载组件，在组件渲染时就将所有需加载的组件都加载出来，这种方式可能会导致网页加载速度变慢，用户需要等待很长时间才能看到页面。而在 React 16.6 版本以后，我们可以通过动态加载组件的方式，在用户操作时再加载组件，提高页面加载速度，优化用户体验。本文将介绍 React 16.6 以上版本动态加载组件的方法，并提供示例代码。
使用 React.lazy() 和 Suspense 组件实现动态加载组件
从 React 16.6 版本开始，我们可以使用 React.lazy() 和 Suspense 组件来实现动态加载组件。React.lazy() 函数能够让我们像使用普通组件一样来使用动态组件，而 Suspense 组件能够在动态组件加载完成前，显示一个加载页面或者错误页面，提高用户体验。下面是使用 React.lazy() 和 Suspense 组件实现动态加载组件的示例代码：
-- -------------------- ---- ------- ------ ------ - ----- -------- - ---- -------- ----- ---------------- - ------- -- ------------------------------ -------- ----- - ------ - ----- --------- --------------------------------- ----------------- -- ----------- ------ -- - ------ ------- ----展开代码
在这个示例代码中，我们先定义了一个名为 DynamicComponent 的动态组件。该组件被用来在用户操作时加载并渲染。接着，我们通过 React.lazy() 函数来实现动态加载 DynamicComponent 组件。在 App 组件中，我们通过 Suspense 组件来处理动态加载相关的操作。fallback 属性指定了在 DynamicComponent 组件加载完成前，显示的加载提示页面。在这个例子中，如果 DynamicComponent 组件没有及时加载完成，在页面上会显示一个“Loading...”的加载页面。
使用 import() 函数和 Promise 实现动态加载组件
在 React 16.6 版本之后，我们也可以通过使用 import() 函数和 Promise 对象来实现动态加载组件。下面是使用 import() 函数和 Promise 对象实现动态加载组件的示例代码：
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ----- --- ------- --------- - ----- - - ----------------- ---- - ----------- - -- -- - -------------------------------------------------- -- - --------------- ----------------- ------------------------ --- --- - -------- - ----- - ---------------- - - ----------- ------ - ----- ------- ------------------------------- ------- ------------------ - ---------------- -- ----------------- -- - ------ -- - - ------ ------- ----展开代码
在这个示例代码中，我们先定义了一个名为 DynamicComponent 的动态组件。通过点击 Load dynamic component 按钮，我们会触发 handleClick 函数。该函数通过 import() 函数来动态加载 DynamicComponent 组件。在 Promise 对象的回调函数中，我们会将 DynamicComponent 组件的 default 属性值赋值给 App 组件的 state 中的 DynamicComponent 属性。最后，我们在 App 渲染函数中，通过检查 DynamicComponent 的值是否存在来判断是否需要渲染该组件。
小结
React 16.6 以上版本提供了动态加载组件的功能，这使得我们可以更加灵活地使用组件，在用户操作时，动态地加载需要显示的组件，提高用户体验。本文介绍了使用 React.lazy() 和 Suspense 组件，以及使用 import() 函数和 Promise 对象实现动态加载组件的方法，并提供了示例代码供读者参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c6d6eecc0f7239cde36e0c
