【Reatc】 High Order Component 高阶组件

高阶组件定义

高阶组件是将一个组件作为入参，返回值为另一个新组件的函数。通常来说HOC会将额外的数据或者功能，添加到原本的组件中。

为什么需要高阶组件

根据以下代码片段，我们会发现，当不同组件需要使用相同的功能时，不同组件中通常会出现重复的代码，如果当有更多组件需要使用到以下的counter的功能时，这样的重复代码则会越来越多。高阶组件正是为了解决这样的场景，实现功能的复用，而不是代码的复制。

React 中的高阶组件主要有两种形式：属性代理 和 反向继承。

属性代理: 是 一个函数接受一个 WrappedComponent 组件作为参数传入，并返回一个继承了 React.Component 组件的类，且在该类的 render() 方法中返回被传入的 WrappedComponent 组件

反向继承:是 一个函数接受一个 WrappedComponent 组件作为参数传入，并返回一个继承了该传入 WrappedComponent 组件的类，且在该类的 render() 方法中返回 super.render() 方法。

实现案例

属性代理 

一个函数接受一个 WrappedComponent 组件作为参数传入，并返回一个继承了 React.Component 组件的类，且在该类的 render() 方法中返回被传入的 WrappedComponent 组件。

在返回之前就可以对这个组件做操作了。（比如说样式的修改， 属性的修改，数据的修改）在内部是不会修改原组件，只会将修改组件后的结果返回。

一般在高阶组件中数据件处理完，把处理好的结果，不管是方法、对象、值，挂载到传递的组件的属性中。在子组件中就可以获取到。

注意: 高阶组件的内部一定是一个类组件，类组件中有this，才能获取传入类组件的自身属性，不能说这个组件传入进去，它自身的属性没有了， 那指定是不行的。组件的属性必须的在！

import React from 'react';
​
//改变颜色的高阶组件
function Color(WrapperComponent,color="#FF0000"){
    return class Hoc extends React.Component{
        
        render(){
            let obj = {
                color:color
            }
            return <WrapperComponent {...this.props} {...obj}></WrapperComponent>
        }
    }
}
​
class Home extends React.Component{
    render (){
        console.log(this.props)
        return (
            <h3 style={{color:this.props.color}}>Home组件</h3>
        )
    }
}
​
export default Color(Home,"#0088dd");

反向继承

一个函数接受一个 WrappedComponent 组件作为参数传入，并返回一个继承了该传入 WrappedComponent

组件的类(继承了参数组件自身)，且在该类的 render() 方法中返回 super.render() 方法（这里指的的父类对象中的render方法，直接返回结果，就不需要挂载了 ） 。

class 中 this -- 指向当讲对象 super -- 继承的父类对象

import React, { Component } from 'react'

// 反向继承的 中间过度函数必须是类组件, 只有类才能继承类 
class Goods extends Component {
   render() {
        return(
            <div className='box'>
                <h3 style={{ color: this.state.color }}> hello React</h3>
            </div>    
        )
    }
}

// 反向继承的高阶函数 
function Color(WrapperComponent){
    return class Color extends WrapperComponent{
        constructor() {
            super()
            this.state = {
                color: "#0088dd"
            }
        }
        render() {
            // 继承对象render() 的方法 
            return super.render()         
        }
    }
}

export default Color(Goods)

文章几经修改，不足之处在所难免望海涵，还望大家批评指正 !