suspense+React.lazy懒加载

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

例子:

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

export default function Index(){
   return loading...
} > }

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

你可能感兴趣的:(suspense+React.lazy懒加载)