为何React中对同一state属性多次调用setState仅生效最新值？

示例代码 #

import { Component } from "react";

export class SimpleButton extends Component {
   constructor(props) {
      super(props);
      this.state = {
         counter: 0,
      }
   }
   
   render() {
      return (
         <button onClick={this.handleClick}>
            ...
         </button>
      )
   }
   // ...

   handleClick = () => { 
      for (let i = 0; i < 5; i++) {
         this.setState({ counter: this.state.counter + 1});  // 同一state属性的多次变更会被合并，仅最终值生效
      }                                                      // 因此整个循环等效于只执行一次该语句
   }
}

问题 #

有人告知，对同一state数据属性多次调用setState时，除最新值外其余变更都会被合并，因此上述循环等效于只执行一次this.setState({ counter: this.state.counter + 1});。但我疑惑React为何采用这种设计？难道setState()不是将每次操作加入任务队列，之后React依次取出执行吗？若如此，5次setState调用应生成5个任务并依次执行，这种设计难道不是更直观且不易出错？

解析 #

• 性能优化是核心考量：如果每次调用setState都立即触发组件重渲染，短时间内多次调用会导致页面频繁重绘，引发卡顿。React会把同一事件循环内的所有setState请求批量合并，只触发一次重渲染，大幅减少不必要的DOM计算和渲染操作，保证页面流畅性。比如按钮点击这个事件流程里，不管调多少次setState，最后只会更新一次DOM。

• 异步批量更新的机制：在React的合成事件、生命周期钩子这类场景中，setState是异步的——它不会立即修改state，而是把更新请求放入队列。React会等待当前事件处理完成后，统一处理队列中的更新，合并对同一state属性的多次变更，用最终的状态值来更新。这就导致你的循环里，每次调用setState时取到的this.state.counter都是初始值0，所以5次计算都是0+1，最终counter只会变成1。

• 不是"忽略"，是"合并"：React并非直接丢弃前面的更新请求，而是对同一属性的多次更新做合并处理。如果你的循环里同时更新不同的state属性（比如counter和username），每个属性的更新都会被保留，最后一起应用。只有针对同一属性的多次更新，才会合并成最终的那个值。

• 实现预期累加的正确方式：如果想要每次更新都基于前一次的最新state，应该使用函数式的setState写法：

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

  这种写法会让React每次都传入更新后的前一次状态，循环5次后counter就会正确变成5。

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