React高阶组件

高阶函数

在讲高阶组件之前，先讲一下高阶函数这个概念。接受一个函数为参数，或者返回结果为函数的函数，就是一个高阶函数。
下面的greaterThan就是一个高阶函数：

const greaterThan = (n) => {
    return (m) => m > n;
}
let greaterThan10 = greaterThan(10);
let isGreaterThan = greaterThan10(11);
// isGreaterThan: true

那么什么是高阶组件呢？

接受一个组件为参数，并且返回一个新组件的组件。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

React官方文档中的例子：

const CommentListWithSubscription = withSubscription(
  CommentList, // 被包裹的组件
  (DataSource) => DataSource.getComments() // 作为props传入的数据
);

const BlogPostWithSubscription = withSubscription(
  BlogPost, // 被包裹的组件
  (DataSource, props) => DataSource.getBlogPost(props.id) // 作为props传入的数据
);

// ---- 高阶组件 ------------------------------------------
// 接受一个组件WrappedComponet作为参数
function withSubscription(WrappedComponent, selectData) {
  // 返回一个新的组件
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        data: selectData(DataSource, props)
      };
    }

    componentDidMount() {
      // 横切关注点(cross-cutting concerns，面向切面编程)
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
      // 横切关注点
      DataSource.removeChangeListener(this.handleChange);
    }

    // 横切关注点
    handleChange() {
      this.setState({
        data: selectData(DataSource, this.props)
      });
    }

    render() {
      // 给包含的组件传递数据
      // 注意，所有的props里的东西都要传递给被包裹的组件
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

最常见的高阶组件的方法签名就像下面这样：

// React Redux的`connect`方法
const ConnectedComment = connect(commentSelector, commentActions)(CommentList);

为了更便于理解，上面的代码可以分解为两步：

// connect函数的返回结果是另一个函数
const enhance = connect(commentListSelector, commentListActions);
// 这个返回的函数是一个高阶组件，它返回一个与Redux的store关联的一个组件
const ConnectedComment = enhance(CommentList);

换言之，connect是一个返回一个高阶组件的高阶函数! ：）

看看 官方文档 更详细