React类组件两种setState写法是否存在功能或性能差异？

核心区别 #

• 渲染次数差异
  在React默认的合成事件、类组件生命周期函数等执行上下文中，两种写法不会有渲染次数的区别：React会自动收集同一同步执行栈内的所有setState请求，合并状态后仅触发一次重渲染，此时两种写法的运行效率完全一致。
  但如果是在setTimeout、原生DOM事件监听、async/await异步回调等脱离React默认批量更新控制的上下文中，v2的两次独立setState调用会触发两次重渲染，而v1仅会触发一次。
• 状态合并结果差异
  两种写法的最终状态合并结果完全一致：setState采用浅合并逻辑，不管是单次传入多个状态字段还是分多次传入，都会将传入的字段增量合并到现有状态上，不会出现某一个字段被覆盖丢失的问题。

v2写法会不会导致卡顿或异常？ #

绝大多数常规场景下不会出现卡顿或异常问题，只有两种特殊情况需要注意：

1. 如果你在非批量更新上下文里大量使用v2这类多次setState的写法，且当前组件本身的渲染逻辑很重，多次不必要的重渲染可能会带来可感知的性能损耗，这种情况建议合并为单次setState调用优化。
2. 如果你的第二次setState依赖第一次更新后的状态值计算新状态，直接传对象的写法可能因为读取到旧状态导致逻辑异常，这种场景不管用v1还是v2，都建议改用函数式setState写法：

setState(prevState => ({
  firstState: prevState.firstState + 1
}))

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