React中使用Suspense、lazy

先升级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(
            
                
            
        )
    }
}

test.js

import React from 'react'

export default () => (
这是一个组件
)

这样就可以实现一个懒加载的效果。
说明：
1、lazy(()=>import('./pages/test.js')),这个方法的回调中其实就是包含了一个动态 import，

lazy(()=>import('./pages/test.js').then((res)=> {
  console.log(res);
}))

[email protected]

这比我们以前去判断组件是否加载完，这是一个更便捷的方法。
2、Suspense 就是实现所谓的延迟加载效果，既然要实现延迟的效果，就必然 要有一个提醒的组件，这就是它的属性fallback，这个属性当然可以是一个组件。这比我们以前去写一个一个的loading组件便捷的很多。但是这个组件有个确定，目前只支持组件的加载，对于网络数据的请求，暂不支持。