React高阶组件

高阶组件

增强组件的功能
本身是一个函数
参数是一个组件，返回值也是一个组件
传入一个组件返回一个组件

非侵入  不需要组件内部状态
侵入    需要组件内部状态

高阶函数

增强函数的功能
传入一个函数返回一个函数

Vuex,redux 跨组件通讯

Vuex事件系统

同步 
    mutatinon 
    commit

异步 
    action
    dispatch

VueX,redux(store)=>组件=>action=>Vuex

---

Ant design UI库/组件库

高阶组件

接受一个组件，返回一个新的组件
非侵入式 ...this.props
侵入式 super

super当成方法  指向this指针
super当成对象  指向父类

继承

函数继承  闭包=块级作用域
    prototype
    
类的继承
    extends

---

非侵入式

import React from 'react'

// 非侵入式组件
export default (WrapCompoennt)=>{
    return class extends React.Component {
        render() {
            return (
                <div>
                    <div style={{background:'skyblue',padding:'10px',display:'flex'}}>
                        <p>请下载淘票票</p>
                        <a href="https://h5.m.taopiaopiao.com/app/moviemain/pages/index/index.html?from=outer">下载</a>
                    </div>
                    <WrapCompoennt {...this.props}/>
                </div>
            )
        }
    }
}

侵入式

import React from 'react'
import Loading from '../common/Loading'
// 侵入式组件
export default (WrapCompoennt)=>{
    return class extends WrapCompoennt{
        render() {
            if(this.state.showLoading){
                return <Loading></Loading>
            }else{
                return super.render();
            }
        }
    }
}