使用 React 实现 todo list 的 curd 操作
内容提要
这篇文章介绍了如何使用React框架实现一个简单的todo list。文章首先介绍了创建React项目的步骤，然后展示了如何使用.map()方法来展示数据列表，并使用key属性来标识每个列表项。接着介绍了如何通过useState()来获取输入的值，并使用setList()方法将输入的数据添加到列表中。文章还介绍了如何删除和修改列表中的数据，并强调了key属性的重要性。最后，文章提供了完整的代码和GitHub链接。
延伸解读
为什么用 id 而不是下标作为 key
文章在删除和修改操作中，始终以列表项的 id 作为标识进行匹配，而不是使用数组下标。这是因为 React 的 key 用于标识列表项的唯一性，若使用下标，当列表顺序变化或增删时，可能导致状态错乱或渲染性能下降。作者也引用了官方文档和自身对 key 作用的分析，强调不同 key 类型（如随机数、下标、对象 id）的区别。
React 与 Vue 在数据更新上的差异
文章指出 React 没有实现 Vue 那样的双向绑定，因此需要通过 useState 获取输入值，并手动调用 setList 更新数据。在添加、删除、修改时，都不能直接操作原 list，而是使用 concat、filter、map 等方法生成新数组后再 setList。这体现了 React 不可变数据的原则，也是与 Vue 响应式系统的主要区别之一。
删除操作中的异步处理与注意事项
在删除列表项时，文章使用 setTimeout 延迟 300 毫秒再执行 setList，这可能是为了模拟异步或避免直接操作。同时强调不要直接在 list 上操作，而是通过 filter 过滤掉不需要的数据，或使用副本执行 splice。这样做既符合 React 的状态更新规则，也能避免副作用和潜在 bug。
修改功能的实现方式与组件设计
修改数据时，文章新建了一个 EditModal 弹窗组件，通过 props 接收 open、data 等状态，并在内部用 useState 管理输入值。当点击确定时，调用 onOk 回调，将新数据回填到列表中。列表页则通过 map 判断 id 是否匹配来更新对应项。这种设计将弹窗逻辑与列表逻辑分离，便于复用和维护。
Q&A
如何使用React创建一个todo list项目？
可以使用create-react-app命令快速创建项目，命令为$ npx create-react-app my-app。
在React中如何展示todo list的数据？
可以使用.map()方法遍历数据列表，并通过key属性标识每个列表项的唯一性。
如何在React中添加新项到todo list？
使用useState()获取输入值，并通过setList()方法将新数据添加到列表中。
React中如何删除todo list的项？
可以使用filter()方法过滤掉不需要的项，并通过setList()更新列表。
在React中如何修改todo list的项？
可以通过弹窗输入新数据，并更新列表中的对应项。
为什么在React中使用key属性很重要？
key属性用于标识列表项的唯一性，确保React能够正确渲染和更新列表。
