image.png

image.png

image.png

image.png

先经过babel，进行React.createElment的包裹，然后被react和react-dom执行。
createElement函数就会根据类创建一个实例。（App是一个类，）
React.createElement(App, null)
而且每次创建实例的时候，就会先执行类的constructor方法。然后执行实例render方法。返回一个react element的一个元素。然后转换成真实dom，挂载到元素上。渲染到界面上。
然后执行componentDidMount实例方法。
我们通过setState修改数据的时候，会根据新的state数据
会重新执行实例方法的render函数，渲染出来最新的数据。
（注意：setState方法就算里面的state没有发生变化，也会重新渲染界面。）

image.png

image.png

image.png

https://zh-hans.reactjs.org/docs/react-component.html

image.png

在componentDidUpdate之前会先执行getSnapshotBeforeUpdate，在React更新DOM之前回调的一个函数，这个是在更新dom之前执行的，所以获取dom更新之前的一些数据，在这里做一个保存。
；然后更新dom，dom更新完以后，调用componentDidUpdate。

在getSnapshotBeforeUpdate里面可以保存一些旧的数据。

  getSnapshotBeforeUpdate() {
    return {
      useScroll: 1000,
    };
    //这里返回的东西在componentDidUpdate是可以拿到的
  }
  componentDidUpdate(prevPros, prevState, snapsshot) {
    console.log(prevPros, prevState);
//{} {message: 'hello world', isShowMessage: true}
    console.log(snapsshot); //{useScroll: 1000}
    console.log("app did update");
  }