行数

https://github.com/a8397550/react-source-share/blob/master/default/react-dom-default.js

JavaScript 位运算符

位运算符工作于32位的数字上。任何数字操作都将转换为32位。结果会转换为 JavaScript 数字。

运算符 描述 例子 类似于 结果 十进制
& AND x = 5 & 1 0101 & 0001 0001 1
| OR x = 5 | 1 0101 | 0001 0101 5
~ 取反 x = ~ 5 ~0101 1010 -6
^ 异或 x = 5 ^ 1 0101 ^ 0001 0100 4
<< 左移 x = 5 << 1 0101 << 1 1010 10
>> 右移 x = 5 >> 1 0101 >> 1 0010 2 
  1. // 默认的时候 undefined
  2. var root = container._reactRootContainer; 
  3. // fiber [faɪbə] 构造的意思
  4. var fiberRoot = void 0;
  6. if (!root) {
  7.   root = container._reactRootContainer = 
  8.     legacyCreateRootFromDOMContainer(container, forceHydrate);
  10.   fiberRoot = root._internalRoot; // 将创建好的FiberRootNode赋值给fiberRoot
  12.   if (typeof callback === 'function') {
  13.     var originalCallback = callback;
  14.     callback = function () {
  15.       var instance = getPublicRootInstance(fiberRoot);
  16.       originalCallback.call(instance);
  17.     };
  18.   }
  20.   unbatchedUpdates(function () {
  21.     // children ReactElements
  22.     // fiberRoot FiberRootNode
  23.     // parentComponent undefined
  24.     // callback undefined
  25.     updateContainer(children, fiberRoot, parentComponent, callback);
  26.   });
  27. } else {
  28.   // ...
  29. }

