ReactJS useReducer代码疑问：解析...todo, complete: !todo.complete

首先纠正一个小误解：...todo不是展开数组，它是对象展开运算符，作用是把原todo对象的所有属性都复制到新对象里。

你对后半部分的理解是对的——complete: !todo.complete就是把新对象里的complete属性值设置为原todo.complete的取反（原true变false，原false变true）。

整段代码的核心作用是：基于原todo对象创建一个新对象，保留原对象的所有属性，仅修改complete属性的取值。

举个实际例子：
假设原todo对象是：

const todo = { id: 1, text: "整理桌面", complete: false }

执行{ ...todo, complete: !todo.complete }后，生成的新对象是：

{ id: 1, text: "整理桌面", complete: true }

在React里这么写的原因是：React要求状态必须是不可变的，不能直接修改原状态对象（比如直接写todo.complete = !todo.complete），否则React无法检测到状态变化，也就不会触发组件重新渲染。通过创建新对象的方式更新状态，才能让React正确识别状态变更，完成页面更新。

内容的提问来源于stack exchange，提问作者olinone.in