跳到主要内容

React Fiber 过渡

一、作用​

二、导出的常量​

1. 没有过渡​

export const NoTransition = null;

常量​

1. 上次开始过渡完成时​

信息
// Attach this reconciler instance's onStartTransitionFinish implementation to
// the shared internals object. This is used by the isomorphic implementation of
// startTransition to compose all the startTransitions together.
//
// 将此调和器实例的 onStartTransitionFinish 实现附加到
// 共享内部对象上。这个方法被同构实现的
// startTransition 用来将所有的 startTransition 组合在一起。
//
//   function startTransition(fn) {
//     return startTransitionDOM(() => {
//       return startTransitionART(() => {
//         return startTransitionThreeFiber(() => {
//           // and so on...
//           return fn();
//         });
//       });
//     });
//   }
//
// Currently we only compose together the code that runs at the end of each
// startTransition, because for now that's sufficient — the part that sets
// isTransition=true on the stack uses a separate shared internal field. But
// really we should delete the shared field and track isTransition per
// reconciler. Leaving this for a future PR.
//
// 目前我们只组合在每次 startTransition 结束时运行的代码，因为目前这样就
// 足够了 —— 设置堆栈上 isTransition=true 的部分使用了一个单独的共享内部字段。
// 但实际上我们应该删除这个共享字段，并针对每个协调器跟踪 isTransition。
// 此部分留作未来的 PR。
const prevOnStartTransitionFinish = ReactSharedInternals.S;
ReactSharedInternals.S = function onStartTransitionFinishForReconciler(
  transition: Transition,
  returnValue: mixed,
) {
  markTransitionStarted(); // 标记状态
  if (
    typeof returnValue === 'object' &&
    returnValue !== null &&
    typeof returnValue.then === 'function'
  ) {
    // If we're going to wait on some async work before scheduling an update.
    // We mark the time so we can later log how long we were blocked on the Action.
    // Ideally, we'd include the sync part of the action too but since that starts
    // in isomorphic code it currently leads to tricky layering. We'd have to pass
    // in performance.now() to this callback but we sometimes use a polyfill.
    //
    // 如果我们打算在安排更新之前等待一些异步工作。
    // 我们会记录时间，这样以后可以记录我们在该动作上被阻塞了多久。
    // 理想情况下，我们也会包含动作的同步部分，但由于它在同构代码中启动，当前会导致层次结构复杂。
    // 我们必须将 performance.now() 传入此回调，但有时我们会使用填充程序。
    startAsyncTransitionTimer();

    // This is an async action
    // 这是一个异步操作
    const thenable: Thenable<mixed> = returnValue as any;
    entangleAsyncAction(transition, thenable);
  }
  if (enableViewTransition) {
    if (entangledTransitionTypes !== null) {
      // If we scheduled work on any new roots, we need to add any entangled async
      // transition types to those roots too.
      //
      // 如果我们安排了对任何新根的工作，我们也需要将任何相关的异步
      // 转换类型添加到这些根中。
      let root = firstScheduledRoot;
      while (root !== null) {
        queueTransitionTypes(root, entangledTransitionTypes);
        root = root.next;
      }
    }
    const transitionTypes = transition.types;
    if (transitionTypes !== null) {
      // Within this Transition we should've now scheduled any roots we have updates
      // to work on. If there are no updates on a root, then the Transition type won't
      // be applied to that root.
      //
      // 在此过渡期间，我们现在应该已经安排好要更新的所有根节点。
      // 如果某个根节点没有更新，那么该过渡类型将不会应用到该根节点。
      let root = firstScheduledRoot;
      while (root !== null) {
        queueTransitionTypes(root, transitionTypes);
        root = root.next;
      }
      if (peekEntangledActionLane() !== NoLane) {
        // If we have entangled, async actions going on, the update associated with
        // these types might come later. We need to save them for later.
        //
        // 如果我们有纠缠的异步操作在进行，与这些类型相关的更新可能会稍后才出现。
        // 我们需要把它们保存起来以备后用。
        entangleAsyncTransitionTypes(transitionTypes);
      }
    }
  }
  if (prevOnStartTransitionFinish !== null) {
    prevOnStartTransitionFinish(transition, returnValue);
  }
};

变量​

工具​