renderRoot 调用 workLoopSync()

  1. function workLoopSync() {
  2.    // workInProgress = FiberNode
  3.    while (workInProgress !== null) {
  4.      workInProgress = performUnitOfWork(workInProgress);
  5.    }
  6.  }

performUnitOfWork

  1. function performUnitOfWork(unitOfWork) {
  2.   var current$$1 = unitOfWork.alternate;
  3.     // startWorkTimer(unitOfWork) 初始化时 啥也没干
  4.   startWorkTimer(unitOfWork);
  5.   // 赋值了些什么
  6.   setCurrentFiber(unitOfWork);
  8.   var next = void 0;
  9.   // enableProfilerTimer = true && (0 & 8) = 0 !== NoMode = 0
  10.   // 此条件返回false
  11.   if (enableProfilerTimer && (unitOfWork.mode & ProfileMode) !== NoMode) {
  12.     startProfilerTimer(unitOfWork);
  13.     next = beginWork$$1(current$$1, unitOfWork, renderExpirationTime);
  14.     stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);
  15.   } else {
  16.     // renderExpirationTime = 1073741823 
  17.     next = beginWork$$1(current$$1, unitOfWork, renderExpirationTime);
  18.   }
  20.   resetCurrentFiber();
  21.   unitOfWork.memoizedProps = unitOfWork.pendingProps;
  22.   if (next === null) {
  23.     // If this doesn't spawn new work, complete the current work.
  24.     next = completeUnitOfWork(unitOfWork);
  25.   }
  27.   ReactCurrentOwner$2.current = null;
  28.   return next;
  29. }

updateHostRoot 重要

  1. function updateHostRoot(current$$1, workInProgress, renderExpirationTime) {
  2.   pushHostRootContext(workInProgress);
  3.   var updateQueue = workInProgress.updateQueue;
  4.   (function () {
  5.     if (!(updateQueue !== null)) {
  6.       {
  7.         throw ReactError(Error('If the root does not have an updateQueue, we should have already bailed out. This error is likely caused by a bug in React. Please file an issue.'));
  8.       }
  9.     }
  10.   })();
  11.   var nextProps = workInProgress.pendingProps;
  12.   var prevState = workInProgress.memoizedState;
  13.   var prevChildren = prevState !== null ? prevState.element : null;
  14.   processUpdateQueue(workInProgress, updateQueue, nextProps, null, renderExpirationTime);
  15.   var nextState = workInProgress.memoizedState;
  16.   // Caution: React DevTools currently depends on this property
  17.   // being called "element".
  18.   var nextChildren = nextState.element;
  19.   if (nextChildren === prevChildren) {
  20.     // If the state is the same as before, that's a bailout because we had
  21.     // no work that expires at this time.
  22.     resetHydrationState();
  23.     return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
  24.   }
  25.   var root = workInProgress.stateNode;
  26.   if ((current$$1 === null || current$$1.child === null) && root.hydrate && enterHydrationState(workInProgress)) {
  27.     // If we don't have any current children this might be the first pass.
  28.     // We always try to hydrate. If this isn't a hydration pass there won't
  29.     // be any children to hydrate which is effectively the same thing as
  30.     // not hydrating.
  32.     // This is a bit of a hack. We track the host root as a placement to
  33.     // know that we're currently in a mounting state. That way isMounted
  34.     // works as expected. We must reset this before committing.
  35.     // TODO: Delete this when we delete isMounted and findDOMNode.
  36.     workInProgress.effectTag |= Placement;
  38.     // Ensure that children mount into this root without tracking
  39.     // side-effects. This ensures that we don't store Placement effects on
  40.     // nodes that will be hydrated.
  41.     workInProgress.child = mountChildFibers(workInProgress, null, nextChildren, renderExpirationTime);
  42.   } else {
  43.     // Otherwise reset hydration state in case we aborted and resumed another
  44.     // root.
  45.     reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
  46.     resetHydrationState();
  47.   }
  48.   return workInProgress.child;
  49. }