行数：21820
此处注意 finally 中的 flushSyncCallbackQueue 

  1. function unbatchedUpdates(fn, a) {
  2.   // executionContext 初始值是0
  3.   // prevExecutionContext = 0
  4.   var prevExecutionContext = executionContext;
  5.   // 位运算
  6.   // 初始化时 executionContext = 0 & ~1 = 0
  7.   executionContext = executionContext & ~BatchedContext;
  8.   // 初始化时 executionContext = 0 | 8 = 8
  9.   executionContext = executionContext | LegacyUnbatchedContext;
  10.   try {
  11.     // 初始化时 a = undefined
  12.     return fn(a);
  13.   } finally {
  14.     // 恢复executionContext的值
  15.     // 初始化时，executionContext = prevExecutionContext = 0
  16.     executionContext = prevExecutionContext;
  17.     // NoContext 初始值是 0
  18.     if (executionContext === NoContext) {
  20.       flushSyncCallbackQueue();
  21.     }
  22.   }
  23. }
  25. function updateContainer(element, container, parentComponent, callback) {
  26.   // FiberRootNode.current FiberNode
  27.   // 取出定义好的当前的FiberNode
  28.   // container 等于 FiberRootNode
  29.   var current$$1 = container.current;
  30.   // 例子 1073711812
  31.   var currentTime = requestCurrentTime();
  32.   {
  33.     // jest没有赋值的地方，应该是作者打的一个与debug有关的标志
  34.     if ('undefined' !== typeof jest) {
  35.       warnIfUnmockedScheduler(current$$1);
  36.       warnIfNotScopedWithMatchingAct(current$$1);
  37.     }
  38.   }
  40.   // 初始化时 requestCurrentSuspenseConfig() return 了 null
  41.   // suspenseConfig = null;
  42.   var suspenseConfig = requestCurrentSuspenseConfig();
  43.   // 初始化时 expirationTime = 1073741823
  44.   var expirationTime = computeExpirationForFiber(currentTime, current$$1, suspenseConfig);
  45.   // 初始化时，入参如下
  46.   // element = ReactElements
  47.   // container = DOMElement
  48.   // parentComponent = null
  49.   // expirationTime = 常量 1073741823
  50.   // suspenseConfig = null
  51.   // callback = undefined
  52.   return updateContainerAtExpirationTime(element, container,
  53.               parentComponent, expirationTime, suspenseConfig, callback);
  54. }
  56. var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
  57. var ReactCurrentBatchConfig = ReactSharedInternals.ReactCurrentBatchConfig;
  58. function requestCurrentSuspenseConfig() {
  59.   // 初始化时 ReactCurrentBatchConfig.suspense 值 为null
  60.   return ReactCurrentBatchConfig.suspense;
  61. }
  64. function requestCurrentTime() {
  65.   // 初始化时，(8 & (16 | 32)) !== 0 结果 false
  66.   if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
  67.     return msToExpirationTime(now());
  68.   }
  69.     // 初始化时 0 !== 0 返回 false
  70.   if (currentEventTime !== NoWork) {
  72.     return currentEventTime;
  73.   }
  75.   currentEventTime = msToExpirationTime(now());
  76.   // 例子 currentEventTime = 1073711812
  77.   return currentEventTime;
  78. }
  80. /**
  81. * 1个到期时间单位表示10毫秒。
  82. */
  83. function msToExpirationTime(ms) {
  84.   // 例子 ms = 300098.8250000082
  85.   // 总是加一个偏移量，这样我们就不会和现在的数字冲突。
  86.   // 默认值 MAGIC_NUMBER_OFFSET = 
  87.   // (Batched = (Sync = MAX_SIGNED_31_BIT_INT = 1073741823) - 1) - 1
  88.   // MAGIC_NUMBER_OFFSET = 1073741821
  89.   // UNIT_SIZE = 10
  90.   return MAGIC_NUMBER_OFFSET - (ms / UNIT_SIZE | 0);
  91. }
  93. var ReactInternals$1 = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
  94. var _ReactInternals$Sched = ReactInternals$1.Scheduler;
  95. var unstable_now = _ReactInternals$Sched.unstable_now;
  96. var Scheduler_now = unstable_now;
  97. var now = initialTimeMs < 10000 ? Scheduler_now : function () {
  98.   // Scheduler_now 代码在React.js 2276行
  99.   return Scheduler_now() - initialTimeMs;
  100. };
  101. // 以下这段代码在React.js中
  102. var getCurrentTime = void 0;
  103. getCurrentTime = function () {
  104.   return Date.now();
  105. }
  106. getCurrentTime = typeof performance === 'object' && typeof performance.now === 'function' ? function () {
  107.   return performance.now();
  108. } : function () {
  109.   return _Date.now();
  110. };
  1. // 初始化调用时
  2. // currentTime = 1073740102
  3. // fiber = FiberNode
  4. // suspenseConfig = null
  5. function computeExpirationForFiber(currentTime, fiber, suspenseConfig) {
  6.   // 初始化时  fiber.mode = 0
  7.   var mode = fiber.mode;
  8.   // 0 & 2 === 0 结果true
  9.   if ((mode & BatchedMode) === NoMode) {
  10.     // 返回常量值 1073741823
  11.     return Sync;
  12.   }
  14.   var priorityLevel = getCurrentPriorityLevel();
  15.   if ((mode & ConcurrentMode) === NoMode) {
  16.     return priorityLevel === ImmediatePriority ? Sync : Batched;
  17.   }
  19.   if ((executionContext & RenderContext) !== NoContext) {
  20.     // Use whatever time we're already rendering
  21.     return renderExpirationTime;
  22.   }
  24.   var expirationTime = void 0;
  25.   if (suspenseConfig !== null) {
  26.     // Compute an expiration time based on the Suspense timeout.
  27.     expirationTime = computeSuspenseExpiration(currentTime, suspenseConfig.timeoutMs | 0 || LOW_PRIORITY_EXPIRATION);
  28.   } else {
  29.     // Compute an expiration time based on the Scheduler priority.
  30.     switch (priorityLevel) {
  31.       case ImmediatePriority:
  32.         expirationTime = Sync;
  33.         break;
  34.       case UserBlockingPriority$2:
  35.         // TODO: Rename this to computeUserBlockingExpiration
  36.         expirationTime = computeInteractiveExpiration(currentTime);
  37.         break;
  38.       case NormalPriority:
  39.       case LowPriority:
  40.         // TODO: Handle LowPriority
  41.         // TODO: Rename this to... something better.
  42.         expirationTime = computeAsyncExpiration(currentTime);
  43.         break;
  44.       case IdlePriority:
  45.         expirationTime = Never;
  46.         break;
  47.       default:
  48.         (function () {
  49.           {
  50.             {
  51.               throw ReactError(Error('Expected a valid priority level'));
  52.             }
  53.           }
  54.         })();
  55.     }
  56.   }
  58.   if (workInProgressRoot !== null && expirationTime === renderExpirationTime) {
  59.     // This is a trick to move this update into a separate batch
  60.     expirationTime -= 1;
  61.   }
  63.   return expirationTime;
  64. }

行数 24462 updateContainerAtExpirationTime(element, container, parentComponent, expirationTime, suspenseConfig, callback)

