React事件调度

let scheduledHostCallback = null ;
const test =()=>{
    console.log("我是消息")
}
const message = new MessageChannel();
const port = message.port2;
message.port1.onmessage  = () =>{
    scheduledHostCallback();
    scheduledHostCallback = null;
}
const send = (callback) => {
    scheduledHostCallback = callback;
    port.postMessage(null);
};
send(test);

let schedulePerformWorkUntilDeadline;
if (typeof localSetImmediate === 'function') {
  // Node.js and old IE.
  // There's a few reasons for why we prefer setImmediate.
  schedulePerformWorkUntilDeadline = () => {
    localSetImmediate(performWorkUntilDeadline);
  };
} else if (typeof MessageChannel !== 'undefined') {
  // DOM and Worker environments.
  // We prefer MessageChannel because of the 4ms setTimeout clamping.
  const channel = new MessageChannel();
  const port = channel.port2;
  channel.port1.onmessage = performWorkUntilDeadline;
  schedulePerformWorkUntilDeadline = () => {//该函数会随着游览器环境不同而绑定不同的函数，它起着触发的作用
    port.postMessage(null);
  };
} else {
  // We should only fallback here in non-browser environments.
  schedulePerformWorkUntilDeadline = () => {
    localSetTimeout(performWorkUntilDeadline, 0);
  };
}
function requestHostCallback(callback) {
  scheduledHostCallback = callback;
  if (!isMessageLoopRunning) {
    isMessageLoopRunning = true;
    schedulePerformWorkUntilDeadline();
  }
}

export const NoPriority = 0; // 没有任何优先级
export const ImmediatePriority = 1; // 立即执行的优先级，级别最高 Immediate -1 需要立刻执行。
export const UserBlockingPriority = 2; // 用户阻塞级别的优先级 UserBlocking 250ms 超时时间250ms，一般指的是用户交互。
export const NormalPriority = 3; // 正常的优先级 Normal 5000ms 超时时间5s，不需要直观立即变化的任务，比如网络请求。
export const LowPriority = 4; // 较低的优先级 Low 10000ms 超时时间10s，肯定要执行的任务，但是可以放在最后处理。
export const IdlePriority = 5; // 优先级最低，表示任务可以闲置 Idle 一些没有必要的任务，可能不会执行。

scheduleCallback(
  schedulerPriorityLevel,
  performConcurrentWorkOnRoot.bind(null, root),
);

scheduleCallback(ImmediateSchedulerPriority, flushSyncCallbacks);

newCallbackNode = scheduleCallback(
    schedulerPriorityLevel,
    performConcurrentWorkOnRoot.bind(null, root),
);

function unstable_scheduleCallback(priorityLevel, callback, options) {
  var startTime;//当前时间
  var timeout;//根据优先度计算而来
  var expirationTime = startTime + timeout;//超过时间
 
  var newTask = {
    id: taskIdCounter++,
    callback,//任务函数
    priorityLevel,//任务优先级
    startTime,//开始时间
    expirationTime,//任务过期时间
    sortIndex: -1,//排序依据
  };
  if (startTime > currentTime) {//说明是一个未过期任务
    newTask.sortIndex = startTime;
    push(timerQueue, newTask);
      //如果taskQueue中没有任务并且当前新建的任务是timerQueue最靠前的任务
      //那么需要检查timerQueue中有没有需要放到taskQueue中的任务，这一步通过调用
      // requestHostTimeout实现
    if (peek(taskQueue) === null && newTask === peek(timerQueue)) {
     
      if (isHostTimeoutScheduled) {
        //取消掉已经存在的调度
        cancelHostTimeout();
      } else {
        isHostTimeoutScheduled = true;
      }
      // Schedule a timeout.
      requestHostTimeout(handleTimeout, startTime - currentTime);
        /**
        requestHostTimeout = function (cb, ms) {
			_timeoutID = setTimeout(cb, ms);
		};
		cancelHostTimeout = function () {
			clearTimeout(_timeoutID);
		};
        * */
    }
  } else {
    newTask.sortIndex = expirationTime;
    push(taskQueue, newTask);
    if (!isHostCallbackScheduled && !isPerformingWork) {
      isHostCallbackScheduled = true;
      requestHostCallback(flushWork);
    }
  }
  return newTask;
}

function handleTimeout(currentTime) {
  isHostTimeoutScheduled = false;
  advanceTimers(currentTime);//调用advanceTimers，检查timerQueue队列中过期的任务，放到taskQueue中。
    //检查是否已经开始调度，如尚未调度，检查taskQueue中是否已经有任务
    //如果有，而且现在是空闲的，说明之前的advanceTimers已经将过期任务放到了taskQueue，那么现在立即开始调度，执行任务
	//如果没有，而且现在是空闲的，说明之前的advanceTimers并没有检查到timerQueue中有过期任务，那么再次调用requestHostTimeout重复这一过程。
    //总之，要把timerQueue中的任务全部都转移到taskQueue中执行掉才行。
  if (!isHostCallbackScheduled) {
    if (peek(taskQueue) !== null) {
      isHostCallbackScheduled = true;
      requestHostCallback(flushWork);
    } else {
      const firstTimer = peek(timerQueue);
      if (firstTimer !== null) {
        requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
      }
    }
  }
}

