先升级react的版本，一定要在16.6以后的版本才可以使用。
main.js
import React, { Component, Suspense, lazy } from 'react';
let TestComp = lazy(()=>import('./test.js'))
export default class Main extends Component {
render() {
return(
<Suspense fallback="正在加载中...">
<TestComp />
</Suspense>
)
}
}
test.js
import React from 'react'
export default () => (<p>这是一个组件</p>)
这样就可以实现一个懒加载的效果。
说明：
1、lazy(()=>import('./pages/test.js')),这个方法的回调中其实就是包含了一个动态 import，
lazy(()=>import('./pages/test.js').then((res)=> {
console.log(res);
}))
WX20190530-233421@2x.png
这比我们以前去判断组件是否加载完，这是一个更便捷的方法。
2、Suspense 就是实现所谓的延迟加载效果，既然要实现延迟的效果，就必然 要有一个提醒的组件，这就是它的属性fallback，这个属性当然可以是一个组件。这比我们以前去写一个一个的loading组件便捷的很多。但是这个组件有个确定，目前只支持组件的加载，对于网络数据的请求，暂不支持。
