【React原理 - 任务调度之中断恢复】

原创

已于 2024-08-29 10:06:30 修改 · 1.5k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

于 2024-08-28 17:21:28 首次发布

概览

本文紧接上文介绍React调度的时间分片中任务中断和恢复，由于篇幅过长，所以拆成了两篇。上文主要介绍了调度器中的优先级和调度任务的触发、注册和调度循环。本文主要从任务调度入手介绍调度任务之后发送了什么，即在协调器中如何进行到fiber构造的一系列流程。所以推荐在阅读本文之前先阅读上文，对调度有个基本认识。

前情回顾

先看下图了解React中宏观上整体执行流程图：

在这里插入图片描述
React有两大循环：Scheduler workLoop（调度循环）、fiber workLoop（fiber构造循环）。在上文中介绍了调度循环，其workLoop代码如下：

// packages/scheduler/src/forks/Scheduler.js
function workLoop(hasTimeRemaining, initialTime) {
   
   
  let currentTime = initialTime;
  advanceTimers(currentTime);
  currentTask = peek(taskQueue);

  while (
    currentTask !== null &&
    !(enableSchedulerDebugging && isSchedulerPaused)
  ) {
   
   
    if (
      currentTask.expirationTime > currentTime &&
      (!hasTimeRemaining || shouldYieldToHost())
    ) {
   
   
      // This currentTask hasn't expired, and we've reached the deadline.
      break;
    }
    const callback = currentTask.callback;
    if (typeof callback === 'function') {
   
   
      currentTask.callback = null;
      currentPriorityLevel = currentTask.priorityLevel;
      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
      const continuationCallback = callback(didUserCallbackTimeout);
      currentTime = getCurrentTime();
      if (typeof continuationCallback === 'function') {
   
   
        currentTask.callback = continuat