在最近做的一个react项目中遇到了一个比较典型的需要重构的场景：提取两个组件***同的部分。

最开始通过使用嵌套组件和继承的方式完成了这次重构

但是后来又用高阶组件重新写了一遍，发现更好一点

在这里记录下这两种方式以便の后参考和演进。

因为场景涉及到具体的业务所以我现在将它简化为一个简单的场景。

现在有两个黑色箱子箱子上都有一个红色按钮，A箱子充满气体按了按钮之后箱子里面气体变红，B箱子充满泥土按了之后箱子里面泥土变红。

那么现在上一个简单的重构前代码：