react 高阶组件

什么是高阶组件？

高阶组件（HOC）也就是组件的组件（组件工厂），具体而言，高阶组件就是一个函数而已，这个函数接受一个组件，并且返回一个组件；
再通俗易懂的讲，你有一个思域，送到改装店，然后再从改装店出来，又是一个不一样的思域；
用例：Redux中的connect 方法

为什么要用高阶组件？

高阶组件是对组件属性的扩展，提高代码的复用性；

高阶高阶组件的两种模式：属性代理 、反向继承;

属性代理：

A.js — 组件A

import React, { Component } from 'react';
import Hoc from '../HOC/Hoc' // 引入函数
class A extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            data:[]
         }
    }
    render() { 
        return ( 
            <div>
                <button onClick={this.props.click}>A组件的按钮</button>
            </div>
         );
    }
}
 
export default Hoc(A); // 抛出组件的时候呢 执行该函数，传入原来的组件，获得到一个新的组件（这个组件就有了Hoc.js赋予给他的新的属性）在组件的props上

Hoc.js – 做属性代理的组件，其实本身就是一个函数而已

import React, { Component } from 'react';
function Hoc(WrapComponent) { 
   return class extends Component{
        constructor(props){
            super(props)
            this.state={
            }
        }
        clickEvent(){
            alert('来自高阶组件的问候')
        }        
        render(){
            return(
                <WrapComponent name='hou'{...this.props} click={this.clickEvent.bind(this)} /> 
                //返回时对原来的组件进行了一个扩展
            )
        }
    }
 }


export default Hoc // look,just return a function

反向继承:

B.js – 受作用的组件

import React, { Component } from 'react';
import Hoc from '../HOC/Hoc'
import goBackHoc from '../HOC/goBackHoc'
class B extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            data:[],
            val:'B组件的按钮'
         }
    }
    render() { 
        return ( 
            <div>
                <button>萨达萨达</button>
            </div>
         );
    }
}
 
export default goBackHoc(B);

• goBackHoc.js — 做反向继承的组件 ：拦截生命周期、state、渲染过程（还不是很清楚反向继承的作用在哪…）

function goBackHoc(WrapConponent){
    return class extends WrapConponent{ //在这的时候不是去继承 React.Component 而是去继承传过来的组件
        constructor(props){
            super(props) // 超类继承
            this.state= {
                val:'呵呵'
            }
        }

        render(){
            return super.render()
                
        }
        componentDidMount() {
            
        }
        
    }
}

export default goBackHoc