1. 准备工作

我们使用官方提供的 create-react-app 来快速创建一个项目。

即使用脚手架创建一个 React 项目。然后进入到项目的目录，并启动。

2. 展示数据

我们的 todo list 结构很简单：

• id: 标识当前的数据；
• title: 要展示的文本；

渲染时，以id作为 key。

一个简单的列表就展示出来了。React 中，我们可以使用.map()来展示数据中的每项数据，注意，这里我们使用了key属性，这个属性是 React 渲染列表时，用于标识当前列表项的唯一标识。

checkbox组件是方便我们后续可以标识已完成该项，并进行去除。

3. 新增数据

我们使用一个input组件来输入数据，但在 React 中没有双向绑定的特性，我们需要通过useState()来获取输入的值。然后再调用setList()方法，将输入的数据添加到列表中。

React 并没有实现 Vue 的双向绑定，需要我们手动实现。

在 React 的 useState() 的 hook 中，我们是不能直接操作list的，需要通过setList()来更新数据。先通过concat()方法把新数据和之前的数据拼接到一起，然后再通过setList()更新数据。

4. 删除数据

我们在 todo list 中添加了一个选中按钮，选中该按钮，表示已完成此项，删除对应的数据。

删除列表中的数据有多种方式，但都不要直接在 list 上直接操作：

1. 找到该数据所在的下标，使用列表的副本执行splice(index, 1)；然后再调用 setList() 更新页面；
2. 如上面样例那样，在列表中过滤掉不需要的数据，filter()方法本来就会返回过滤后的新数组；

5. 修改数据

修改数据时，我们新建了一个弹窗，在弹窗中输入新的数据，然后再回填到列表中。

我们再看下列表页的操作：

修改数据，我们也不是直接在 list 上修改，而是判断某一项是否是修改项，然后赋予最新的数据。

6. 总结

完整的代码，我已放到 github 上： react-todo-list，欢迎自取。

我们在上面的删除和修改操作中，都是以列表项的id作为标识，去列表中进行匹配。并没有使用下标。

在官方文档中也说明了 key 的必要性：渲染列表。同时，我在之前的文章React18 源码解析之 key 的作用里也分析过不同类型的 key 的区别（如随机数、数组下标、对象 id 等）。

原文链接：https://juejin.cn/post/7411847423418695706