高阶组件

高阶组件是参数为组件，返回值为新组件的函数。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

// 3. 需要使用公共逻辑的组件
const App = (props) => {
  const {x, y} = props.mouse;
  return (
    <div>
      <h1>The mouse position is ({x}, {y})</h1> 
    </div>
  );
}

// 1. 具有公共逻辑的 withMouse
const withMouse = (Component) => {
  return class withMouse extends React.Componet {
    constructor(props){
      super(props);
      this.state = {x:0,y:0};
    }

    handleMouseMove = (event)=>{
      this.setState({
        x: event.clientX,
        y: event.clientY
      });
    }

    render() {
      return (
        <div onMouseMove={this.handleMouseMove}>
          {/* 2. 透传所有 props 以及 额外的 mouse 属性 */}
          <Component {...this.props} mouse={this.state}>
        </div>
      );
    }
  }
}

export default withMouse(App);

实际应用

react-redux 中的 connect 函数

export default connect(mapStateToPorps, mapDispatchToProps)(App);