理解React高阶组件

用简单的话来说，主要是为了更大程度的复用现有代码，抽离代码而产生的一个模式
高阶组件的参数可以为一个组件，通过一个组件再去生成另一个组件
用官方的例子来解释：
现有一个CommentList组件如下

class CommentList extends React.Component {  constructor() {    super();    this.handleChange = this.handleChange.bind(this);    this.state = {      // "DataSource" 就是全局的数据源      comments: DataSource.getComments()    };  }  componentDidMount() {    // 添加事件处理函数订阅数据    DataSource.addChangeListener(this.handleChange);  }  componentWillUnmount() {    // 清除事件处理函数    DataSource.removeChangeListener(this.handleChange);  }  handleChange() {    // 任何时候数据发生改变就更新组件    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接收数据，然后监听，解除监听，然后渲染
那么我们就可以将公共的部分提取出来，如下：

// 函数接受一个组件参数……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} />;    }  };}

然后就可以通过withSubscription组件来生成新的组件：

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