React.lazy使用详解

发布时间：2023-05-21

一、React.lazyload

React.lazy 是一个能够让你动态导入组件的函数。这要求你的 React 代码是基于 ES6 的，且支持动态 import()。React.lazy 实质上是 React 官方使用 Suspense 配合 lazy 实现的惰性加载组件功能，这个优化可以使应用整体体积变小，加载速度更快，用户可以更快地看到应用的内容。使用了 React.lazy 的技术后，可以让应用的首屏加载速度更快一点，优化用户体验。而且，当你的组件属于懒加载的时候，你也不需要再自己维护加载状态和错误状态（个别情况还是需要，这个后面会讲）。 使用 React.lazy 和 Suspense 还有一个需要注意的地方，就是由于 LazyComponents 是异步的，所以它们自有的 Render 函数的作用域是异步的，所以如果你想在 LazyComponents 之间共享一些状态，并在同步方式下渲染，你需要共享这些状态的作用域一样是异步的。

二、React.lazyload 加载成功怎么知道

我们知道，React.lazy 的作用是可以在需要的时候才会导入依赖的组件，虽然这种方式确实可以减轻打包后的文件大小，但是这样在加载完成之前，页面上就先出现了全白的页面，不是太好的体验。React.lazy 和 React.Suspense 是 React V16.6 中推出的新特性，当组件正在加载的时候，我们可以使用 fallback 的方式做出一些特殊的显示，告诉用户正在加载中，等后端返回数据之后，组件才会 render 出来。

import React, { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./MyComponent'));
const App = () => (
  <div>
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  </div>
);
推荐文章