ReactSuspense的尝鲜者，处理前后端IO异步操作

Suspense简介Suspense主要用于解决网络IO问题。早在2018年的React16.6.0就发布了，它的相关用法有的比较成熟，有的比较不稳定，甚至经历过重命名和删除：在render函数中，我们可以写一个异步请求，请求数据如果有缓存，react会从我们的缓存中读取缓存，直接进行正常的渲染。如果没有缓存，则会抛出异常。这个例外是一个承诺。当promise完成（请求数据完成），react会继续回到原来的render（实际上是重新执行render一次），完全同步渲染数据，没有任何异步回调。如果你还没看懂这是什么意思，那我简单的表达成下面这句话：调用render函数->发现有异步请求->悬停，等待异步请求结果->重新渲染显示数据看起来很神奇，用同步的方式异步写，没有yield/async/await，简直让人哭笑不得。这样做的好处自然是我们的思维逻辑非常简单明了，没有回调，也没有其他的东西。不得不说，看起来很优雅，很牛逼。Suspense的主要使用场景是在前端开发中。经常有这样的要求。在加载某个界面的时候，如果界面的资源比较多，前端处理数据也会比较费时间，加载比较慢。这时候我们就需要使用一个Load动画或者提示来让交互更加友好。1、React18之前的做法：在React18之前，我们要实现上面的效果。请求数据或加载新组件的时机一般在componentDidMount中。State中需要一个标志变量来记录请求数据的状态，然后手动改变这个状态，很不方便。代码如下：classAppextendsComponent{state={isLoading:false,}componentDidMount(){this.setState({data:null,isLoading:true,});axios.get('/api/getData').then((data)=>{this.setState({data,isLoading:false,});});}render(){返回this.state.loading？'正在加载...':();}}二。React18之后：1.React.lazyReact.lazy()允许你定义一个动态加载的组件。这有助于减少第一次渲染时未使用的捆绑包和延迟加载组件的大小constSomeComponent=React.lazy(()=>import('./SomeComponent'));渲染惰性组件依赖于这个组件渲染树上层\组件。这就是指定加载指标的方式。2.React.SuspenseReact.Suspense可以指定一个加载指示器（loadingindicator），以防其组件树中的某些子组件还没有准备好渲染：//ThiscomponentisdynamicallyloadedconstOtherComponent=React.lazy(()=>import('./OtherComponent'));functionMyComponent(){return(//显示组件直到加载OtherComponent}>

);}Suspense尝鲜者：配合前端表格组件处理前后端IO异步操作。由于没有后端逻辑，前端表格组件主要用于前端对Excel和Grid表格数据的在线编辑和展示，利用Suspense的技术特性，可以轻松实现前端的异步操作-端和后端IO：constPureSpread=React.lazy(()=>import('./components/pureSpread'))constSpreadDesigner=React.lazy(()=>import('./components/designer'))const{Content,Header}=LayoutconstApp=()=>(loading...