React 高阶组件（高级）

关于组件公共逻辑的抽离

• mixin，已被 React 弃用
• 高级组件 Higher Order Component（简称 HOC）
• Render Props

高阶组件基本用法

// 高阶组件不是一种功能，而是一种模式
const HOCFactory = (Component) => {
  class HOC extends React.Component {
    // 在此定义多个组件和公共逻辑
    render() {
      return <Component {...this.props} />; // 返回拼装的结果
    }
  }

  return HOC;
};

const EnhancedComponent1 = HOCFactory(WrappedComponent1);
const EnhancedComponent2 = HOCFactory(WrappedComponent2);

高阶组件实例

定义一个 HOCDemo.js

import React from 'react';

// 高阶组件
const withMouse = (Component) => {
  class withMouseComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        x: 0,
        y: 0,
      };
    }

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

    render() {
      return (
        <div style={{ height: '500px' }} onMouseMove={this.handleMouseMove}>
          {/*1、透传所有 props 2、增加 mouse 属性*/}
          <Component {...this.props} mouse={this.state} />
        </div>
      );
    }
  }

  return withMouseComponent;
};

const App = (props) => {
  const a = props.a;
  const { x, y } = props.mouse; // 接收 mouse 属性
  return (
    <div style={{ height: '500px' }}>
      <h1>
        The Mouse position is ({x},{y})
      </h1>
      <p>a:{a}</p>
    </div>
  );
};

export default withMouse(App);

测试下

<HOCDemo a="123" />

redux connect 是高阶组件

比如

import { connect } from 'react-redux';
const VisibleTodoList = connect(mapStateToProps, mapDispatchToProps)(TodoList);

export default VisibleTodoList;