一、渲染过程
1、更新
更新的场景:
- 重新调用ReactDOM.render,触发根节点更新
- 在类组件的实例对象中调用setState,会导致该实例所在的节点更新
节点的更新
- 如果调用的是ReactDOM.render,进入根节点的对比(diff)更新
- 如果调用的是setState
-
- 运行生命周期函数,static getDerivedStateFromProps
-
- 运行shouldComponentUpdate,如果该函数返回false,终止当前流程
-
- 运行render,得到一个新的节点,进入该新的节点的对比更新
-
- 将生命周期函数getSnapshotBeforeUpdate加入执行队列,以待将来执行
-
- 将生命周期函数componentDidUpdate加入执行队列,以待将来执行
-
后续步骤:
- 更新虚拟DOM树
- 完成真实的DOM更新
- 依次调用执行队列中的componentDidMount
- 依次调用执行队列中的getSnapshotBeforeUpdate
- 依次调用执行队列中的componentDidUpdate
import React, {
Component } from 'react'
class CompA extends React.Component {
state = {
a: 123,
b: "abc"
}
render() {
return (