关于react16.4——高阶组件（HOC）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

高阶组件是react中用于重用组件逻辑的高级技术。可以说是一种模式。具体来说呢，高阶组件是一个函数，它接收一个组件并返回一个新的组件。

就像这样，

const EnhancedComponent = higherOrderComponent(WrappedComponent);

我们知道，组件将props转为UI，而高阶组件是将一个组件转为另一个组件。组件是React中代码重用的最小单元。然而你会发现某些模式并不能直接适应传统组件。

我们可以写一个函数，能够创建类似于 CommentList 和 BlogPost 这类订阅 DataSource 的新的组件。这个函数接受一个子组件作为参数，这个子组件接受订阅数据源作为props，调用 withSubscription 如下，

const CommentListWithSubscription = withSubscription(

  CommentList,

  (DataSource) => DataSource.getComments()

);

const BlogPostWithSubscription = withSubscription(

  BlogPost,

  (DataSource, props) => DataSource.getBlogPost(props.id)

);

第一个参数是被包含的组件，第二个参数根据给定的 DataSource 和当前的props取回我们需要的数据。

当 CommentListWithSubscription 和 CommentListWithSubscription 被渲染时， CommentList 和 BlogPost 将会被传递 data 属性，其中包含从 DataSource 取回的最新数据。

// 函数接受一个组件参数……

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() {

      // ……注意订阅数据……

      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} />;

    }

  };

}