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