什么是HOC

高阶组件（Higher Order Component）是React中用于复用组件逻辑的一种高级技巧。
高阶组件是参数为组件，返回值为新组件的函数。
HOC 是纯函数，没有副作用。
使用场景：
逻辑相同、功能相似的方法提取到HOC中，然后将公用的方法或者数据传给被包裹的组件
比如以下2个组件：

<ComponentA />
<ComponentB />

ComponentA需要监听鼠标移动，鼠标在某一个位置范围内此组件就播放动效。
ComponentB需要监听鼠标移动，渲染一个红点跟着鼠标，类似激光笔的效果。
此时可以在A B组件中都添加监听mouseMove，获取鼠标的坐标，此时我们可以使用HOC来避免在两个组件中都重复写监听逻辑的问题。

function withMouse(WrappedComponent) {
  // 返回一个组件
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.handleMouseEvent = this.handleMouseEvent.bind(this);
      this.state = {
        position: {x: 0, y:0}
      };
    }

    componentDidMount() {
        document.addEventListener('mousemove', this.handleMouseEvent)
    }

    componentWillUnmount() {
       document.removeEventListener('mousemove', this.handleMouseEvent)
    }

    handleMouseEvent(event) {
      this.setState({
        position: {x:event.clientX, y:event.clientY}
      });
    }

    render() {
      // 被包装的组件的props不要修改 直接传给它
      return <WrappedComponent position={this.state.position} {...this.props} />;
    }
  };
}

不要在HOC中修改被包裹组件原型或以其他方式改变它。修改传入组件的 HOC 是一种糟糕的抽象方式。调用者必须知道他们是如何实现的，以避免与其他 HOC 发生冲突。
HOC 不应该修改传入组件，而应该使用组合的方式。
HOC 应该透传与自身无关的 props。
一般HOC都使用with开头，withMouse，withRouter。