从React组件划分的纠结到总结

在实际开发项目中，我将所有的React组件划分为容器组件和展示组件，展示组件其实就是一个纯函数组件，没有任何副作用，基本都是PureComponent。但是突然，出现了这么一个问题：

我有一个浮层组件Layer，它是一个展示信息明细的面板类似于这种，就比如订单下单之后，在价格边上有个查看明细，这时候点击就会弹出该浮层。我有多个页面要用到类似的浮层，因此我毫不犹豫地将它单独抽离出来。它的内容以及是否展示，由它的props来决定，也就是在容器组件内部。

但是我发现两个问题：

1，虽然浮层展示是由外部控制，但是浮层隐藏却是由浮层自己控制，比如点击浮层内部某个按钮它自动消失，那这样有两个方式：

　　第一，把点击消失的事件也放到外层，但是其实所有浮层组件的消失事件都是一样的，就是让它隐藏而已，如果每次调用该组件都要重复定义该动作，有些浪费。

　　第二，把点击消失的事件放到组件内部，然后用state来控制，至于组件展示的props，可以通过生命周期函数componentWillReceiveProps来控制state，但是这样的话又显得这个组件非常复杂，既有外部状态，又有内部状态，而且考虑到v16.3版本后该生命周期函数会被废掉，又要考虑其它的。。。

2，当容器组件非常复杂时，我为了展示一个浮层，却要把整个容器组件都re-render一遍，似乎有点因小失大。

当时我的项目技术选型，数据流管理用的是mobx，于是我决定，将它单独与一个layerStore来进行映射，它的状态监听全部放在store里，包括点击事件，这样有个好处是相当于我这个浮层组件已经脱离任何调用它的组件了，因为它的状态和事件都和那些组件无关了，它只取决于自己的store，只不过我可以在需要调用它的时候，在外部组件的事件里多写一行：layerStore.showLayer();

但是这种方式的坏处就是：

1，这个组件无法做到复用到其他项目中（如果别的项目没有用mobx，那这种绑定store的方式也就废弃了）；

2，这个组件成了一个真正意义上的‘公共’组件，它不属于某个组件内的，因为它的store是公共的。我们看似公用了一个组件，但实际上，都是在操作一个store，没有办法同时存在两个不同状态的Layer。

想到这儿，我的纠结症已经快令我抓狂了。到底哪种实现方式最佳？最终我还是选择了后者，因为在当前项目中，后者一定更优一些，因为我们不存在两个浮层同时出现的情况。那如何选择实现方式，实际上是看你对组件的理解了，角度不同，实现方式自然不同。就像这个浮层组件，如果你理解的它是每个组件都拥有各自的浮层，那么你应该会选择前者，如果你理解的它是唯一一个，是公用的，它就藏在屏幕下面，只是不停地改变样子罢了，那你应该选择后者。

最后，依然要考虑到性能问题，不要捡了芝麻，丢了西瓜。