suspense+React.lazy懒加载

React16 suspense还不能用于处理副作用实现异步请求数据再渲染,生产环境不成熟
异步模式:请求数据->渲染组件 等待异步操作结束才开始渲染组件 实现一个异步组件
传统模式:渲染组件->请求组件->再渲染组件
可以配合React.lazy实现懒加载,按需加载,减少首屏时间

例子:

const LazyComponent = React.lazy(() => import('./test.js'))

export default function Index(){
   return <Suspense fallback={<div>loading...</div>} >
       <LazyComponent />
   </Suspense>
}

React.lazy接收一个函数,这个函数需要动态的调用import,并且返回一个Promise,这个promise需要resolve一个default export 的React组件

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容