react 大致调度流程

166 阅读1分钟

本文基于 react 18.3.1

  1. scheduleUpdateOnFiber:无论是首次渲染(updateContainer里调用)还是更新渲染(dispatchSetState里调用)都会调用 scheduleUpdateOnFiber 函数,该函数调用ensureRootIsScheduled;
  2. ensureRootIsScheduled:从最新的优先级里提取最高优先级 (1)如果最高优先级为同步优先级:往syncQueue里加入 performSyncWorkOnRoot 用queueMicrotask函数往微任务队列里加入回调函数flushSyncCallbacks(遍历执行syncQueue里的函数,执行完后调用unstable_scheduleCallback(ImmediatePriority, flushSyncCallbacks),相当于往宏任务里加入(用的MessageChannel)flushSyncCallbacks,作用是执行后续流程中产生的同步任务) (2)并发模式,调用performConcurrentWorkOnRoot: a,按是否需要时间分片调用renderRootConcurrent或renderRootSync; b,根据这调用结果进行处理 c,调用ensureRootIsScheduled,实现如果有新的任务产生,则加入任务列表中等待调度; d,如果处理过程中,超过了时间片(5ms),则本次的任务没有处理完成(root.callbackNode === originalCallbackNode,如果处理完成了,会在commitRootImpl里把callbackNode设为null),返回performConcurrentWorkOnRoot,以便在scheduler的workLoop里继续调用该函数

截屏2024-11-14 15.33.28.png

unstable_scheduleCallback调用梳理

截屏2024-11-22 10.41.47.png