为何Object.assign与React setState值更新不符合预期？

一、为什么Object.assign返回{b:5}而非{b:7}？ #

咱们直接拆解这段代码的执行逻辑：

var a={b:1}; 
Object.assign(a,{b:a.b+2},{b:a.b+4}); 
console.log(a); // 输出 {b:5}

这里的核心是Object.assign会先一次性计算所有源对象的表达式值，再按顺序把属性复制到目标对象，具体步骤如下：

• 第一步，准备所有传入Object.assign的参数：
  • 目标对象是a，此时a.b的初始值为1；
  • 第二个参数{b:a.b+2}会先被求值，计算出1+2=3，所以这个对象实际是{b:3}；
  • 第三个参数{b:a.b+4}同样先完成求值，1+4=5，实际是{b:5}；
• 第二步，Object.assign开始执行复制操作：先把{b:3}的属性赋值给a，此时a变为{b:3}；接着再把{b:5}的属性覆盖到a上，最终a的b值就是5。

简单说，所有源对象的表达式都是基于执行Object.assign前的原始a对象计算的，不会因为中间对a的赋值就更新后续表达式的计算结果。

二、为什么三次React setState后value值为1而非3？ #

这个问题的核心在于React的批量更新机制+对象式setState的求值时机：

// 初始this.state = { value: 0 };
this.setState({ value: this.state.value + 1});
this.setState({ value: this.state.value + 1});
this.setState({ value: this.state.value + 1});

具体执行逻辑是：

• 在React的合成事件或生命周期钩子中，setState调用会被批量处理；当你传递对象形式的setState参数时，这个对象的表达式会立即求值，而此时this.state还是未更新的初始状态（value=0）；
• 所以三次setState的参数实际上都是{value: 0+1=1}；
• React最后批量处理这些更新时，只会应用最终的合并结果，所以最终state的value值为1。

如果想要实现累加得到3的效果，你需要使用函数式的setState，它会接收上一次更新后的state作为参数，确保每次更新都基于最新状态：

this.setState(prevState => ({ value: prevState.value + 1 }));
this.setState(prevState => ({ value: prevState.value + 1 }));
this.setState(prevState => ({ value: prevState.value + 1 }));

这样每次更新都会基于前一次的结果，最终value就会变成3。

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