高阶组件

高阶组件（React 官网翻译）

高阶组件就是函数将一个组件作为参数，然后再返回一个组件

const EnhancedComponent = higherOrderComponent(WrappedComponent);

一个组件是 React 复用代码的最小单元，但是你会发现一些模式并不能直接被传统的组件套用。

如果，加入一个需要外部数据源去渲染一个 list 的 comments 的 CommentList 组件，如下：

class CommentList extends React.Component {
  constructor() {
    super();
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      comment: 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>
    )
  }
}

接着我们需要写一个简单的 blog 组件，用的同样的模式

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

CommentList 和 BlogPost 并不相同，他们调用的是 DataSource 的不同的方法，渲染出来的结果也不相同，但是它们仍然有一些共性：

• mount 时，新增一个 change listener 到 DataSource
• 在 listener 中，不论数据如何变动都会调用 setState
• unmount 时，移除 change listener

你可以想象在大型的 App，通过 DateSource 的数据渲染，然后调用 setState 这种相同的模式将会发生的频繁，我们想要在一个单独的地方抽象出这个逻辑然后在多个组件中共享，这就是高阶组件做的。

我们可以写一个函数创建组件，比如 CommentList 和 BlogPost，subscribe to DataSource。这个函数将会接收一个子组件作为参数，子组件接收订阅数据（subscribed data）作为 prop，让我们调用函数 withSubscription

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

第一个参数是被包裹的组件，第二个参数取回我们需要的数据，given a DataSource and the current props

当 CommentListWithSubscription 和 BlogPostWithSubscription 被渲染，CommentList 和 BlogPost 将被传递一个 data prop，这个 prop 里面包含了 DataSource 里的数据

function withSubscription(WrappedComponent,selectData) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.setState({ data: selectData(DataSource, props)})
    }
  }
  componentDidMount() {
    DataSource.addChangeListener(this.handleChange);
  }
  componentWillUnmount() {
    DataSource.removeChangeListener
  }
  hangdleChange() {
    this.setState({
      data: selectData(DataSource, this.props)
    })
  }
  render() {
    return <WrappedComponent data={this.state.data} {...this.props}>
  }
}

请注意，HOC不会修改输入组件，也不会使用继承来复制其行为。 相反，HOC通过将原始组件包装在容器组件中来组成原始组件。 HOC是具有零副作用的纯功能。