react 异步组件加载lazy与Suspense

场景，组件异步渲染期间懒加载，组件加载失败情况

1. lazy需要与Suspense配合使用
2. Suspense填充状态
3. fallback请求组件期间还没全部加载完成时显示的内容，需要传入组件实例 ，例如传入组件 ，例如 fallback={<loading/>}
4. getDerivedStateFromError /componentDidCatch 错误捕获

   import React, { lazy, Suspense, Component } from 'react';  //lazy异步加载 Suspense填充状态
   // const LazyTemplate = lazy(() => import('./lazy/1.jsx'))
   //异步加载组件  在network中可以看到curstomName.chunk.js请求，也就是加载的组件
   const LazyTemplate = lazy(() => import(/*webpackChunkName:'curstomName'*/'./index2'))
   class SuspenseDemo extends Component {
       state = {
           errorStatus: false
       }
       static getDerivedStateFromError() {
           return {
               errorStatus: true
           }
       }
       //同上方式
       // componentDidCatch() {
       //   this.setState({
       //     errorStatus: true
       //   })
       // }
       render() {
           if (this.state.errorStatus) {
               return <div>异步请求失败</div>
           }
           return (
               <div>
                   <Suspense fallback={<div>loading</div>}> <LazyTemplate></LazyTemplate></Suspense>
               </div >
           );
       }
   }
   export default SuspenseDemo;

   index2

   import React, { Component, } from 'react'
   export default function SuspenseDemo2() {
       return <div>异步请求组件</div>
   }