react-debugger-1

Posted 2022-03-07 lin-fighting

整体流程图概览

从ReactDOM.createRoot到beginWork

createRoot会创建FiberRoot和rootFiber，并且初始化fiber.updateQueue
然后到了render

从render开始，创建update，插入updateQueue，开始调度，判断是否同步，执行对应的performSyncWorkOnRoot/performConcurrentWorkOnRoot开启render阶段。

ReactDOM.render到render阶段的流程

同样的场景FiberRoot和rootFiber，然后调用ensureRootIsScheduled，跟concurrent mode一样，进入调度。

render阶段和commit阶段的连接

• render阶段是在内存中执行的，commit阶段是同步的，也就是，render阶段需要完成所有fiber的操作，才能交给commit阶段一次性完成渲染。那么
• 如上，我们知道，ReactDOM.render 到最后调用performSyncWorkOnRoot
• React.createRoot().render()，到最后调用performConcurrentWorkOnRoot。
• 对于performSyncWorkOnRoot，
  
  renderRootSync最终会通过while循环，将所有工作处理后，执行commitRoot开启commit阶段
• 对于performConcurrentWorkOnRoot
  
  renderRootConcurrent会通过while循环和shouldYield搭配，处理完所有需要处理的fiber之后，才会执行commitRoot，开启commit阶段。

由上图可以看出，render阶段是可以中断的，而commit阶段是不可中断的。

render阶段的流程图

…