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

React源码Part-1——代数效应：https://segmentfault.com/a/11...
React源码Part2——渲染原理： https://segmentfault.com/a/11...
React源码Part3——Fiber架构：https://segmentfault.com/a/11...
React源码Part4——Render渲染(Mount阶段)：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...

Render渲染(Update阶段)

• 同Mount阶段一样，也是有“递”和“归”两个阶段

"递阶段"

1. 同Mount阶段不同的是，在beginWork方法中会进入 if (current !== null)这一条件分支，里面会对此次构建的Fibre和上次的Fibre节点进行比较

    if (
      oldProps !== newProps ||
      hasLegacyContextChanged() ||
      (__DEV__ ? workInProgress.type !== current.type : false)
    ) 

2. 会给didReceiveUpdate字段赋值，用于判定是否发生变化
3. 如果Fiber节点前后无变化，则进入bailoutOnAlreadyFinishedWork方法
4. 若没有满足条件，则进入switch语句，根据不同的case条件，执行不同的操作

• "递阶段图解"
  

“归阶段”

“归阶段的diff优化”

• 在update阶段时，会对diff算做优化，抽离出发生变化的Fibre节点，仅更新那些发生改变的Fibre节点
• 发生改变的Fibre节点会形成一个链表，仅重新构建这些链表中的Fibre节点
• 在“归阶段”结束后，这些需要更新的链表会被挂载到根节点；后面更新时，能从根节点开始更新
• 结论： 以前是深度遍历更新，未发生改变的节点也会参与到遍历中。而现在是未发生改变的Fibre节点可以直接复用，仅重新构建发生改变的Fibre。这也是双缓存机制的应用点，无论是遍历的程度和速度都提高了，

“归阶段的流程”

1. 归阶段发生在completeWork方法，在该方法中会根据不同的tag在swich语句中执行不同的case内容。
2. preareUpdate方法：在更新阶段的中会得到一个更新队列，这个队列是此次更新需要更新的Fibre，也就是构建的workInProgerss。
3. markUpdate方法：更新队列中后指时时，会给对应的Fibre节点打上更新标记。
4. 接着执行completeWork方法后面的内容，直至commit提交阶段
5. 归阶段图解