核心代码 scheduleRootUpdate 工作计划 [ˈskedʒuːl]

  1. var ReactFiberInstrumentation = {
  2.   debugTool: null
  3. };
  5. var ReactFiberInstrumentation_1 = ReactFiberInstrumentation;
  6. function updateContainerAtExpirationTime(element, container, parentComponent, expirationTime, suspenseConfig, callback) {
  7.   // FiberNodo
  8.   var current$$1 = container.current;
  10.   {
  11.     // 初始化时 ReactFiberInstrumentation_1.debugTool = null
  12.     if (ReactFiberInstrumentation_1.debugTool) {
  13.       if (current$$1.alternate === null) {
  14.         ReactFiberInstrumentation_1.debugTool.onMountContainer(container);
  15.       } else if (element === null) {
  16.         ReactFiberInstrumentation_1.debugTool.onUnmountContainer(container);
  17.       } else {
  18.         ReactFiberInstrumentation_1.debugTool.onUpdateContainer(container);
  19.       }
  20.     }
  21.   }
  23.   // 初始化时 parentComponent值 为null 
  24.   // context = {}
  25.   var context = getContextForSubtree(parentComponent);
  26.   // 初始化时 container.context = null
  27.   if (container.context === null) {
  28.     container.context = context;
  29.   } else {
  30.     container.pendingContext = context;
  31.   }
  33.   // 初始化时，入参如下
  34.   // current$$1 = FiberNode
  35.   // element = ReactElements
  36.   // expirationTime = 常量 1073741823
  37.   // suspenseConfig = null
  38.   // callback = undefined
  39.   return scheduleRootUpdate(current$$1, element, expirationTime, suspenseConfig, callback);
  40. }
  42. var emptyContextObject = {};
  43. {
  44.   Object.freeze(emptyContextObject);
  45. }
  46. // 初始化时，入参为null
  47. function getContextForSubtree(parentComponent) {
  48.   if (!parentComponent) {
  50.     return emptyContextObject;
  51.   }
  53.   var fiber = get(parentComponent);
  54.   var parentContext = findCurrentUnmaskedContext(fiber);
  56.   if (fiber.tag === ClassComponent) {
  57.     var Component = fiber.type;
  58.     if (isContextProvider(Component)) {
  59.       return processChildContext(fiber, Component, parentContext);
  60.     }
  61.   }
  63.   return parentContext;
  64. }

核心 24434 scheduleRootUpdate(current$$1, element, expirationTime, suspenseConfig, callback)

21526行 负责执行scheduleWork

  1. function scheduleRootUpdate(current$$1, element, expirationTime, suspenseConfig, callback) {
  2.   {
  3.     if (phase === 'render' && current !== null && !didWarnAboutNestedUpdates) {
  4.       didWarnAboutNestedUpdates = true;
  5.       warningWithoutStack$1(false, 'Render methods should be a pure function of props and state; ' + 'triggering nested component updates from Render is not allowed. ' + 'If necessary, trigger nested updates in componentDidUpdate.\n\n' + 'Check the Render method of %s.', getComponentName(current.type) || 'Unknown');
  6.     }
  7.   }
  9.   var update = createUpdate(expirationTime, suspenseConfig);
  11.   update.payload = { element: element };
  13.   callback = callback === undefined ? null : callback;
  14.   if (callback !== null) {
  15.     !(typeof callback === 'function') ? warningWithoutStack$1(false, 'Render(...): Expected the last optional `callback` argument to be a ' + 'function. Instead received: %s.', callback) : void 0;
  16.     update.callback = callback;
  17.   }
  18.     // revertPassiveEffectsChange 默认值 false
  19.   if (revertPassiveEffectsChange) {
  20.     flushPassiveEffects();
  21.   }
  22.   // enenqueue 排队，FiberNode
  23.   // 给FiberNode加上updateQueue属性
  24.   enqueueUpdate(current$$1, update);
  25.   // schedule [ˈskedʒuːl] 工作计划
  26.   // var scheduleWork = scheduleUpdateOnFiber;
  27.   scheduleWork(current$$1, expirationTime);
  29.   return expirationTime;
  30. }
  31. // expirationTime = 1073741823
  32. // suspenseConfig = null
  33. function createUpdate(expirationTime, suspenseConfig) {
  34.   var update = {
  35.     expirationTime: expirationTime,
  36.     suspenseConfig: suspenseConfig,
  37.         // UpdateState 常量值 0
  38.     tag: UpdateState,
  39.     payload: null,
  40.     callback: null,
  42.     next: null,
  43.     nextEffect: null
  44.   };
  45.   {
  46.     update.priority = getCurrentPriorityLevel();
  47.   }
  48.   return update;
  49. }
  51. function getCurrentPriorityLevel() {
  52.   switch (Scheduler_getCurrentPriorityLevel()) {
  53.     // Scheduler_ImmediatePriority = 1
  54.     case Scheduler_ImmediatePriority:
  55.       // ImmediatePriority = 99
  56.       return ImmediatePriority;
  58.     // Scheduler_UserBlockingPriority = 2
  59.     case Scheduler_UserBlockingPriority:
  60.       // UserBlockingPriority$2 = 98
  61.       return UserBlockingPriority$2;
  63.     // Scheduler_NormalPriority = 3
  64.     case Scheduler_NormalPriority:
  65.       // NormalPriority = 97
  66.       return NormalPriority;
  68.     // Scheduler_LowPriority = 4
  69.     case Scheduler_LowPriority:
  70.       // LowPriority = 96
  71.       return LowPriority;
  73.     // Scheduler_IdlePriority = 5
  74.     case Scheduler_IdlePriority:
  75.       // IdlePriority = 95
  76.       return IdlePriority;
  78.     default:
  79.       (function () {
  80.         {
  81.           {
  82.             throw ReactError(Error('Unknown priority level.'));
  83.           }
  84.         }
  85.       })();
  86.   }
  87. }
  89. // 此代码出处React.js
  90. function unstable_getCurrentPriorityLevel () {
  91.   // currentPriorityLevel 默认值是3 是一个变量
  92.   return currentPriorityLevel;
  93. }
