关于前端:React源码学习Part4Render阶段

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 阶段后续更新，预知后事如何，敬请期待 …