React切换列表checked状态三元表达式语法问题解析

这段代码是React购物列表示例中，切换列表项勾选状态的核心实现，基于Array.map遍历生成新的状态数组，遵循React状态不可变的更新规则，核心代码如下：

const listItems = items.map((item) =>
  item.id === id ? { ...item, checked: !item.checked } : item
)

疑问1：item.id和id的区别 #

两个id属于不同作用域下的变量，含义完全不同：

• id是handleCheck函数的入参，是本次操作要修改的目标项的唯一标识：当点击复选框、列表文本或图标触发事件时，会调用handleCheck(item.id)把被点击项的id传入函数，在整个map遍历过程中这个值是固定不变的。
• item.id是map遍历过程中当前正在处理的列表项的自带id属性：map会逐个遍历items数组里的每一项，每轮遍历拿到的当前项存在item变量里，item.id就是当前轮次遍历项的id，用来和目标id做匹配判断。

举个实际运行的例子：如果点击了id为2的列表项，传入handleCheck的id固定为2；map遍历时第一轮处理id=1的项，item.id=1和目标id不匹配；第二轮处理id=2的项，item.id=2匹配成功，执行状态修改；第三轮处理id=3的项，item.id=3不匹配。

疑问2：三元表达式末尾为什么要写: item #

首先三元运算符的语法规则是判断条件 ? 条件成立返回值 : 条件不成立返回值，三个部分必须完整，否则会报语法错误，除此之外: item还有实际业务逻辑上的作用：

• 当item.id === id条件成立时，说明当前遍历到的就是要修改的目标项，返回一个新创建的对象：通过...item浅拷贝原项的所有属性，再把checked属性取反，实现勾选状态切换，同时保证没有直接修改原state对象。
• 当条件不成立时，说明当前遍历到的项不需要做任何修改，: item就是直接返回原有的item对象，保持这一项的数据不变。
• 如果省略这部分，不匹配条件的项会返回undefined，最终map生成的数组会出现空值，渲染列表时直接报错；同时复用无修改的原item对象，能让React在后续渲染比对时快速跳过无变化的项，减少不必要的重渲染。

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