ReactJs中待办列表的完成勾选函数handleComplete的工作原理是什么？

待办勾选函数逻辑详解 #

整体执行流程 #

这个handleComplete是React框架下用于切换待办完成状态的状态更新函数，完整逻辑如下：

• 函数接收的todo参数是用户点击勾选的对应待办项的完整数据对象，通常是你在渲染待办列表绑定点击事件时传入的，比如列表渲染代码里一般会写onClick={() => handleComplete(todo)}完成传参。
• 调用setTodos更新待办列表状态，因为React要求不能直接修改原状态数组，所以这里用数组map方法生成全新的待办数组实现不可变更新。
• 你提问的item是map方法遍历原todos数组时的当前遍历项：map会按顺序挨个取出原todos数组里的每一个待办对象，每一轮遍历都会把当前取出的待办对象传入回调函数，这个传入值就是item参数。
• 遍历过程中会匹配item.id和传入的todo.id：
  • 两者相等时说明找到了用户点击的那一条待办，返回一个新的待办对象，保留原有全部属性的同时把completed状态取反（勾选切换为未勾选，反之亦然）
  • 两者不相等时直接返回原item不作任何修改
• 最终map生成的全新数组会传入setTodos完成状态更新，触发页面重新渲染，对应待办的勾选状态就会同步更新。

内容的提问来源于stack exchange，提问作者Babilon