加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react按需加载

发布时间:2020-12-15 16:16:43 所属栏目:百科 来源:网络整理
导读:### react按需引入两种方式 第一种 1 .下载插件 npm i --save react- loadable import Loadable from ‘ react-loadable ‘ // 定义一个加载组件 function loading(){ return divloading..../div } // 使用 let 变量 = Loadable({ loading:loading,loader:()
### 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(此处放路径)})
        

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读