react学习—渲染过程（更新和卸载）

一、渲染过程

1、更新

更新的场景：

1. 重新调用ReactDOM.render，触发根节点更新
2. 在类组件的实例对象中调用setState，会导致该实例所在的节点更新

节点的更新

• 如果调用的是ReactDOM.render，进入根节点的对比（diff）更新
• 如果调用的是setState
  • 1. 运行生命周期函数，static getDerivedStateFromProps
  • 2. 运行shouldComponentUpdate，如果该函数返回false，终止当前流程
  • 3. 运行render，得到一个新的节点，进入该新的节点的对比更新
  • 4. 将生命周期函数getSnapshotBeforeUpdate加入执行队列，以待将来执行
  • 5. 将生命周期函数componentDidUpdate加入执行队列，以待将来执行

后续步骤：

1. 更新虚拟DOM树
2. 完成真实的DOM更新
3. 依次调用执行队列中的componentDidMount
4. 依次调用执行队列中的getSnapshotBeforeUpdate
5. 依次调用执行队列中的componentDidUpdate

import React, {
    Component } from 'react'
class CompA extends React.Component {
   
  state = {
   
    a: 123,
    b: "abc"
  }
  render() {
   
    return (