前言
在最近做的一个react项目中，遇到了一个比较典型的需要重构的场景：提取两个组件中共同的部分。
最开始通过使用嵌套组件和继承的方式完成了这次重构。
但是后来又用高阶组件重新写了一遍，发现更好一点。
在这里记录下这两种方式以便之后参考和演进。
本次重构的场景
因为场景涉及到具体的业务，所以我现在将它简化为一个简单的场景。
现在有两个黑色箱子，箱子上都有一个红色按钮，A箱子充满气体，按了按钮之后箱子里面气体变红，B箱子充满泥土，按了之后箱子里面泥土变红。
那么现在上一个简单的重构前代码：
BoxA.jsx
class BoxA extends Component {
state={
color:'black'
}
)
}
}
state={
color:'black'
}
handleClick=()=>{
this.setState({
color:'red'
})
}
handleShake=()=>{
/ 摇动后气体没声音 /
}
render() {
return (
/ 这里面当然没有onShake这种事件，理解意思就行了 /
<div style={{backgroundColor:'black'}} onShake={this.handleShake}>
<button onClick={this.handleClick} style={{backgroundColor:'red'}}>
/* 气体组件，没毛病 */
<气体 color={this.state.color} />