beginWork$$1

  1. beginWork$$1 = function (current$$1, unitOfWork, expirationTime) {
  2.   var originalWorkInProgressCopy = assignFiberPropertiesInDEV(dummyFiber, unitOfWork);
  3.   try {
  4.     // current$$1 初始化创建的 FiberNode
  5.     // unitOfWork 是 workInProgress
  6.     // renderExpirationTime = 1073741823 
  7.     return beginWork$1(current$$1, unitOfWork, expirationTime);
  8.   } catch (originalError) {
  9.     if (originalError !== null && typeof originalError === 'object' && typeof originalError.then === 'function') {
  10.       // Don't replay promises. Treat everything else like an error.
  11.       throw originalError;
  12.     }
  14.     // Keep this code in sync with renderRoot; any changes here must have
  15.     // corresponding changes there.
  16.     resetContextDependencies();
  17.     resetHooks();
  19.     // Unwind the failed stack frame
  20.     unwindInterruptedWork(unitOfWork);
  22.     // Restore the original properties of the fiber.
  23.     assignFiberPropertiesInDEV(unitOfWork, originalWorkInProgressCopy);
  25.     if (enableProfilerTimer && unitOfWork.mode & ProfileMode) {
  26.       // Reset the profiler timer.
  27.       startProfilerTimer(unitOfWork);
  28.     }
  30.     // Run beginWork again.
  31.     invokeGuardedCallback(null, beginWork$1, null, current$$1, unitOfWork, expirationTime);
  33.     if (hasCaughtError()) {
  34.       var replayError = clearCaughtError();
  35.       // `InvokeGuardedCallback` sometimes sets an expando `_suppressLogging`.
  36.       // Rethrow this error instead of the original one.
  37.       throw replayError;
  38.     } else {
  40.       throw originalError;
  41.     }
  42.   }
  43. };

