React类组件更新阶段render早于componentDidUpdate执行相关疑问

认知偏差修正 #

• setState触发后state的更新早于render方法执行，并非在componentDidUpdate阶段才完成更新，这是最核心的理解错误。
• 不要把内存中的state更新和页面真实DOM更新的时机绑定：state是React维护在内存中的状态对象，更新完成后才会进入后续的渲染流程；而componentDidUpdate是真实DOM渲染完成后的通知钩子，和state更新没有直接关联。

执行逻辑原理 #

React类组件的更新流程分为两个独立阶段，你观察到的执行顺序完全符合React的内置规则：

1. Render阶段（可中断、异步执行） #

调用setState后，React首先会合并状态变更，计算得到最新的this.state，再执行render方法生成最新的虚拟DOM树，和上一次的虚拟DOM做Diff对比，得出所有需要更新到真实DOM的变更集合。
这一阶段全程不操作真实DOM，所以你在render中可以直接读取到更新后的state值。

2. Commit阶段（不可中断、同步执行） #

Diff计算完成后进入commit阶段，按顺序执行以下操作：

1. 触发getSnapshotBeforeUpdate生命周期：此时真实DOM还未更新，入参prevProps、prevState为更新前的属性和状态，可用于获取更新前的真实DOM信息，返回值会作为第三个参数传入componentDidUpdate。
2. React将所有计算好的变更批量同步到真实DOM，此时页面UI才会发生实际变化。
3. 最后触发componentDidUpdate生命周期：此时真实DOM已经完成全部更新，所以官方文档说明该钩子内可安全访问最新的DOM节点。

示例代码对应更新顺序 #

你提供的代码日志编号标注有误，setState触发更新后的实际执行顺序如下：

setState({name: "XYZ"}) → 计算新state → 执行render（打印 5 render） → 执行getSnapshotBeforeUpdate（打印 3 getSnapshotBeforeUpdate） → 真实DOM更新 → 执行componentDidUpdate（打印 4 componentDidUpdate）

示例代码 #

import React, { Component } from "react";

export default class getSnapshotBeforeUpdateMethod extends Component {
  constructor(props) {
    console.log("1 constructor");
    super(props);
    this.state = {
      name: "ABC"
    };
  }

  componentDidMount() {
    console.log("2a componentDidMount");
    setTimeout(() => {
      console.log("2b Inside componentDidMount");
      this.setState({ name: "XYZ" });
    }, 3000);
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("3 getSnapshotBeforeUpdate");
    document.getElementById("previous-state").innerHTML =
      "The previous state was " + prevState.name;
  }
  componentDidUpdate() {
    console.log("4 componentDidUpdate");
    document.getElementById("current-state").innerHTML =
      "The current state is " + this.state.name;
  }
  render() {
    console.log("5 render");
    return (
      <>
        <h5>This is a {this.state.name}</h5>
        <p id="current-state"></p>
        <p id="previous-state"></p>
      </>
    );
  }
}

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