react-渲染过程--新节点挂载

渲染: 生成用于显示的对象, 以及将这些对象转化为真实的dom对象

名词解释(本文章,不是针对react)

• React元素: 通过React.createElement创建(语法糖jsx)
• React节点: 专门用于渲染到ui界面的对象
• 节点类型:
  • DOM节点: 创建该节点的React元素类型是一个字符串(div, p, h1等)
  • 组件节点: 创建该节点的React元素类型是一个函数或者是一个类
  • 文本节点: 由字符串创建
  • 空节点: null, undefined, boolean
  • 数组节点: 该节点由一个数组创建
• 真实DOM: 通过document.createElement创建
• 递归: 返回渲染第1步(根1)进行新的渲染操作

首次渲染(新节点渲染)

1. 通过参数的值创建节点(例: React.createElement(‘div’, {props}, child1, child2))
2. 根据不同的节点,做不同的事情
   1. 文本节点: 通过document.createTextNode创建真实的文本节点
   2. 空节点: 什么也不做
   3. 数组节点: 遍历数组, 将数组每一项递归创建节点
   4. DOM节点: 通过document.createElement创建真实的DOM对象,然后立即设置该真实DOM的各种属性,然后遍历对应React元素的Children属性,进行递归
   5. 组件节点
      1. 函数组件: 调用函数(函数需返回一个可以生成节点的内容),将函数的返回结果递归生成节点
      2. 类组件
         1. 创建该类的实例
         2. 立即调用对象的生命周期方法: static getDerivedStateFromProps
         3. 运行该对象的render方法,得到节点对象,递归渲染
         4. 将该组件的componentDidMount方法加入到执行队列(先进先出),当整个虚拟DOM树构建完毕,并将真实DOM挂载到容器中后,执行该队列
3. 生成的虚拟DOM将会被保存,以便后续使用
4. 将之前生成的真实DOM对象挂载到容器中

例子

代码

APP.js

import React, {
    Component } from 'react'

function CompB() {
   
  return (
    <div>
      <h1>标题</h1>
      {