function requestHostCallback(callback) {
  scheduledHostCallback = callback;
  if (!isMessageLoopRunning) {
    isMessageLoopRunning = true;
    schedulePerformWorkUntilDeadline();//这里的schedulePerformWorkUntilDeadline，在MessageChannel在源码中的体现里被赋值，这里相当于发送一个消息，让channel.port1的监听函数performWorkUntilDeadline得以执行，erformWorkUntilDeadline内部会执行掉scheduledHostCallback，最后taskQueue被清空。
     //这个回调将会被执行 channel.port1.onmessage = performWorkUntilDeadline;
  }
}

const performWorkUntilDeadline = () => {
  if (scheduledHostCallback !== null) {
    const currentTime = getCurrentTime();
    startTime = currentTime;
    const hasTimeRemaining = true;
       // hasTimeRemaining表示任务是否还有剩余时间
       // 它和时间片一起限制任务的执行。如果没有时间，
      // 或者任务的执行时间超出时间片限制了，那么中断任务。
      // 它的默认为true，表示一直有剩余时间
      // 因为MessageChannel的port在postMessage，
      // 是比setTimeout还靠前执行的宏任务，这意味着
      // 在这一帧开始时，总是会有剩余时间
      // 所以现在中断任务只看时间片的了
    let hasMoreWork = true;
    try {
        //当任务因为时间片的原因被打断，则返回true表示任务被中断，还需要调度者再调度一个执行者来继续执行
      hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);
    } finally {
      if (hasMoreWork) {
        schedulePerformWorkUntilDeadline();//这里可以再次发起调度
      } else {
          //这里表示 本次任务执行完毕
        isMessageLoopRunning = false;
        scheduledHostCallback = null;
      }
    }
  } else {
    isMessageLoopRunning = false;
  }
  needsPaint = false;
};

function flushWork(hasTimeRemaining, initialTime) {
    ...
    isHostCallbackScheduled = false;
    if (isHostTimeoutScheduled) {
      //flushWork 如果有延时任务执行的话，那么会先暂停延时任务，然后调用 workLoop ，去真正执行超时的更新任务。
        isHostTimeoutScheduled = false;
        cancelHostTimeout();
    }
    return workLoop(hasTimeRemaining, initialTime);//这里将workloop的返回值返回,那么workLoop里面便是真正在执行函数
	...
}

function workLoop(hasTimeRemaining, initialTime) {
    let currentTime = initialTime;
    advanceTimers(currentTime);//调用advanceTimers，检查timerQueue队列中过期的任务，放到taskQueue中。
    currentTask = peek(taskQueue);//取出第一个任务
    while (currentTask !== null &&!(enableSchedulerDebugging && isSchedulerPaused)) {
        if (currentTask.expirationTime > currentTime &&(!hasTimeRemaining || shouldYieldToHost())) {
            //shouldYieldToHost()  根据时间片去限制任务执行
            // break掉while循环(中断的核心)
            break;
        }
        const callback = currentTask.callback;//得到实际执行的函数
        if (typeof callback === 'function') {
            currentTask.callback = null;
            currentPriorityLevel = currentTask.priorityLevel;
            const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
            if (enableProfiling) {
                markTaskRun(currentTask, currentTime);
            }
            const continuationCallback = callback(didUserCallbackTimeout);//执行的返回值如果是一个函数则表明任务还未执行完毕，如果不为函数，则表明执行完毕
            currentTime = getCurrentTime();
            if (typeof continuationCallback === 'function') {
                currentTask.callback = continuationCallback;//改变callback ，让其指向最新的返回值(函数),便于任务恢复继续执行
            }
            else {
                if (currentTask === peek(taskQueue)) {
                    pop(taskQueue);//表明是最后一个
                }
            }
            advanceTimers(currentTime);//调用advanceTimers，检查timerQueue队列中过期的任务，放到taskQueue中。
        } else {
            pop(taskQueue);//如果callback为null，将任务出队
        }
        currentTask = peek(taskQueue);//取出下一个任务，如果执行完毕，则获取到null
    }
    if (currentTask !== null) {
        // 如果currentTask不为空，说明是时间片的限制导致了任务中断
        // return 一个 true告诉外部，此时任务还未执行完，还有任务，
        return true;
    } else {
        //如果currentTask为空，说明taskQueue队列中的任务已经都
        // 执行完了，然后从timerQueue中找任务，调用requestHostTimeout
        // 去把task放到taskQueue中，到时会再次发起调度，但是这次，
        // 会先return false，告诉外部当前的taskQueue已经清空，
        // 先停止执行任务，也就是终止任务调度
        const firstTimer = peek(timerQueue);
        if (firstTimer !== null) {
            requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
        }
        return false;
    }
}

function unstable_cancelCallback(task) {
    task.callback = null;
}