react按需加载

### react按需引入

两种方式
    
    第一种
    
    1.下载插件
        
        npm i --save react-loadable
        
        import Loadable from 'react-loadable'
        
        //定义一个加载组件
        function loading(){
            return <div>loading....</div>
        }
        
        //使用
        let 变量 =Loadable({
            loading:loading,
            loader:()=>import('此处放路径')
        })
        
        
    第二种  实现第一种方法的封装,通过高阶组件进行返回新的组件进行按需加载
    
    1.import React,{Component} from 'react'
        
        //定义一个加载组件
        function loading(){
            return <div>loading....</div>
        }
        
        //params是传进来的对象
        function Load(params){
            return class extends Component{
                state={
                    Com:params.loading
                }
                render(){
                    let {Com}=this.state;
                    return <Com  {...this.props}/>
                }
                componentDidMount(){
                    params.loaders().then(res=>{
                        this.setState({
                            Com:res.default
                        })
                        
                    })
                }
            }
        }
        
        //调用
        let 变量 =Load({loading:loading,loaders:()=>import('此处放路径')})
        

 

posted on 2019-07-05 14:21  伊云  阅读(864)  评论(0编辑  收藏  举报