React页面渲染简介

  • React页面渲染产生在Render阶段， Render阶段分两类，Mount阶段(首次渲染页面)和Update阶段(页面更新)
  • Mount阶段和Update阶段都有“递”和“归”两个阶段。

  • 什么是“递”和“归”：

    1. "递阶段"：一部分是依据深度优先准则递归遍历，在递归过程中给每个节点打上不同的标记，且生成对应的Fiber节点。
    2. “归阶段”： 完了再从之前遍历的最初一个节点，往下层遍历，在遍历过程中针对不同标记的Fiber节点，执行不同的操作。

Mount阶段渲染原理：

  1. Render阶段会递归遍历将要挂载的组件，可能是Class组件或Hook组件。遍历准则是深度优先，从上倒下，先子级节点后兄弟节点
  2. 遍历阶段次要通过两个办法，**beginWork和completeWork。
  3. beginWork的性能("递阶段")：beginWork次要是将遍历的节点打上不同的标记，不同的HTML节点、文本、组件(自定义组件)对应不同的标记，创立Fibre节点。

  4. complete的性能(“归阶段”)： 拿到创立好的Fibre节点，生成对应的DOM节点，再插入到DOM树中。

    • 拿到创立好的Fibre节点 => 生成对应的DOM节点(createInstance办法) => 插入到DOM树(appendChildren办法) => 将以后Fiber节点父级的stateNode赋值创立的DOM => 依据Fibre不同的标记执行不同的属性设置操作 => 查看DOM节点的props属性合法性 => 初始化DOM属性 => 设置DOM属性值 => 一个Fibre节点的complete阶段实现

PS：Update阶段后续更新，预知后事如何，敬请期待...