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 组件，第二个参数是一个函数，该函数用于检索数据。
当CommentListWithSubscription和BlogPostWithSubscription被渲染，CommentList和BlogPost会接受一个叫做data的prop，data中保存了当前从DataSource中检索出的数据。withSubscription代码如下：
// This function takes a component... function withSubscription(WrappedComponent, selectData) { // ...and returns another component... return class extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { data: selectData(DataSource, props) }; } componentDidMount() { // ... that takes care of the subscription... DataSource.addChangeListener(this.handleChange); } componentWillUnmount() { DataSource.removeChangeListener(this.handleChange); } handleChange() { this.setState({ data: selectData(DataSource, this.props) }); } render() { // ... and renders the wrapped component with the fresh data! // Notice that we pass through any additional props return <WrappedComponent data={this.state.data} {...this.props} />; } }; }
HOC并没有修改输入的组件，也没有使用继承去重用它的行为。HOC只是一个函数。wrapped 组件接受了容器的所以props，同时还接受了一个新的prop(data),data用于渲染wrapped 组件的输出。HOC不关心数据怎么使用也不关心数据为什么使用，wrapped组件不关心数据是哪儿得到。
因为withSubscription只是一个常规的函数，你能添加任意个数的参数。例如，你能让data prop的名字是可配置的，从而进一步将HOC与wrapped组件隔离。
或者接受一个配置shouldComponentUpdate，或者配置数据源的参数
使用高阶组件时有些需要注意的地方。
1.不要修改原始组件，这一点很重要
有如下例子：
function logProps(InputComponent) { InputComponent.prototype.componentWillReceiveProps = function(nextProps) { console.log('Current props: ', this.props); console.log('Next props: ', nextProps); }; // The fact that we're returning the original input is a hint that it has // been mutated. return InputComponent; } // EnhancedComponent will log whenever props are received const EnhancedComponent = logProps(InputComponent);
这里存在一些问题，1.输入的组件不能与增强的组件单独重用。2.如果给EnhancedComponent应用其他的HOC，也会改变componentWillReceiveProps。
这个HOC对函数类型的组件不适用，因为函数类型组件没有生命周期函数HOC应该使用合成代替修改——通过将输入的组件包裹到容器组件中。