lazy内置方法 Suspense内置组件

• lazy是React提供的懒（动态）加载组件的方法，React.lazy()

• 能减少打包体积、延迟加载首屏不需要渲染的组件

• 依赖内置组件Suspense：给lazy加上loading指示器组件的一个容器组件

• Suspense目前只和lazy配合实现组件等待加载指示器的功能

• React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。所以要用类返回render而不是函数

• index.jsx

import Loading from './loading'
const MyMain = React.lazy(() => import('./main.jsx'))
function App() {
   
    return (
        <div>
            {
   /* 注意 fallback这里是组件 */}
            <React.Suspense fallback={
   <Loading />}>
                <MyMain />
            </React.Suspense>
        </div