beginWork$1

  1. function beginWork$1(current$$1, workInProgress, renderExpirationTime) {
  2.   // current$$1 初始化创建的 FiberNode
  3.   // unitOfWork 是 workInProgress
  4.   // renderExpirationTime = 1073741823 
  5.   // workInProgress.expirationTime = 1073741823
  6.   var updateExpirationTime = workInProgress.expirationTime;
  8.   {
  9.     // workInProgress._debugNeedsRemount = false
  10.     if (workInProgress._debugNeedsRemount && current$$1 !== null) {
  11.       // This will restart the begin phase with a new fiber.
  12.       return remountFiber(current$$1, workInProgress,
  13.             createFiberFromTypeAndProps(workInProgress.type, 
  14.               workInProgress.key, workInProgress.pendingProps,
  15.                                         workInProgress._debugOwner || null,
  16.                                         workInProgress.mode, 
  17.                                         workInProgress.expirationTime));
  18.     }
  19.   }
  21.   if (current$$1 !== null) {
  22.     // current$$1.memoizedProps = null;
  23.     // workInProgress.pendingProps = null;
  24.     var oldProps = current$$1.memoizedProps;
  25.     var newProps = workInProgress.pendingProps;
  27.     function hasContextChanged() {
  28.       // disableLegacyContext = false;
  29.       if (disableLegacyContext) {
  30.         return false;
  31.       } else {
  32.         // didPerformWorkStackCursor.current = false;
  33.         return didPerformWorkStackCursor.current;
  34.       }
  35.     }
  37.     if (oldProps !== newProps || hasContextChanged() || (
  38.             // workInProgress.type = null !== current$$1.type null 返回 false
  39.       workInProgress.type !== current$$1.type)) {
  41.       didReceiveUpdate = true;
  42.     } 
  43.     // updateExpirationTime = 1073741823 < renderExpirationTime = 1073741823
  44.     // if 结果为false
  45.     else if (updateExpirationTime < renderExpirationTime) {
  46.       // ...省略
  47.     }
  48.   } else {
  49.     didReceiveUpdate = false;
  50.   }
  52.   // 常量 NoWork = 0
  53.   workInProgress.expirationTime = NoWork;
  55.   switch (workInProgress.tag) {
  56.     case IndeterminateComponent: // 2
  57.       {
  58.         return mountIndeterminateComponent(current$$1, workInProgress, workInProgress.type, renderExpirationTime);
  59.       }
  60.     case LazyComponent: // 16
  61.       {
  62.         var elementType = workInProgress.elementType;
  63.         return mountLazyComponent(current$$1, workInProgress, elementType, updateExpirationTime, renderExpirationTime);
  64.       }
  65.     case FunctionComponent: // 0
  66.       {
  67.         var _Component = workInProgress.type;
  68.         var unresolvedProps = workInProgress.pendingProps;
  69.         var resolvedProps = workInProgress.elementType === _Component ? unresolvedProps : resolveDefaultProps(_Component, unresolvedProps);
  70.         return updateFunctionComponent(current$$1, workInProgress, _Component, resolvedProps, renderExpirationTime);
  71.       }
  72.     case ClassComponent: // 1
  73.       {
  74.         var _Component2 = workInProgress.type;
  75.         var _unresolvedProps = workInProgress.pendingProps;
  76.         var _resolvedProps = workInProgress.elementType === _Component2 ? _unresolvedProps : resolveDefaultProps(_Component2, _unresolvedProps);
  77.         return updateClassComponent(current$$1, workInProgress, _Component2, _resolvedProps, renderExpirationTime);
  78.       }
  79.     case HostRoot: // 3
  80.       return updateHostRoot(current$$1, workInProgress, renderExpirationTime);
  81.     case HostComponent: // 5
  82.       return updateHostComponent(current$$1, workInProgress, renderExpirationTime);
  83.     case HostText: // 6
  84.       return updateHostText(current$$1, workInProgress);
  85.     case SuspenseComponent: // 13
  86.       return updateSuspenseComponent(current$$1, workInProgress, renderExpirationTime);
  87.     case HostPortal: // 4
  88.       return updatePortalComponent(current$$1, workInProgress, renderExpirationTime);
  89.     case ForwardRef: // 11
  90.       {
  91.         var type = workInProgress.type;
  92.         var _unresolvedProps2 = workInProgress.pendingProps;
  93.         var _resolvedProps2 = workInProgress.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
  94.         return updateForwardRef(current$$1, workInProgress, type, _resolvedProps2, renderExpirationTime);
  95.       }
  96.     case Fragment: // 7
  97.       return updateFragment(current$$1, workInProgress, renderExpirationTime);
  98.     case Mode: // 8
  99.       return updateMode(current$$1, workInProgress, renderExpirationTime);
  100.     case Profiler: // 12
  101.       return updateProfiler(current$$1, workInProgress, renderExpirationTime);
  102.     case ContextProvider: // 10
  103.       return updateContextProvider(current$$1, workInProgress, renderExpirationTime);
  104.     case ContextConsumer: // 9
  105.       return updateContextConsumer(current$$1, workInProgress, renderExpirationTime);
  106.     case MemoComponent: // 14
  107.       {
  108.         var _type2 = workInProgress.type;
  109.         var _unresolvedProps3 = workInProgress.pendingProps;
  110.         // Resolve outer props first, then resolve inner props.
  111.         var _resolvedProps3 = resolveDefaultProps(_type2, _unresolvedProps3);
  112.         {
  113.           if (workInProgress.type !== workInProgress.elementType) {
  114.             var outerPropTypes = _type2.propTypes;
  115.             if (outerPropTypes) {
  116.               checkPropTypes_1(outerPropTypes, _resolvedProps3, // Resolved for outer only
  117.                                'prop', getComponentName(_type2), getCurrentFiberStackInDev);
  118.             }
  119.           }
  120.         }
  121.         _resolvedProps3 = resolveDefaultProps(_type2.type, _resolvedProps3);
  122.         return updateMemoComponent(current$$1, workInProgress, _type2, _resolvedProps3, updateExpirationTime, renderExpirationTime);
  123.       }
  124.     case SimpleMemoComponent: // 15
  125.       {
  126.         return updateSimpleMemoComponent(current$$1, workInProgress, workInProgress.type, workInProgress.pendingProps, updateExpirationTime, renderExpirationTime);
  127.       }
  128.     case IncompleteClassComponent: // 17
  129.       {
  130.         var _Component3 = workInProgress.type;
  131.         var _unresolvedProps4 = workInProgress.pendingProps;
  132.         var _resolvedProps4 = workInProgress.elementType === _Component3 ? _unresolvedProps4 : resolveDefaultProps(_Component3, _unresolvedProps4);
  133.         return mountIncompleteClassComponent(current$$1, workInProgress, _Component3, _resolvedProps4, renderExpirationTime);
  134.       }
  135.     case DehydratedSuspenseComponent: // 18
  136.       {
  137.         if (enableSuspenseServerRenderer) {
  138.           return updateDehydratedSuspenseComponent(current$$1, workInProgress, renderExpirationTime);
  139.         }
  140.         break;
  141.       }
  142.     case SuspenseListComponent: // 19
  143.       {
  144.         return updateSuspenseListComponent(current$$1, workInProgress, renderExpirationTime);
  145.       }
  146.     case FundamentalComponent: // 20
  147.       {
  148.         if (enableFundamentalAPI) {
  149.           return updateFundamentalComponent$1(current$$1, workInProgress, renderExpirationTime);
  150.         }
  151.         break;
  152.       }
  153.   }
  154.   (function () {
  155.     {
  156.       {
  157.         throw ReactError(Error('Unknown unit of work tag. This error is likely caused by a bug in React. Please file an issue.'));
  158.       }
  159.     }
  160.   })();
  161. }

