共计 703 个字符，预计需要花费 2 分钟才能阅读完成。
React 页面渲染简介
- React 页面渲染产生在 Render 阶段，Render 阶段分两类，Mount 阶段 ( 首次渲染页面 ) 和 Update 阶段 ( 页面更新)
- Mount 阶段和 Update 阶段都有“递”和“归”两个阶段。
-
什么是“递”和“归”：
- “ 递阶段 ”：一部分是依据深度优先准则递归遍历，在递归过程中给每个节点打上不同的标记，且生成对应的 Fiber 节点。
- “归阶段”： 完了再从之前遍历的最初一个节点，往下层遍历，在遍历过程中针对不同标记的 Fiber 节点，执行不同的操作。
Mount 阶段渲染原理：
- Render 阶段会递归遍历将要挂载的组件，可能是 Class 组件或 Hook 组件。遍历准则是深度优先，从上倒下，先子级节点后兄弟节点
- 遍历阶段次要通过两个办法，**beginWork 和 completeWork。
- beginWork 的性能 (“ 递阶段 ”)：beginWork 次要是将遍历的节点打上不同的标记，不同的 HTML 节点、文本、组件(自定义组件) 对应不同的标记，创立 Fibre 节点。
-
complete 的性能(“归阶段”)： 拿到创立好的 Fibre 节点，生成对应的 DOM 节点，再插入到 DOM 树中。
- 拿到创立好的 Fibre 节点 => 生成对应的 DOM 节点(createInstance 办法) => 插入到 DOM 树(appendChildren 办法) => 将以后 Fiber 节点父级的 stateNode 赋值创立的 DOM => 依据 Fibre 不同的标记执行不同的属性设置操作 => 查看 DOM 节点的 props 属性合法性 => 初始化 DOM 属性 => 设置 DOM 属性值 => 一个 Fibre 节点的 complete 阶段实现
PS：Update 阶段后续更新，预知后事如何，敬请期待 …
正文完