在拿到UI设计稿进行组件拆分的时候，我们会把拆分出来的组件分成UI组件和容器组件，UI组件就是专门处理UI渲染的组件，而容器组件就是保存数据和主要逻辑的组件。什么时候应该用UI组件，什么时候应该用逻辑组件呢？
笔者觉得这个问题取决于组件的“复用性”。也就是在一个项目中，不能单独地来看组件的主要功能只是展示还是可以用来数据存储，组件之间毕竟是有联系的，我们要观察组件中所展示的数据是否在别的UI结构中有用到。如果用到，是否所展示的数据来源却不同。下面我们用todolist这个项目来举例分析。数据来源相同和不同的时候，我们应该如何处理。
上图中是一个todolist的项目，我们以之前有存量数据，我们重新加载页面的时刻为例。可以看到主要UI区域分为正在进行和已经完成两个部分，这两部分中的列表的结构大体相似，所以可以用同一个组件来展示，但是他们展示的数据并不一致，所以这里“正在进行”列表和“已经完成”列表中的数据，是需要放在顶层的组件中，再去传到同样的一个列表组件中，这样列表组件就可以复用了，而且数据也可以由上层组件来传入。
我们再来看一个问题，如果我们希望右上角中，“添加todo”的这个输入有一些备选项，请求和请求回来的数据应该如何安排呢？其实这里的逻辑是“添加todo”所独有的，为了与其他组件逻辑解耦，可以把备选项的数据请求和返回数据就放到“添加todo”这个组件之中。
下面我们用伪代码来简易实现一下：
最顶成的实现中，我们把界面划分成了三个模块，如上所述，在顶层来请求任务数据，再把任务数据分发给下面的两个组件OnGoing和Finished：
在OnGoing组件中，引入了通用列表组件TaskList：
在Finished组件中，引入了通用列表组件TaskList：
在TaskList组件中，迭代实现props传入的数据：
在TopBar组件中，请求了输入提示的数据：
更多精彩文章敬请关注：
