当前位置 : 主页 > 网页制作 > React >

react按需加载

来源:互联网 收集:自由互联 发布时间:2021-06-15
### react按需引入两种方式 第一种 1 .下载插件 npm i --save react- loadable import Loadable from ‘ react-loadable ‘ // 定义一个加载组件 function loading(){ return divloading..../div } // 使用 let 变量 = Loadable
### 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(此处放路径)})
        
网友评论