高阶组件定义：
高阶组件就是一个函数，该函数接受一个组件作为参数，并返回一个新的组件
高阶组件的作用：
封装并抽离组件中的通用逻辑，让此逻辑更好的在组件中复用；
如何实现高阶组件：1、属性代理 2、反向继承
1、属性代理是最常见的实现方法，它的做法是将被处理组件的props和新组件props一起传递给新组建，从而装饰被处理组件；
举个例子：如果addOneCount方法在项目中复用率较高，如果在每个用到的组件中都实现一次，那代码就会冗余；所以我们用高阶组件实现；
高阶组件代码如下：
import React, { Component } from 'react';
export default function HOC(WrappedCompnnet) {//创建一个函数，用来返回一个新的组件
return class Hoc extends Component {
addOneCount(value) {
return ++value;
}
render() {
const newProps = { addOneCount: this.addOneCount };
return (
<WrappedCompnnet {...this.props} {...newProps} />
)
}
}
}
被处理组件的代码如下：
import React, { Component } from 'react';
import HOC from './common/Hoc';
@HOC
export default class WrappedCompnnet extends Component {
constructor(props) {
super(props);
this.state = {
count: 1
}
}
add() {
//这样就可以通过props来访问高阶组件里面的方法
let value = this.props.addOneCount(this.state.count);
this.setState({ count: value });
}
render() {
return (
<div>
<p style={{ color: 'green' }}>{this.state.count}</p>
<input value="++1" type="button" onClick={this.add.bind(this)} />
</div>
)
}
}
// const ComputerCounters=Hoc(ComputerCounter);
// export default ComputerCounters;
如果再增加一个组件，也需要addOneCount方法处理；只需要如下：
import React, { Component } from 'react';
import HOC from './common/Hoc';
@HOC
export default class WrappedCompnnet1 extends Component {
render() {
const value=1;
return (
<div>
{this.props.addOneCount(value)}
</div>
)
}
}
属性代理实际上就是通过HOC这个函数，像被处理的组件WrappedCompnnet添加一些新增加的属性，并返回一个包含被处理组件的新组建
上述代码是使用ES7的decorator装饰器(webpack支持需要babel-plugin-transform-decorators-legacy)来实现对原组件WrappedCompnnet的装饰和增强；或者使用注释中的函数方法一样可以达到相同的效果。
第二种方法：反向继承（extends），直接看代码：
高阶组件代码：
import React, { Component } from 'react';
export default function Hoc(WrappedComponent) {
return class Hoc extends WrappedComponent {
constructor(props) {
super(props);
}
addOneCount() {
console.log(this.state.count);
this.setState({ count: ++this.state.count })
}
render(){
return super.render();
}
}
}
被处理组件：
import React,{Component} from 'react';
import InheritHoc from './common/inherit';
@InheritHoc
export default class OriginComponent extends Component{
constructor(props){
super(props);
this.state={count:1}
}
render(){
return(
<div>
<p>{this.state.count}</p>
<input type="button" value="++1" onClick={this.addOneCount.bind(this)} />
</div>
)
}
}
新生成的Hoc组件继承了传入的WrappedComponent组件，从而Hoc组件可以获取WrappedComponent组件里的所有方法和属性，并且可以拿到该组件里面的state进行修改，从而改变组件的行为，所谓“渲染劫持”，可以说，通过反向继承方法实现的高阶组件相比于属性代理实现的高阶组件，功能更强大，个性化程度更高，适应更多的场景。
在子组件通过super.render()来渲染父组件时，父组件中的this指向的是子组件；所以可以访问到addOneCount方法；
参考文章：https://juejin.im/post/59818a485188255694568ff2
https://github.com/brickspert/blog/issues/2
