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组件