assignFiberPropertiesInDEV

  1. function assignFiberPropertiesInDEV(target, source) {
  2.   if (target === null) {
  3.     target = createFiber(IndeterminateComponent, null, null, NoMode);
  4.   }
  6.   target.tag = source.tag;
  7.   target.key = source.key;
  8.   target.elementType = source.elementType;
  9.   target.type = source.type;
  10.   target.stateNode = source.stateNode;
  11.   target.return = source.return;
  12.   target.child = source.child;
  13.   target.sibling = source.sibling;
  14.   target.index = source.index;
  15.   target.ref = source.ref;
  16.   target.pendingProps = source.pendingProps;
  17.   target.memoizedProps = source.memoizedProps;
  18.   target.updateQueue = source.updateQueue;
  19.   target.memoizedState = source.memoizedState;
  20.   target.dependencies = source.dependencies;
  21.   target.mode = source.mode;
  22.   target.effectTag = source.effectTag;
  23.   target.nextEffect = source.nextEffect;
  24.   target.firstEffect = source.firstEffect;
  25.   target.lastEffect = source.lastEffect;
  26.   target.expirationTime = source.expirationTime;
  27.   target.childExpirationTime = source.childExpirationTime;
  28.   target.alternate = source.alternate;
  29.   if (enableProfilerTimer) {
  30.     target.actualDuration = source.actualDuration;
  31.     target.actualStartTime = source.actualStartTime;
  32.     target.selfBaseDuration = source.selfBaseDuration;
  33.     target.treeBaseDuration = source.treeBaseDuration;
  34.   }
  35.   target._debugID = source._debugID;
  36.   target._debugSource = source._debugSource;
  37.   target._debugOwner = source._debugOwner;
  38.   target._debugIsCurrentlyTiming = source._debugIsCurrentlyTiming;
  39.   target._debugNeedsRemount = source._debugNeedsRemount;
  40.   target._debugHookTypes = source._debugHookTypes;
  41.   return target;
  42. }

setCurrentFiber

  1. function setCurrentFiber(fiber) {
  2.   {
  3.     // typeof getCurrentFiberStackInDev === 'function'
  4.     ReactDebugCurrentFrame.getCurrentStack = getCurrentFiberStackInDev;
  5.     current = fiber;
  6.     phase = null;
  7.   }
  8. }

startWorkTimer

  1. var shouldIgnoreFiber = function (fiber) {
  2.   // fiber.tag = 3
  3.   switch (fiber.tag) {
  4.     case HostRoot: // 3
  5.     case HostComponent: // 5
  6.     case HostText: // 6
  7.     case HostPortal: // 4
  8.     case Fragment: // 7
  9.     case ContextProvider: // 10
  10.     case ContextConsumer: // 9
  11.     case Mode: // 8
  12.       return true;
  13.     default:
  14.       return false;
  15.   }
  16. };
  17. function startWorkTimer(fiber) {
  18.   // enableUserTimingAPI = true
  19.   if (enableUserTimingAPI) {
  20.     // supportsUserTiming = true
  21.     // shouldIgnoreFiber(fiber) 返回 true
  22.     if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {
  23.       return;
  24.     }
  25.     // If we pause, this is the fiber to unwind from.
  26.     currentFiber = fiber;
  27.     if (!beginFiberMark(fiber, null)) {
  28.       return;
  29.     }
  30.     fiber._debugIsCurrentlyTiming = true;
  31.   }
  32. }