react项目中suepense的简单使用（lazy）及懒加载原理

import React, {Components, Suspense} from 'react';

React的Suspense功能，简单说就是让组件渲染遇到需要异步操作的时候，可以无缝地“悬停”（suspense）一下，等到这个异步操作有结果的时候，再无缝地继续下去。
简单来说项目中组件加载需要耗时，在组件未完全渲染出来这一段时间，如果不管不问显然不是明智之举；可以在这段时间体现交互的过程，做一些组件加载完成前做的事，这有利于优化页面。

return (
	<div>
		<Suspense fallback={ReactNode}>
			<BrowserRouter>
				<Router path='' component={} />
			</BrowserRouter>
		</Suspense>
	</div>
)

fallback可以接受react组件 --> 作为要在页面渲染完成之前展示的组件;
总结：Suspense可优化页面交互,增加占位符或者loading…这简化了我们考虑应用程序加载状态的方式

代码分割

suspense的使用还涉及到另一个功能的实现

项目中import的第三方包会在webpack打包后打包成一个大文件，如果项目比较大，那么初始化时加载的文件就会很大，从而影响加载速率
React,lazy()方法是用来对项目代码进行分割,懒加载用的.只有当组件被加载,内部的资源才会导入（动态导入）;
Suspense和React.lazy()需要结合在一起用,否则会报错;

除此之外了解原理也会事半功倍

export default function(loading){

    return class extends Component {

        constructor ( props ) {

            super ( props );

            this.state={

                Com:null

            };

        };
        //即使是同步的话执行的也是promise.resolve这个方法，将同步代码包装一层，进行同步

        //await后面接收的是值或promise

        async componentWillMount(){

            let Com=await loading();  //依次执行，只有一个await往下走，Com是有值的

            this.setState({

                Com:Com.default?Com.default:null

            });

        };

        render () {

            let Com=this.state.Com;

            return Com?<Com/>:null;

        };

    };
}
//使用时
import loading from './loading'
const Demo = loading(() => import('./../components/Demo'))