React组件其中一个好处便是可以实现组件的重用。一个组件一旦定义好之后可以用在不同的UI场景之下。在日常的开发过程中，我们可以发现，组件的重用，不一定能满足所有的场景。今天，我来给大家介绍组件的两种复用形式：高阶组件和函数作为子组件。
1.高阶组件
高阶组件是对现有组件的封装，形成一个新的组件。新的组件会有自己的应用逻辑，这些逻辑会产生一些新的状态，状态需要传给现有的组件。高阶组件没有自己的UI展现，而只是负责为它封装的组件提供额外的功能和数据。
如上图，图中的三个圆圈代表三个组件，UI由组件树的方式来描述。当中间的蓝色组件需要一些属性时，他的父组件需要传递所有的属性给他，同样他也会把他的一些属性传给他的子组件。可以想到一个问题，如果一个组件的所有来自外部的属性都由他的父组件传递给他，那他的父组件需要知道这个组件的所有状态。如果相隔很多层节点，比如这个组件需要获取三层节点之上的节点的内部状态，则需要属性一层一层往下传，中间的两层完全不需要用到这个数据，它们接受属性的唯一目的只是为了把它往下传。我们便可以用高阶组件来解决这个问题。高阶组件可以自己去获取外部资源并对其做一定处理，然后把属性传递给封装前的组件。那么此时组件的数据便有了两个来源，一个是父组件传递给它的属性，另一个便是高阶组件传给它的一些属性。高阶组件产生一般是有个函数，这个函数接收一个组件作为参数，返回一个新的组件，我们把它叫做高阶组件。
const EnhancedComponent = HighOrderComponent(wrappedComponent)
我们来看一个高阶组件的应用场景。
现在有一个在界面上显示当前时间的组件，每一秒变化一次。现在我们需要重用这个组件，比如有一个聊天框，我们需要在下面显示当前的时间。我们可以看一下clock组件中的代码
componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
它的主要逻辑就是实现一个计时器。在didmount生成一个定时器，在willunmount清除这个计时器，有一个tick方法用来更新当前时间的状态。如果我们要在一个聊天功能的页面中有一个显示时间功能，可以在这个页面加上定时器的逻辑来实现，还一种方法是把clock组件直接放入其中。如果把clock组件引入，有一个问题，clock组件决定了时间显示成啥样，但是如果我们的聊天页面需要显示另外一种时间格式，那么会有一些麻烦。比如聊天功能我们只是需要一个计时器来知道每秒的时候，如何展示是自己来决定，但是又不想重复实现这个逻辑。此时，便可以引入高阶组件的概念。用高阶组件来实现计时器的逻辑，然后把这个时间传递给聊天页面。
我们可以写一个计时器的代码，用来产生高阶组件。
export default function withTimer(WrappedComponent) {
return class extends React.Component {
state = { time: new Date() };
componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
time: new Date()
});
}
render() {
return <WrappedComponent time={this.state.time} {...this.props} />;
}
};
}
这个函数可以给已有的组件注入一个计时器的功能。它接收一个组件作为参数，并且返回一个组件作为返回值。可以看到它内部有正常的生命周期方法，但是它的render函数并没有自己任何新的东西，只是把传入的组件render，但是会增加一些其他的属性。比如这里增加的是time属性。
回到聊天页面，我们想要在其中加入计时器的功能，便可以引入这个withTimer，我们现在导出的是封装后的高阶组件。
render() {
return (
<div>
<MessageList messages={this.state.messages} />
<div>
<input value={this.state.inputMsg} />
<button onClick={this.handleSend}>Send</button>
</div>
<h2>{this.props.time.toLocaleString()}</h2>
</div>
);
}
}
export default withTimer(ChatApp);
此时，原组件有了time的属性，我们把它在render方法中展示出来，显示一个当前时间的字符串。我们可以看到时间已经在聊天页面展示了，但是我们并不是重用了clock组件，而是写了一个高阶组件的函数，这个函数实现了一个定时器的逻辑，把时间通过props传入原组件。同样的，我们需要在另一个组件中实现不同格式的时间，也是很容易的，只需要把props传入的时间通过另一种格式展示出来就ok了。
以上便是高阶组件的一个应用场景实例，它可以帮你去实现一些通用的逻辑被不同组件使用，但是它自身并没有任何UI展现。
2.函数作为子组件
函数作为子组件是一个设计模式而不是react一个新的特性。看如下代码，定义了一个myComponent。
class myComponent extends React.Component {
render( ) {
return (
<div>
{this.props.children('able Feng')}
</div>
);
}
它是直接调用了children这个函数，说明它已经假设传入的children为一个函数。使用的时候需要在mycomponent的子元素中定义一个函数，这个函数接收一个参数返回一个节点。我们不是直接把一个节点作为children，而是把一个函数作为children。这并不是react的一个特性，而是因为mycomponent已经决定了自己是如何使用children，因此它是一个设计模式而不是一种特殊类型组件。
看如下例子，我们用函数作为子组件的方式来实现让外部告知你如何显示你选中的状态。我们选中一个颜色它直接展示颜色，选中小动物直接展示小动物的图片。
定义一个advancedtabselector组件，它有一个children的属性，我们定义为一个function，即可执行的。除了tab的选中逻辑，现在加入了一个额外的内容区域，this.props.children由外部决定如何render选中的值，如果有value便调用这个children的函数。
render(){
return(
<>
{this.props.value&&this.props.children(this.props.value)}
</>
)
}
在使用这个组件时，我们可以定义一个函数作为这个advancedtabselector组件的children。
<AdvancedTabSelector
options={colors}
value={this.state.color}
onChange={c => this.setState({ color: c })}
>
{color => (
<span
style={{
display: "inline-block",
backgroundColor: color,
width: "40px",
height: "40px"
}}
/>
)}
</AdvancedTabSelector>
它的参数是当前颜色，我们来决定它如何显示颜色，例子中用span来展示颜色。同样的，如果选中是一个animal，定义一个函数接收animal作为参数，渲染出来一个图片。可以看到函数作为子组件有一个特点，一个组件如何render它的内容可以由使用者来决定，对于这个tabselector如何render选中的状态，可以由用tabselector的人来决定，而不是在组件内部不停增加自身功能来适配外部的使用场景，这样组件内部可以只有很小的scope，它的灵活性可以由函数作为子组件来决定。
3.总结：
组件复用的两种形式——高阶组件和函数作为子组件均为使用react的组件的新的方式，称为设计模式，而不是代表react有两种新类型的组件。在工作开发中我们可以结合业务场景去使用这两种设计模式。`
