最近开始写react，又重新去学习如何设计组件。
感受最深的是不要为了复用而复用，也不要过度设计。组件设计的目的不仅仅只有复用，还有分治。
拆分组件的意义是更好的解决问题，将复杂的问题简单化。
假设现在一个简单页面上有两个列表，这时候就想到我要写一个list组件，让这两个列表都用这个list组件。但实际上，这两个list组件形态完全不一样，甚至还掺杂了不少样式上的差异。此时就没有必要强行让这两个位置复用同一个组件。
依然是上面那个例子，样式上两个list不太一致，这时候我就想到，要写一个逻辑list组件，只负责逻辑复用，样式由使用者去决定。
这当然也不太合适。任何的组件设计都不能脱离当前的场景，我在写的只是一个简单的页面，伴随而来的可能是需求的快速变更。当产品要求你在其中某一个list上新增特殊逻辑时，这个逻辑list组件可能就需要增加各种if else，组件反而变得非常复杂。
因此，我更好的做法应该分别写两个list组件，不要复用。
感受最深的是不要为了复用而复用，也不要过度设计。组件设计的目的不仅仅只有复用，还有分治。
拆分组件的意义是更好的解决问题，将复杂的问题简单化。
假设现在一个简单页面上有两个列表，这时候就想到我要写一个list组件，让这两个列表都用这个list组件。但实际上，这两个list组件形态完全不一样，甚至还掺杂了不少样式上的差异。此时就没有必要强行让这两个位置复用同一个组件。
依然是上面那个例子，样式上两个list不太一致，这时候我就想到，要写一个逻辑list组件，只负责逻辑复用，样式由使用者去决定。
这当然也不太合适。任何的组件设计都不能脱离当前的场景，我在写的只是一个简单的页面，伴随而来的可能是需求的快速变更。当产品要求你在其中某一个list上新增特殊逻辑时，这个逻辑list组件可能就需要增加各种if else，组件反而变得非常复杂。
因此，我更好的做法应该分别写两个list组件，不要复用。
展开
11
16
![[绝望的凝视]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/jj_emoji_69.cabd864.png)
， 同遭遇的掘友们，来发牢骚吧