React中更新对象状态的正确方式：合并状态还是展开运算符？

结论先行 #

你的理解仅适用于React类组件的this.setState，不适用于现在主流的函数组件useState返回的更新函数，这就是两种写法差异的核心原因。

• 类组件的this.setState确实支持传入部分对象的写法，React会自动将传入对象和现有state做第一层浅合并，未指定的key会保留原有值，这种写法在类组件项目中是完全符合官方规范的。
• 函数组件的useState更新器没有自动合并逻辑，如果你直接传入部分对象，整个state会被直接替换为你传入的对象，其余未指定的key会被直接删除，属于严重的逻辑错误，所以必须用展开运算符手动合并原有状态。

为什么大家普遍推荐展开运算符写法？ #

现在React生态中函数组件已经成为绝对主流，类组件的使用占比极低，统一使用展开运算符手动合并的写法有几个明显优势：

1. 写法通用，不需要区分类组件/函数组件场景，避免场景切换时写错导致bug
2. 即使是类组件，自动合并仅支持第一层浅合并，如果你的state是嵌套对象结构，依然需要手动展开上层对象才能更新嵌套字段，统一用展开运算符的写法可以降低心智负担
3. 搭配函数式更新（即传入prevState => 新state的写法）可以规避闭包陷阱、状态批量更新导致的旧值问题，稳定性更高

下面是函数组件的错误/正确写法参考：

// 函数组件初始state
const [user, setUser] = useState({name: '张三', age: 18})

// 错误写法：执行后user会变成 {age: 20}，name字段直接丢失
const updateAgeWrong = () => {
  setUser({age: 20})
}

// 正确写法：执行后仅更新age字段，name保留原有值
const updateAgeRight = () => {
  setUser(prev => ({...prev, age: 20}))
}

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