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('此处放路径')})
        

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM