高阶组件（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是具有零副作用的纯功能。
