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