React中路由懒加载与Suspense

1、React中使用懒加载的方法：

const Test = React.lazy(() => import("./Test"))

2、Suspense的作用：

以上Test是通过路由懒加载出来的, 所以在页面渲染时可能会产生延迟。Suspense可优化页面交互,增加占位符或者loading...

import  React, { Component, Suspense } from "react"
const Test1 = React.lazy(()=>import("./Test1"))
const Test2 = React.lazy(()=>import("./Test1"))

function MyComponent(){
  return(
    <div>
      <Suspense fallback={<div>loading...</div>}> 
        <section>   // suspense可以包含多个需要懒加载的文件
            <Test1/> 
            <Test2/>
        </section>
      </Suspense>
    </div>
  )
} 

1、suspense可以包含多个需要懒加载的文件
2、fallback属性可以接受在组件加载过程中你要展示的任何react元素