React 18 源代码学习笔记 4 消息循环 (Message

ReactDOM.scheduleCallback 是从 React 中引用来的，具体路径是

  var ReactInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
  var unstable_scheduleCallback = _ReactInternals$Sched.unstable_scheduleCallback;
  var scheduleCallback = unstable_scheduleCallback;

再看 React 的 unstable_scheduleCallback 主要就是执行以下函数

  function requestHostCallback(callback) {
    scheduledHostCallback = callback;

    if (!isMessageLoopRunning) {
      isMessageLoopRunning = true;
      schedulePerformWorkUntilDeadline();
    }
  }

React 调用事件轮询，即主要靠

1. isMessageLoopRunning，标准目前正有 MessageLoop (消息循环) 正在执行
2. 若没有 MessageLoop (消息循环) 执行，则需要调用 schedulePerformWorkUntilDeadline 开始这个消息循环

React 在初始化时，会初始化这个消息循环，具体代码如下：

   // DOM and Worker environments.
    // We prefer MessageChannel because of the 4ms setTimeout clamping.
    var channel = new MessageChannel();
    var port = channel.port2;
    channel.port1.onmessage = performWorkUntilDeadline;

    schedulePerformWorkUntilDeadline = function () {
      port.postMessage(null);
    };

再反观 performWorkUntilDeadline，主要就是检查是否有 scheduleHostCallback，若有则执行，否则退出消息循环。

ReactDOM.render 时，会将 flushWork 放在 scheduledHostCallback 中，在 flushWork 中会从 taskQueue 取出最早的任务，进行执行，而在切换到 flushWork 前，ReactDOM.render 会在 taskQueue 中 push 一个任务。任务信息如下：

Screen Shot 2022-08-28 at 19.21.07.png

整体的执行流程如下图

Screen Shot 2022-08-28 at 19.39.48.png