function enqueueUpdate(fiber, update) {
  // 更新队列是惰性创建的
  // fiber.alternate 默认为 null
  var alternate = fiber.alternate;
  var queue1 = void 0;
  var queue2 = void 0;
  if (alternate === null) {
    // fiber.updateQueue 默认为 null
    queue1 = fiber.updateQueue;
    queue2 = null;
    if (queue1 === null) {
      // fiber.memoizedState 默认值为 null
      queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);
    }
  } else {
    // There are two owners.
    queue1 = fiber.updateQueue;
    queue2 = alternate.updateQueue;
    if (queue1 === null) {
      if (queue2 === null) {
        // Neither fiber has an update queue. Create new ones.
        queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);
        queue2 = alternate.updateQueue = createUpdateQueue(alternate.memoizedState);
      } else {
        // Only one fiber has an update queue. Clone to create a new one.
        queue1 = fiber.updateQueue = cloneUpdateQueue(queue2);
      }
    } else {
      if (queue2 === null) {
        // Only one fiber has an update queue. Clone to create a new one.
        queue2 = alternate.updateQueue = cloneUpdateQueue(queue1);
      } else {
        // Both owners have an update queue.
      }
    }
  }

  // 初始化时 queue2 = null || queue1 = {...}
  if (queue2 === null || queue1 === queue2) {
    appendUpdateToQueue(queue1, update);
  } else {
    // There are two queues. We need to append the update to both queues,
    // while accounting for the persistent structure of the list — we don't
    // want the same update to be added multiple times.
    if (queue1.lastUpdate === null || queue2.lastUpdate === null) {
      // One of the queues is not empty. We must add the update to both queues.
      appendUpdateToQueue(queue1, update);
      appendUpdateToQueue(queue2, update);
    } else {
      // Both queues are non-empty. The last update is the same in both lists,
      // because of structural sharing. So, only append to one of the lists.
      appendUpdateToQueue(queue1, update);
      // But we still need to update the `lastUpdate` pointer of queue2.
      queue2.lastUpdate = update;
    }
  }

  {
    // fiber.tag = 3 
    // ClassComponent = 1
    // currentlyProcessingQueue 默认值为 null
    // didWarnUpdateInsideUpdate = false
    // queue2 = null
    if (fiber.tag === ClassComponent && (currentlyProcessingQueue === queue1 ||
      queue2 !== null && currentlyProcessingQueue === queue2) &&
      !didWarnUpdateInsideUpdate) {

      warningWithoutStack$1(false, 'An update (setState, replaceState, or forceUpdate) was scheduled ' + 'from inside an update function. Update functions should be pure, ' + 'with zero side-effects. Consider using componentDidUpdate or a ' + 'callback.');
      didWarnUpdateInsideUpdate = true;
    }
  }
}

function createUpdateQueue(baseState) {
  var queue = {
    baseState: baseState,
    firstUpdate: null,
    lastUpdate: null,
    firstCapturedUpdate: null,
    lastCapturedUpdate: null,
    firstEffect: null,
    lastEffect: null,
    firstCapturedEffect: null,
    lastCapturedEffect: null
  };
  return queue;
}

function appendUpdateToQueue(queue, update) {
  // 初始化时 queue.lastUpdate = null
  if (queue.lastUpdate === null) {
    // Queue is empty
    queue.firstUpdate = queue.lastUpdate = update;
  } else {
    queue.lastUpdate.next = update;
    queue.lastUpdate = update;
  }
}