前段时间看到掘金上有人二面被面试官要求写一个TodoList，今天趁着上班没啥事情，我也来写一个小Demo玩玩。

功能

一个TodoList大致就是长成这个样子，有一个输入框，可以通过输入任务名称进行新增，每个任务可以进行勾选，切换已完成和未完成状态，还可以删除。

组件设计

组件拆分

接下来，我们可以从功能层次上来拆分组件

1. 最外层容器组件，只做一个统一的汇总(红色)
2. 新增组件，管理任务的输入(绿色)
3. 列表组件，管理任务的展示(紫色)，同时我们也可以将每一个item拆分成为单独的组件(粉色)

数据流

组件拆分完毕之后，我们来管理一下数据流向，我们的数据应该存放在哪里？

我们的数据可以放在新增组件里面吗？不可以，我们的数据是要传递到列表组件进行展示的，他们两个是兄弟组件，管理起来非常不方便。同理，数据也不能放在列表组件里面。所以我们把数据放在我们的顶级组件里面去管理。

我们在最外层容器组件中把数据定义好，并写好删除，新增的逻辑，然后将数据交给列表组件进行展示，列表组件只管数据的展示，不管具体的实现逻辑，我只要把列表id抛出来，调用你传递的删除函数就可以了

现在，我们引出组件设计时的一些原则

1. 从功能层次上拆分一些组件
2. 尽量让组件原子化，一个组件只做一个功能就可以了，可以让组件吸收复杂度。每个组件都实现一部分功能，那么整个大复杂度的项目自然就被吸收了
3. 区分容器组件和UI组件。容器组件来管理数据，具体的业务逻辑；UI组件就只管显示视图

数据结构的设计

一个合理的数据结构应该满足以下几点：

1. 用数据描述所有的内容
2. 数据要结构化，易于操作遍历和查找
3. 数据要易于扩展，方便增加功能

[
    {
        id:"1",
        title:'标题一',
        completed:false
    },
    {
        id:"2",
        title:'标题二',
        completed:false
    }
]

coding

codesandbox.io/s/todolist-…