React中setState为何用扩展运算符？两种setValues语法有何区别？

嘿，这两个问题都是React状态管理里的高频疑问，我来给你详细拆解下～

1. 为什么React的setState中要使用扩展运算符？ #

简单来说，扩展运算符（...）在setState里的核心作用就是帮我们安全、完整地更新状态，具体原因有这几点：

• 遵循React的不可变状态原则：React要求我们不能直接修改状态对象（比如this.state.age = 26这种写法是错误的），因为React依赖状态的引用变化来触发组件重新渲染。用...创建原状态的副本，再修改需要更新的属性，就能生成一个全新的状态对象，让React准确识别到状态变化，进而触发渲染。
• 避免状态丢失：如果你的状态包含多个属性，只更新其中一个时，不扩展原状态的话，新状态会直接覆盖掉原来的所有属性。比如原状态是{ name: 'Bob', age: 30 }，要是写setState({ age: 31 })，那name属性就会消失；而用setState({ ...this.state, age: 31 })，就能保留name，只更新age。
• 处理嵌套状态的基础：对于嵌套结构的状态（比如state = { user: { name: 'Alice', address: { city: 'Beijing' } } }），扩展运算符可以帮我们做浅拷贝，确保每一层的引用都是新的（深层嵌套可能需要递归扩展或者用Immer这类库，但浅拷贝是第一步），让React正确感知到嵌套状态的变化。

2. 两种setValues语法的区别 #

先把两种写法摆出来，咱们逐一对比：

第一种（函数式更新）：

setValues(values => ({ ...values, [event.target.name]: event.target.value }))

第二种（直接传递对象）：

setValues({ [event.target.name]: event.target.value })

它们的核心区别主要在这三个方面：

1. 状态更新的依赖方式不同 #

• 函数式写法会接收当前最新的状态作为参数（这里就是values），然后基于这个最新状态生成新状态。这在连续更新状态或者状态更新依赖前一个状态时至关重要——因为React的状态更新是异步批量处理的，如果你连续调用多次setValues，函数式写法能保证每次都基于最新的状态值来更新，不会出现更新丢失的情况。
• 直接传对象的写法，是基于代码执行时的状态快照来生成新状态。如果在异步操作（比如setTimeout、API回调）里用这种写法，很可能拿到的是过时的状态值，因为React还没把之前的更新应用到组件上。

2. 状态覆盖的行为不同 #

• 函数式写法里用了...values，会把原状态的所有属性都复制过来，只更新[event.target.name]对应的属性，不会丢失原有状态的其他属性。比如原values有username和password，更新username后，password依然存在。
• 直接传对象的写法，会直接把这个新对象作为完整的状态，原状态的所有其他属性都会被覆盖。还是刚才的例子，用第二种写法更新username后，password就从状态里消失了，只剩下username。

3. 适用场景不同 #

• 函数式写法是表单输入、连续状态更新、异步操作中更新状态的首选，几乎覆盖了大部分日常开发的场景，能避免很多因为状态异步更新带来的bug。
• 直接传对象的写法只有在你完全想替换整个状态对象，不需要保留任何原有属性时才适合用——比如初始化状态或者重置状态为全新对象，这种场景相对少见。

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