关于前端:React懒加载

2次阅读

共计 788 个字符，预计需要花费 2 分钟才能阅读完成。

React.lazy()和 \<Suspense> 都是 React 16.6 版本中退出的新个性，用于动静导入组件并实现懒加载。它们的实现原理如下：

React.lazy()

React.lazy()函数能够动静导入一个组件，被导入的组件将会被 Webpack 打包为一个独自的代码块，这个代码块将在组件首次渲染时进行加载。React.lazy()的语法如下：

const SomeComponent = React.lazy(() => import('./SomeComponent'));

这里的 import()函数会返回一个 Promise 对象 ，React.lazy() 将会在组件渲染时异步地加载这个组件，直到它被渲染为止。这样，在应用程序初始化时不会同时加载所有的组件，而是提早加载那些不须要立刻渲染的组件，从而进步了应用程序的初始加载速度。

\<Suspense>

当应用 React.lazy()时，须要应用 \<Suspense> 组件来解决组件的加载，以防止在短少必要代码块时呈现闪动等不良体验。\<Suspense> 是一个新的组件，它容许在组件加载实现之前显示一个 fallback 元素。它的语法如下：

<Suspense fallback={<div>Loading...</div>}>
  <SomeComponent />
</Suspense>

在这里，fallback 元素是指在组件加载过程中显示的内容，能够是加载动画、提示信息等等。当被封装的组件被加载胜利时，fallback 元素将主动被替换为理论的组件内容。

总之，React.lazy()和 \<Suspense> 的实现原理是基于 Webpack 打包技术和 React 元素的渲染机制的。应用动静导入和懒加载技术，将应用程序划分为多个小的代码块，从而进步应用程序的初始加载速度和性能。\<Suspense> 则帮忙解决短少必要代码块时的交互体验，进步用户体验。

正文完