React是否保持状态更新顺序？同/跨组件场景疑问解析

先直接给你明确结论，再展开细节拆解：

1. 同组件场景：绝对可以信任调用顺序，不会出现a=false且b=true的情况 #

看你第一个示例的代码：

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: false, b: false };
  }
  render() {
    return <Button onClick={this.handleClick}/>
  }
  handleClick = () => {
    this.setState({ a: true });
    this.setState({ b: true });
  }
}

在React的批量更新机制下（合成事件如onClick属于批量更新场景），这两次setState会被合并成一个更新任务：最终的状态是{a: true, b: true}，而且React不会在中间渲染只更新了b的状态。

即使是非批量场景（比如把setState放在setTimeout里），React也会严格按照调用顺序执行更新：先把a设为true，再把b设为true，两次渲染会依次发生，但永远不会出现a=false同时b=true的状态——因为第一次渲染已经把a改成true了，第二次才改b。

2. 跨组件场景：分批量/非批量模式，大部分场景下不会出现目标状态 #

假设你的第二个示例是跨组件调用setState的场景（比如父组件和子组件分别更新自己的状态），类似这样：

class SuperContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: false };
    this.childRef = React.createRef();
  }

  handleClick = () => {
    this.setState({ a: true });
    this.childRef.current.setState({ b: true });
  }

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleClick}>Click</button>
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { b: false };
  }
}

批量更新模式（合成事件、生命周期内） #

这种场景下，React会收集所有跨组件的setState调用，按调用顺序处理，然后一次性触发所有组件的渲染。也就是说，用户看到的最终渲染结果是两个状态都更新后的样子，不会出现a=false且b=true的中间状态——因为React不会在处理完一个组件的更新后就立即渲染，而是等所有更新任务都处理完再统一渲染。

非批量更新模式（原生事件、setTimeout、Promise回调等） #

这种场景下，每个setState会立即触发对应组件的渲染。比如如果调换调用顺序：

handleClick = () => {
  setTimeout(() => {
    this.childRef.current.setState({ b: true });
    this.setState({ a: true });
  }, 0);
}

这时候会先渲染子组件（b=true），再渲染父组件（a=true），用户可能会短暂看到a=false且b=true的状态，但这不是因为React打乱了调用顺序——而是因为两次渲染是独立发生的，顺序严格遵循你调用setState的顺序。

总结 #

• 同组件：无论批量/非批量，绝对不会出现a=false且b=true的情况，更新顺序完全可靠。
• 跨组件：批量模式下不会出现该状态；非批量模式下只有当你先调用子组件setState再调用父组件时，才会短暂出现，但这是渲染顺序导致的，并非更新顺序被打乱。

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