5.关键节点

[Little-Gee]

一开始讲渲染整体流程的时候其实是比较简略的，是为了形成一个整体印象，方便后面填充。 从这里开始，我们来慢慢补充亿点点细节。 这一节主要分析整条链路的关键节点，暂时不用特别清楚里面具体的每一项东西，知道大概过程即可，之后会详细拆解。

前面分析了应用的启动，其实它的关键作用是触发状态更新，无论是ReactDOM.render或ReactDOM.createRoot，最后都会调用updateContainer。

触发状态更新时，会先创建一个优先级变量，然后再根据这个优先级创建 update 对象，这个对象保存了状态更新相关的内容。 此后，将生成的update加入到upateQueue中。upateQueue是 fiber 上的一个属性，以环状链表的形式存储着update。

有了上面的基础后，再进入到scheduleUpdateOnFiber这个函数，这函数是整个更新任务的开始。在函数内部，主要做了两件事：

1. markUpdateLaneFromFiberToRoot：从触发状态更新的fiber一直向上遍历到rootFiber，更新遍历到的fiber的优先级（也包括fiber.alternate)，最后返回rootFiber。
2. ensureRootIsScheduled：注册调度任务task，等待任务回调。

   有了调度任务，并经过神奇的调度后，最终会根据具体的模式（就是ReactDOM.render或ReactDOM.createRoot）执行函数performSyncWorkOnRoot或performConcurrentWorkOnRoot，无论是哪一种，都会进行fiber树的循环构造，可以称之为render阶段，这是一个深度优先遍历的过程，会依次执行fiber节点的beginWork和completeWork，构建fiber树和生成effectList。

   

   当有了构造完的fiber树后，最后进行的是fiber树的渲染，可以称之为commit阶段，在这阶段会与渲染器交互，渲染真实节点。