wookLoop
中有两个轮询执行的函数体,第一个循环目的是调用beginWork
去处理一些事情,此循环有一个全局状态:workInProgress
,类型是fiberNode,代表正在处理中的workInProgress
。
beginWork
接受workInProgress
执行并返回一个fiberNode,并将全局状态标记workInProgress
指向这个返回的iberNode节点,往复循环,直到下一个fiberNode节点为null。
当下一个fiberNode节点为null时,开启第二个轮询执行,此次轮询执行也记录了一个全局状态node
,同样是fiberNode类型,调用completeWork
执行一些任务之后,会去找node的sibing节点,如果有的话,则跳出这个轮询进入外层的轮询,并且会把workInProgress
指向sibing,让beginWork
去处理sibing,如若没有sibing了,也就是没有兄弟节点了,则不会跳出第二个轮询,而是将node
指向node
的父节点然后去执行completeWork
,如果没有兄弟节点也没有父亲节点,则停止工作。
beginWork是wookLoop中的一个重要步骤,它负责创建React元素树中的fiber节点,并将它们连接成一个树形结构。在这个过程中,beginWork会基于上一次渲染保存的fiber节点进行比较,以决定哪些节点需要更新,哪些节点可以复用,哪些节点需要被删除等等。
- completeWork
completeWork是wookLoop中的最后一步,它负责完成fiber节点的更新和渲染。在这个过程中,completeWork会将新生成的React元素树与旧的React元素树进行比较,最终确定哪些节点需要更新,哪些节点可以复用,哪些节点需要被删除等等。完成之后,completeWork会将新的React元素树提交到渲染管道中,更新UI界面。