React之lazy与Suspense

两者一般结合使用

语法

• lazy函数一般用来懒加载组件 点击
• Suspense组件有一个属性为fallback，在其包裹的组件为渲染出来之前，会调用fallback函数，可以包含多个懒加载的组件 点击

例子

import { Component, lazy, Suspense } from "react";

const Child = lazy(() => import("./Child"));

export default class Parent extends Component {
  render() {
    return (
      <>
        <h2>父组件</h2>
        <Suspense fallback={<div>loading....</div>}>
          <Child />
        </Suspense>
      </>
    );
  }
}

当我们打开页面的时候就会发现，在为加载组件页面之前，他会先显示了一下loading