React源码Part4——Render渲染(Mount阶段)

React源码Part-1——代数效应：https://segmentfault.com/a/11...
React源码Part2——渲染原理： https://segmentfault.com/a/11...
React源码Part4——Render渲染(Mount阶段)：https://segmentfault.com/a/11...
React源码Part4——Render渲染(Update阶段):https://segmentfault.com/a/11...
React源码Part5——commit阶段(处理class组件生命周期)： https://segmentfault.com/a/11...
React源码Part6——Commit阶段(beforeMutation)：https://segmentfault.com/a/11...
React源码Part7——Commit(Mutation阶段)： https://segmentfault.com/a/11...
React源码Part8——Commit(Layout阶段)：https://segmentfault.com/a/11...
参考链接：React技术揭秘——https://react.iamkasong.com/p...

React页面渲染简介

• Render阶段仅仅渲染DOM，不进行DOM操作。Commit阶段才对DOM进行操作，后续会更新文章。
• React页面渲染发生在Render阶段， Render阶段分两类，Mount阶段(首次渲染页面)和Update阶段(页面更新)
• Mount阶段和Update阶段都有“递”和“归”两个阶段。

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

  1. "递阶段"：一部分是根据深度优先原则递归遍历，在递归过程中给每个节点打上不同的标记。如果有子级，生成对应的Fiber节点；没有就进入“completeWork方法”
  2. “归阶段”： 完了再从之前遍历的最后一个节点，往上层遍历，在遍历过程中针对不同标记的Fiber节点，执行不同的操作。

Mount阶段渲染原理：

1. Render阶段会递归遍历将要挂载的组件，可能是Class组件或Hook组件。遍历原则是深度优先，从上倒下，先子级节点后兄弟节点
2. 遍历阶段主要经过两个方法，**beginWork和completeWork。
3. beginWork的功能("递阶段")：遍历传入的Fibre节点，有子级就生成对应的Fibre节点，添加到父级Fibre的child属性上。

4. complete的功能(“归阶段”)： 拿到Fibre节点，生成对应的DOM节点，child属性有值就插入到刚生成的DOM树中。

   • 拿到创建好的Fibre节点 => 生成对应的DOM节点(createInstance方法) => 插入到DOM树(appendChildren方法) => 将当前Fiber节点父级的stateNode赋值创建的DOM => 根据Fibre不同的标记执行不同的属性设置操作 => 检查DOM节点的props属性合法性 => 初始化DOM属性 => 设置DOM属性值 => 一个Fibre节点的complete阶段完成

5. Mount阶段简介

6. Mount阶段具体流程

7.Mount阶段中的beginWork方法如何生成Fibre子节点