一句话介绍HOC

高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意。

使用场景

将几个功能相似的组件里面的方法和react特性（如生命周期里面的副作用）提取到HOC中，然后向HOC传入需要封装的组件。最后将公用的方法传给组件。

优势

使代码简洁优雅、代码量更少

代码示例：

高阶组件：
`//定义高阶组件 //放在common公用方法里面
import React, { Component} from 'react';
export default (WrappedComponent) => {  
    return class extends Component {
          constructor(props) {
            super(props)
            this.state = { //定义可复用的状态
                count:1
            }
            this.getCode = this.getCode.bind(this) 
          }
    
          componentDidMount() {
            alert('111')
          }

    　　　　//定义可复用的方法
          getCode(mobile) {
            // ...
            this.setState({count : mobile})
            console.log(mobile)
          }
          postVcode(mobile) {
            // ...
          }
          render() {
            return (
              <div>
                <WrappedComponent getCode={this.getCode} state={this.state} {...this.props}/>
              </div>
            )
          }
        }
      }

      // 高阶组件就是把可复用的逻辑放在定义的高阶组件中，然后把需要调用高阶组件的组件作为参数传给高阶组件，然后在高阶组件中
      // 实例化该组件，再把需要复用的方法和state传给次组件，然后在此组件中的props中就可以拿到高阶组件里定义的逻辑方法和state了

传入的组件：
import React, { Component} from 'react';
import HOC from './index'
//高阶组件的使用
class Register extends Component{
    　　 render() {
        return (
          <div>
            <button onClick={()=>{this.props.getCode('17682334636')}}>使用高阶组件里复用的方法</button>
            {this.props.state.count}
          </div>
        )
      }
}
export default HOC(Register)
//高阶组件其实就是将复用的方法传给组件，使代码简洁、代码量更少

谈点：一篇面向初学者的 HOC 介绍。高阶组件听起来挺唬人的，只看名字恐怕不是那么容易明白究竟是何物，而且通常来讲高阶组件并不是组件，而是接受组件作为参数，并且返回组件的函数。早期利用 ES5 的 mixin 语法来做的事，基本都可以使用高阶组件代替，而且能做的还有更多。
前言

写这篇文章的起因是其他关于高阶组件（Higher-Order Components）的文章，包含官方文档，都令初学者感到相当困惑。我知道有高阶组件这样一个东西，但不知道它到底有什么用。所以，想通过一篇文章来对高阶组件有一个更好的理解。
在此之前，我们需要先来讲一下 JavaScript 中的函数。
ES6 箭头函数简介

接下来将提供一些箭头函数的简单示例，如果之前没有使用过，可以认为它们与普通函数基本一致。下面的代码会展示箭头函数与普通函数的区别。
function () {

return 42

}
// 相当于:

() => 42
// 相当于:

() => {

return 42

}
function person(name) {

return { name: name }

}
// 相当于:

(name) => {

return { name: name }

}

阅读 MDN 的箭头函数文档 了解更多信息。
作为值的函数与部分调用

就像是数字、字符串、布尔值 一样，函数也是值，意味着可以像传递其他数据一样传递函数，可以将函数作为参数传递给另外一个函数。
const execute = (someFunction) => someFunction()
execute(() => alert(‘Executed’))

也可以在在函数中返回一个函数：
const getOne = () => () => 1
getOne()()

之所以在 getOne 后面有两个 () ，是因为第一个返回的返回值是一个函数。如下：
const getOne = () => () => 1
getOne     //=> () => () => 1
getOne()   //=> () => 1
getOne()() //=> 1
从函数返回函数可以帮助我们追踪初始输入函数。例如，下面的函数接受一个数字作为参数，并返回一个将该参数乘以新参数的函数：
const multiply = (x) => (y) => x * y
multiply(5)(20)

这个示例跟上述 getOne 一样，在下面这个例子，让 x = 5，y = 20。
const multiply = (x) => (y) => x * y
multiply          //=> (x) => (y) => x * y
multiply(5)       //=> (y) => 5 * y
multiply(5)(20)   //=> 5 * 20
在只传入一个参数调用 multiply 函数时，即部分调用该函数。比如，multiply(5) 讲得到一个将其输入值乘以 5 的函数，multiply(7) 将得到一个将其输入值乘以 7 的函数。依此类推。通过部分调用可以创建一个预定义功能的新函数：
const multiply = (x) => (y) => x * y
const multiplyByFive = multiply(5)

const multiplyBy100 = multiply(100)
multiplyByFive(20)  //=> 100
multiply(5)(20)     //=> 100
multiplyBy100(5)    //=> 500
multiply(100)(5)    //=> 500
一开始看起来似乎没什么用，但是，通过部分调用这种方式可以编写可读性更高，更易于理解的代码。举个例子，可以用一种更清晰的方式来代替 style-components 的函数插入语法。
// before

const Button = styled.buttonbackground-color: ${({ theme }) => theme.bgColor} color: ${({ theme }) => theme.textColor}
Submit
// after

const fromTheme = (prop) => ({ theme }) => theme[prop]
const Button = styled.buttonbackground-color: ${fromTheme("bgColor")} color: ${fromTheme("textColor")}
Submit

我们创建一个接受一个字符串作为参数的函数 fromTheme(“textColor”)：它返回一个接受具有 theme 属性的对象的函数：({ theme }) => theme[prop]，然后再通过初始传入的字符串 “textColor” 进行查找。我们可以做得更多，写类似的 backgroundColor 和 textColor 这种部分调用 fromTheme 的函数：
const fromTheme = (prop) => ({ theme }) => theme[prop]

const backgroundColor = fromTheme(“bgColor”)

const textColor = fromTheme(“textColor”)
const Button = styled.buttonbackground-color: ${backgroundColor} color: ${textColor}
Submit

高阶函数

高阶函数的定义是，接受函数作为参数的函数。如果曾经使用过类似 map 这样的函数，可能已经很熟悉高阶函数。如果不熟悉 map，它是一个数组遍历的方法，接受一个函数作为参数应用到数组中的每个元素。例如，可以像这样对一个数组作平方：
const square = (x) => x * x
[1, 2, 3].map(square)   //=> [ 1, 4, 9 ]

可以实现一个我们自己的 map 版本来说明这个概念：
const map = (fn, array) => {

const mappedArray = []
for (let i = 0; i < array.length; i++) {
    mappedArray.push(
        // apply fn with the current element of the array
        fn(array[i])
    )
}

return mappedArray

}

然后再使用我们的 map 版本来对一个数组作平方：
const square = (x) => x * x
console.log(map(square, [1, 2, 3, 4, 5]))  //=> [ 1, 4, 9, 16, 25 ]

译者注：我们也可以将 map 方法从对象中解耦出来：
const map = (fn, array) => Array.prototype.map.call(array, fn)
这样也可以像上述例子一样调用。 或者更函数式的做法，再来点柯里化：
const map = array => fn => Array.prototype.map.call(array, fn)
或者是返回一个
的 React 元素数组：

const HeroList = ({ heroes }) => (



{map((hero) => (

{hero}


), heroes)}



)

<HeroList heroes=[

“Wonder Woman”,

“Black Widow”,

“Spider Man”,

“Storm”,

“Deadpool”

]/>
/=> (



Wonder Woman


Black Widow


Spider Man


Storm


Deadpool




)/

高阶组件

我们知道，高阶函数是接受函数作为参数的函数。在 React 中，任何返回 JSX 的函数都被称为无状态函数组件，简称为函数组件。基本的函数组件如下所示：

const Title = (props) => 
{props.children}

ReactDOM.render(

,

document.getElementById(‘app’)

)
高阶组件则是接受组件作为参数并返回组件的函数。如何使用传入组件完全取决于你，甚至可以完全忽视它：
// Technically an HOC

const ignore = (anything) => (props) => 
😃

const IgnoreHeroList = ignore(‘HeroList’)
ReactDOM.render(

,

document.getElementById(‘app’)

)
可以编写一个将输入转换成大写的 HOC：
const yell = (PassedComponent) =>

({ children, …props }) =>

<PassedComponent {…props}>

{children.toUpperCase()}!


const Title = (props) => 
{props.children}


const AngryTitle = yell(Title)

ReactDOM.render(

Whatever,

document.getElementById(‘app’)

)
你也可以返回一个有状态组件，因为 JavaScript 中的类不过是函数的语法糖。这样就可以使用到 React 生命周期的方法，比如 componentDidMount。这是 HOCs 真正有用的地方。我们现在可以做一些稍微有趣点的事，比如将 HTTP 请求的结果传递给函数组件。
const withGists = (PassedComponent) =>

class WithGists extends React.Component {

state = {

gists: []

}
componentDidMount() {
    fetch("https://api.github.com/gists/public")
        .then((r) => r.json())
        .then((gists) => this.setState({
            gists: gists
        }))
}

render() {
    return (
        <PassedComponent
            {...this.props}
            gists={this.state.gists}
        />
    )
}

}
const Gists = ({ gists }) => (

{JSON.stringify(gists, null, 2)}


)

const GistsList = withGists(Gists)

// => Before api request finishes:

//  

//

// => After api request finishes:

//  <Gists gists={[

//   { /* … / },

//   { / … / },

//   { / … */ }

//  ]} />

withGists 会传递 gist api 调用的结果，并且你可以在任何组件上使用。点击这里 可以看到一个更加完整的例子。
结论：高阶组件是

react-redux 也是使用 HOC， connect 将应用 store 的值传递到“已连接” 的组件。它还会执行一些错误检查和组件生命周期优化，如果手动完成将导致编写大量重复代码。
如果你发现自己在不同地方编写了大量的代码，那么也可以将代码重构成可重用的 HOC。
HOCs 非常具有表现力，可以使用它们创造很多很酷的东西。
尽可能地保持你的 HOC 简单，不要编写需要阅读长篇大论才能理解的代码。

 react-redux使用演示
代码太多，就放codesandbox.io 了，可以看到，在组件中连接仓库和组件的一个重要方法， connect() ，该方法的返回值就是个高阶组件

什么是高阶组件

高阶组件： 同高阶函数，参数可以是组件， 或者返回一个组件，
使用场景： 一般用于公共部分的抽离，对一个组件进行包装，让它产生一些新的功能，或者返回一个新的UI组件


演示效果：
class App extends Component {
  render() {
    return (
      <>
        <h1>我是被包装后的组件</h1>
        <span>{this.props.msg}</span>
        <h2 style={{ color: this.props.color }}>{this.props.info}</h2>
      </>
    );
  }
}
function connect(WarpComponent) {
  return class extends Component {
    state = {
      msg: '高阶组件',
      info: '二柱子，萨斯给',
    };
    componentDidMount() {
      this.setState({
        color: '#f65',
      });
    }
    render() {
      return (
        <div>
          <p>hello,我是高阶组件</p>
          <WarpComponent {...this.state} />
        </div>
      );
    }
  };
}
App = connect(App);
ReactDOM.render(<App />, document.getElementById('root'));

再比如说，前边的redux使用时，在每个CounA和CoutB组件都写了以下代码，那这个代码就可以拆出来了
  componentDidMount() {
    this.unsubscribe = store.subscribe(() =>
      this.setState({ num: store.getState().count1.num }),
    );
  }
  componentWillUnmount() {
    this.unsubscribe();
  }

高阶组件知识点理解

本章节，我们将深入高阶组件详细了解，高阶组件相关的知识点，包括什么是高阶组件，以及如何创建高阶组件，高阶组件实现的几种方式，常用的使用场景等等；首先我们需要来了解下，和高阶组件非常类似的一个概念，高阶函数：如果一个函数操作其他函数，将其他函数作为参数或返回值，将其称为高阶函数。


关于高阶组件的概念：高阶组件(high-order component)类似于高阶函数，接收 React 组件作为输入，输出一个新的 React 组件。高阶组件让代码更具有复用性、逻辑性与抽象特征。可以对 render 方法作劫持，也可以控制 props 与 state。


实现高阶组件的方法有如下2种:

属性代理(props proxy)：属性组件通过被包裹的 React 组件来操作 props 。
反向代理(inheritance inversion)：高阶组件继承于被包裹的 React 组件。



第一种方法：属性代理
属性代理是比较常见的一种高阶组件的实现方法。如下：
const MyContainer = (WrappedComponent) => {
    return class extends Component {
        render() {
            return (
                <WrappedComponent {...props} />
            )
        }
    }
}
export default MyContainer;

在 render 方法中返回传入 WrappedComponent 的 React 组件。这样就可以通过高阶组件来传递 props，这种方法即为属性代理。
当然，原始组件想要具备高阶组件对它的修饰，有下面两种方式：
第1种方式
export default MyContainer;

class MyComponent extends Component {
}

export default MyContainer(MyComponent);

第2种方式
使用 ES7 中的 decorator 的属性，我们可以通过 decorator 来转换，以此简化高阶组件的调用。
@MyContainer
class MyComponent extends Component {
}

export default MyComponent;

控制 props
我们可以读取、增加、编辑或是移除从 WrappedComponent 传进来的 props，但需要小心删除与编辑重要的 props。应该尽量对高阶组件的 props 作新的命名以防止混淆。
const MyContainer = (WrappedComponent) => {
    return class extends Component {
        render() {
            const newProps = { text: newText };
            return (
                <WrappedComponent {...props} {...newProps} />
            )
        }
    }
}

export default MyContainer;

从上面这个案例看来，当调用这个MyContainer高阶组件时，就可以使用 text 这个新的 props 了。
通过 refs 使用引用
在高阶组件中，可以接受 refs 使用 WrappedComponent 的引用。
const MyContainer = (WrappedComponent) => {
    return class extends Component {
        ref = (view) => {
            view.mentod();
        }
        render() {
            const props = Object.assign({}, this.props, { ref: this.ref });
            return (
                <WrappedComponent {...props} />
            )
        }
    }
}

export default MyContainer;

抽象 state
可以通过 WrappedComponent 提供的 props 和回调函数抽象 state。将原组件抽象为展示型组件，分离内部状态 。
const MyContainer = (WrappedComponent) => {
    return class extends Component {
        constructor(props);
        super(props);
        this.state = { name: '' };
    }

    onNameChange(text) {
        this.setState({ name: text });
    }

    render() {
        const newProps =  {
            name = { value: this.state.name, onChangeText: { this.onNameChange } }
        }
        return (
            <WrappedComponent {...this.props} {...newProps} />
        );
    }
}

export default MyContainer;

使用情况如下：
@MyContainer
class MyComponent extends Component {
    render() {
        return (
            <TextInput {...this.props.name} />
        );
    }
}

使用其他元素包裹 WrappedComponent
export default LoginPleaseMixin;

const MyContainer = (WrappedComponent) => {
    return class exrends PureComponent {
        render() {
            return (
                <View>
                    <WrappedComponent />
                </View>
            );
        }
    }
}

export default MyContainer;

第二种方法：反向继承
反向继承是另一种构建高阶组件的方法。
const MyContainer = (WrappedComponent) => {
    return class extends WrappedComponent {
        render() {
            return super.render();
        }
    }
}

export default MyContainer;

高阶组件返回的组件继承于 WrappedComponent。因为被动地继承了 WrappedComponent，所有的调用都会反向。

通过继承 WrappedComponent 来实现，方法可以通过 super 来顺序调用。

在反向继承方法中，高阶组件可以使用 WrappedComponent 引用，这意味着它可以使用 WrappedComponent 的 state、props、生命周期和render方法，但他不能保证完整的子组件树被解析。
渲染劫持
概念：渲染劫持指的就是高阶组件可以控制 WrappedComponent 的渲染过程，并渲染各种各样的结果。我们可以在这个过程中在任何 React 元素输出的结果中读取、增加、修改、删除 props，或读取或修改 React 元素树、或条件显示元素树，又或是用样式控制包裹元素树。

反向继承不能保证完整的子组件树被解析，这意味着将限制渲染劫持功能。但是如果元素树包裹了函数类型的 React 组件，就不能操作组件的子组件。

条件渲染：

const MyContainer = (WrappedComponent) => {
   return class extends WrappedComponent {
        render() {
            if (this.props.loggIn) {
                return super.render();
            } else {
                return null;
            }
        }
    }
}

export default MyContainer;


对 render 输出结果进行修改：

//...
const MyContainer = (WrappedComponent) => {
    return class extends WrappedComponent {
        render() {
            const elementsTree = super.render();
            let newProps = {};
            if (elementsTree && elementsTree.type === 'input') {
                newProps = {value: 'may the force be with you'};
            }
            const props = Object.assign({}, elementsTree.props, newProps);
            const newElementsTree = React.cloneElement(elementsTree, props, elementsTree.props.children);
            return newElementsTree;
        }
    }
}

export default MyContainer;

在这里，我们可以做各种各样的事，甚至可以反转元素树，或是改变元素树中的 props。
控制 state
高阶组件可以读取、修改或删除 WrappedComponent 实例中的 state，如果需要的话，也可以增加 state。但是这样做，可能让 WrappedComponent 组件内部状态变得一团糟。大部分的高阶组件都应该限制读取或增加 state，尤其是后者，可以通过重新命名 state，以防止混淆。
const MyContainer = (WrappedComponent) => {
    return class extends WrappedComponent {
        render() {
            return (
                <View>
                    <Text>
                        {JSON.stringify(this.props)}
                    </Text>
                    <Text>
                        {JSON.stringify(this.state)}
                    </Text>
                    {super.render()}
                </View>
           );
        }
    }
}

export default MyContainer;

组件命名
当包裹一个高阶组件时，我们失去了原始的 WrappedComponent 的 displayName，而组件名字是方便我们开发与调试的重要属性。
HOC.displayName = `HOC{${getDisplayName(WrappedComponent)}}`;

class HOC extends ... {
    static displayName = `{Hoc(${getDisplayName(WrappedComponent)})}`

    function getDisplayName(WrappedComponent) {
        return WrappedComponent.displayName ||
            WrappedComponent.name ||
            'Component';
    }
}

组件参数
调用高阶组件时需要传入一些参数，可以用简单方式实现。
function HOCFactoryFactory(...params) {
    return function HOCFactory(WrappedComponent) {
        return class HOC extends Component {
            render() {
                return (
                    <WrappedComponent  {...this.props} />
                );
            }
        }
    }
}

使用如下：
HOCFactoryFactory(params)(WrappedComponent)

// or

@HOCFactoryFactory(params)
class WrappedComponent extends Component {
    //...
}