React.lazy和Suspense组合实现组件懒加载

Posted 2020-12-13 guolizhi

如何使用

React.lazy可以像渲染常规组件一样处理动态引入的组件

// 先定义一个Counter组件
export default function Counter (props) {
  return (
    <h1>count: {props.count}</h1>
  )
}

当我们使用这个Counter组件时，需要用一个Suspense来包裹，React.lazy接受一个函数作为参数，表明我们是动态引入了某个组件。引入时我们可以使用webpackChunkName来自定义打包之后的文件名。 需要注意的是如果一个组件是异步组件 ，那我们必须要用一个Suspense组件来包裹，并且传入一个fallback的函数作为参数，表示在加载动态组件的过程中，页面上如何显示。如果不进行以上操作，否则React会报错。

const Counter = React.lazy(() => import(/* webpackChunkName: "Counter" */ ‘./Counter‘))
function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>loading...</div>}>
        <Counter count="12" />
      </Suspense>
    </div>
  );
}