深入理解React高阶组件

1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术。HOC不是React API中的一部分。HOC是一个函数，该函数接收一个组件并且返回一个新组件。在React中，组件是代码复用的基本单位。

2.为了解释HOCs，举下面两个例子

CommentList组件会渲染出一个comments列表，列表中的数据来自于外部。

class CommentList extends React.Component {  constructor() {   super();   this.handleChange = this.handleChange.bind(this);   this.state = {    // "DataSource" is some global data source    comments: DataSource.getComments()   };  }   componentDidMount() {   // Subscribe to changes   DataSource.addChangeListener(this.handleChange);  }   componentWillUnmount() {   // Clean up listener   DataSource.removeChangeListener(this.handleChange);  }   handleChange() {   // Update component state whenever the data source changes   this.setState({    comments: DataSource.getComments()   });  }   render() {   return (    <div>     {this.state.comments.map((comment) => (      <Comment comment={comment} key={comment.id} />     ))}    </div>   );  } } 

 接下来是BlogPost组件，这个组件用于展示一篇博客信息

class BlogPost extends React.Component {  constructor(props) {   super(props);   this.handleChange = this.handleChange.bind(this);   this.state = {    blogPost: DataSource.getBlogPost(props.id)   };  }   componentDidMount() {   DataSource.addChangeListener(this.handleChange);  }   componentWillUnmount() {   DataSource.removeChangeListener(this.handleChange);  }   handleChange() {   this.setState({    blogPost: DataSource.getBlogPost(this.props.id)   });  }   render() {   return <TextBlock text={this.state.blogPost} />;  } } 

这两个组件是不一样的，它们调用了DataSource的不同方法，并且它们的输出也不一样，但是它们中的大部分实现是一样的:

1.装载完成后，给DataSource添加了一个change listener
2.当数据源发生变化后，在监听器内部调用setState
3.卸载之后，移除change listener

可以想象在大型应用中，相同模式的访问DataSource和调用setState会一次又一次的发生。我们希望抽象这个过程，从而让我们只在一个地方定义这个逻辑，然后在多个组件中共享。

接下来我们写一个创建组件的函数，这个函数接受两个参数，其中一个参数是组件，另一个参数是函数。下面调用withSubscription函数

const CommentListWithSubscription = withSubscription( CommentList, (DataSource) => DataSource.getComments()); const BlogPostWithSubscription = withSubscription( BlogPost, (DataSource, props) => DataSource.getBlogPost(props.id)); 

调用withSubscription传的第一个参数是wrapped 组件，第二个参数是一个函数，该函数用于检索数据。