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

Z时代
2024-01-10
分类：综合

react

高阶组件是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} />;
    }
  };
}