关于react生命周期

Question

一个父组件中包含着四个子组件

为什么子组件的componentDidMount在所有子组件的render方法完成后执行？如下图

我所理解的执行顺序：

Answer 1

你可以想下，virtualDOM diff后的替换render，究竟是四个打包在一起做，还是说我一个个替换render好，这两者的渲染成本不是一个级别的。而且如果组件1 didmount了，这时候组件二的render计算影响了组件1的排版，是不还会触发一遍组件1 DOM的重绘。

最简单的例子就是，在100次for循环中，做innerHTML的赋值，还是选择把一百次的html叠加起来，最后一次性对innerHTML赋值

Answer 2

就是不停的回调啊,调完了才出栈, 把下面JSX转成JS可能看得清除点.

class MyOne extends Component {
  render() {
    return <h1>MyOne</h1>;
  }
}
class MyTwo extends Component {
  render() {
    return <h1>MyTwo</h1>;
  }
}

class Me extends Component {
  render() {
    return (
      <>
        <MyOne></MyOne>
        <MyTwo></MyTwo>
      </>
    );
  }
}

class MyOne extends Component {
  render() {
    return React.createElement("h1", null, "MyOne");
  }
}

class MyTwo extends Component {
  render() {
    return React.createElement("h1", null, "MyTwo");
  }
}

class Me extends Component {
  render() {
    return React.createElement(React.Fragment, null, React.createElement(MyOne, null), React.createElement(MyTwo, null));
  }
}