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");
}
