React16源码: React中的performWork的源码实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了React16源码: React中的performWork的源码实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

performWork

1 ）概述

performWork 涉及到在调度完成，或者同步任务进来之后整个 root 节点链条如何更新
怎么更新一棵 Fiber 树，它的每一个节点是如何被遍历到，以及如何进行更新操作
A. 在执行 performWork 时候，是否有 deadline 的区分
- deadline 是通过 reactschedule 它的一个时间片，更新的过程当中
- 产生的一个叫做 deadlineobject 的对象
- 它可以用来判断我们在一帧的渲染时间内留给react进行fiber树渲染的时间还有没有
B.循环渲染root的条件
- 一个应用当中可能会有多个root节点
- 同时每一个root节点上面呢又会有不同优先级的任务产生
- 要循环去遍历各个不同的root节点
- 以及他们的不同的优先级的任务，然后按照优先级去一个个去更新
- 这个循环它如何建立，如何判断这个循环是否成立的条件
C.超过时间片之后的一个处理
- 在deadline到了之后，就是我们这一帧的渲染时间已经到了
- 我们需要把js的执行权又交回给浏览器，这个时候又该怎么做

2 ）源码

定位到 packages/react-reconciler/src/ReactFiberScheduler.js文章来源地址https://www.toymoban.com/news/detail-796852.html

function performAsyncWork() {
  try {
    if (!shouldYieldToRenderer()) {
      // The callback timed out. That means at least one update has expired.
      // Iterate through the root schedule. If they contain expired work, set
      // the next render expiration time to the current time. This has the effect
      // of flushing all expired work in a single batch, instead of flushing each
      // level one at a time.
      if (firstScheduledRoot !== null) {
        recomputeCurrentRendererTime();
        let root: FiberRoot = firstScheduledRoot;
        do {
          didExpireAtExpirationTime(root, currentRendererTime);
          // The root schedule is circular, so this is never null.
          root = (root.nextScheduledRoot: any);
        } while (root !== firstScheduledRoot);
      }
    }
    performWork(NoWork, true);
  } finally {
    didYield = false;
  }
}


function performSyncWork() {
  performWork(Sync, null);
}

function performWork(minExpirationTime: ExpirationTime, dl: Deadline | null) {
  deadline = dl;

  // Keep working on roots until there's no more work, or until we reach
  // the deadline.
  findHighestPriorityRoot();

  if (deadline !== null) {
    recomputeCurrentRendererTime();
    currentSchedulerTime = currentRendererTime;

    if (enableUserTimingAPI) {
      const didExpire = nextFlushedExpirationTime < currentRendererTime;
      const timeout = expirationTimeToMs(nextFlushedExpirationTime);
      stopRequestCallbackTimer(didExpire, timeout);
    }

    while (
      nextFlushedRoot !== null &&
      nextFlushedExpirationTime !== NoWork &&
      (minExpirationTime === NoWork ||
        minExpirationTime >= nextFlushedExpirationTime) &&
      (!deadlineDidExpire || currentRendererTime >= nextFlushedExpirationTime)
    ) {
      performWorkOnRoot(
        nextFlushedRoot,
        nextFlushedExpirationTime,
        currentRendererTime >= nextFlushedExpirationTime,
      );
      findHighestPriorityRoot();
      recomputeCurrentRendererTime();
      currentSchedulerTime = currentRendererTime;
    }
  } else {
    while (
      nextFlushedRoot !== null &&
      nextFlushedExpirationTime !== NoWork &&
      (minExpirationTime === NoWork ||
        minExpirationTime >= nextFlushedExpirationTime)
    ) {
      performWorkOnRoot(nextFlushedRoot, nextFlushedExpirationTime, true);
      findHighestPriorityRoot();
    }
  }

  // We're done flushing work. Either we ran out of time in this callback,
  // or there's no more work left with sufficient priority.

  // If we're inside a callback, set this to false since we just completed it.
  if (deadline !== null) {
    callbackExpirationTime = NoWork;
    callbackID = null;
  }
  // If there's work left over, schedule a new callback.
  if (nextFlushedExpirationTime !== NoWork) {
    scheduleCallbackWithExpirationTime(
      ((nextFlushedRoot: any): FiberRoot),
      nextFlushedExpirationTime,
    );
  }

  // Clean-up.
  deadline = null;
  deadlineDidExpire = false;

  finishRendering();
}

performAsyncWork, performSyncWork, performWork 三个方法连在一起
对于 performSyncWork 直接调用 performWork(Sync, null); 就一行代码

performAsyncWork 就相对复杂，是通过 react scheduler 调度回来的

参数是 deadline 对象 dl
本质上只有一个 if判断和执行 performWork 方法

在if判断中， recomputeCurrentRendererTime 这个方法不涉及主要流程，跳过

在找到 root 之后，执行 didExpireaTexpirationTime 标记在root节点上的一些变量

// packages/react-reconciler/src/ReactFiberPendingPriority.js
export function didExpireAtExpirationTime(
  root: FiberRoot,
  currentTime: ExpirationTime,
): void {
  const expirationTime = root.expirationTime;
  // 有任务，但任务过期
  if (expirationTime !== NoWork && currentTime >= expirationTime) {
    // The root has expired. Flush all work up to the current time.
    root.nextExpirationTimeToWorkOn = currentTime; // 挂载 当前时间 作为 nextExpirationTimeToWorkOn 属性
  }
}

之后，一个do while 找最终的 root

之后，执行 performWork(NoWork, dl)
- NoWork 是 0
- export const NoWork = 0

在 performWork 中

有两个参数，minExpirationTime: ExpirationTime, dl: Deadline | null

findHighestPriorityRoot 这个方法

function findHighestPriorityRoot() {
  let highestPriorityWork = NoWork;
  let highestPriorityRoot = null;
  // 这个if表示仍存在节点更新情况
  if (lastScheduledRoot !== null) {
    let previousScheduledRoot = lastScheduledRoot;
    let root = firstScheduledRoot;
    // 存在 root 就进行循环
    while (root !== null) {
      const remainingExpirationTime = root.expirationTime;
      // 这个if判断表示，是没有任何更新的
      if (remainingExpirationTime === NoWork) {
        // This root no longer has work. Remove it from the scheduler.

        // TODO: This check is redudant, but Flow is confused by the branch
        // below where we set lastScheduledRoot to null, even though we break
        // from the loop right after.
        invariant(
          previousScheduledRoot !== null && lastScheduledRoot !== null,
          'Should have a previous and last root. This error is likely ' +
            'caused by a bug in React. Please file an issue.',
        );
        // 这种情况，只有一个 root 节点
        if (root === root.nextScheduledRoot) {
          // This is the only root in the list.
          root.nextScheduledRoot = null;
          firstScheduledRoot = lastScheduledRoot = null;
          break;
        } else if (root === firstScheduledRoot) {
          // 这时候 root 就没用了，可以删除了，获取 next
          // This is the first root in the list.
          const next = root.nextScheduledRoot;
          firstScheduledRoot = next;
          lastScheduledRoot.nextScheduledRoot = next;
          root.nextScheduledRoot = null;
        } else if (root === lastScheduledRoot) {
          // 这个时候，root是最后一个
          // This is the last root in the list.
          lastScheduledRoot = previousScheduledRoot;
          lastScheduledRoot.nextScheduledRoot = firstScheduledRoot;
          root.nextScheduledRoot = null;
          break;
        } else {
          // 移除 中间的 root.nextScheduledRoot 节点
          previousScheduledRoot.nextScheduledRoot = root.nextScheduledRoot;
          root.nextScheduledRoot = null;
        }
        root = previousScheduledRoot.nextScheduledRoot;
      } else {
        // 判断优先级，更新更高优先级
        if (
          highestPriorityWork === NoWork ||
          remainingExpirationTime < highestPriorityWork
        ) {
          // Update the priority, if it's higher
          highestPriorityWork = remainingExpirationTime;
          highestPriorityRoot = root;
        }
        if (root === lastScheduledRoot) {
          break;
        }
        if (highestPriorityWork === Sync) {
          // Sync is highest priority by definition so
          // we can stop searching.
          break;
        }
        previousScheduledRoot = root;
        root = root.nextScheduledRoot;
      }
    }
  }
  // 处理更新后的 highestPriorityRoot 和 highestPriorityWork
  nextFlushedRoot = highestPriorityRoot;
  nextFlushedExpirationTime = highestPriorityWork;
}

看下 deadine 不为 null 时的情况

这是异步的情况

主要看 while 里的 (!deadlineDidExpire || currentRendererTime >= nextFlushedExpirationTime)

!deadlineDidExpire 表示时间片还有剩余时间
nextFlushedExpirationTime 是现在要输出任务的过期时间
- currentRendererTime >= nextFlushedExpirationTime
- 说明当前 render 时间比过期时间大，已经超时了，需要强制输出
之后执行 performWorkOnRoot
- 关于这个函数，主要关注第三个参数
- 默认是 true
- 对于异步情况，值为: currentRendererTime >= nextFlushedExpirationTime
  - 任务过期，则为 true, 否则为 false

进入这个函数

function performWorkOnRoot(
  root: FiberRoot,
  expirationTime: ExpirationTime,
  isExpired: boolean, // 是否过期，这个方法里一定有针对过期任务的强制更新
) {
  invariant(
    !isRendering,
    'performWorkOnRoot was called recursively. This error is likely caused ' +
      'by a bug in React. Please file an issue.',
  );

  isRendering = true; // 注意这里和函数结束

  // Check if this is async work or sync/expired work.
  // deadline === null  是 Sync的情况，isExpired 是过期的情况
  if (deadline === null || isExpired) {
    // Flush work without yielding.
    // TODO: Non-yieldy work does not necessarily imply expired work. A renderer
    // may want to perform some work without yielding, but also without
    // requiring the root to complete (by triggering placeholders).

    let finishedWork = root.finishedWork;
    if (finishedWork !== null) {
      // This root is already complete. We can commit it.
      completeRoot(root, finishedWork, expirationTime); // 有 finishedWork 直接 completeRoot
    } else {
      root.finishedWork = null;
      // If this root previously suspended, clear its existing timeout, since
      // we're about to try rendering again.
      const timeoutHandle = root.timeoutHandle;
      // 处理 timeoutHandle 的情况，跳过
      if (timeoutHandle !== noTimeout) {
        root.timeoutHandle = noTimeout;
        // $FlowFixMe Complains noTimeout is not a TimeoutID, despite the check above
        cancelTimeout(timeoutHandle);
      }
      // 在这个条件下，不可中断 因为在上层if框架下，要么是 Sync的任务，要么是 过期的任务需要立即执行
      const isYieldy = false;
      renderRoot(root, isYieldy, isExpired);
      finishedWork = root.finishedWork;
      if (finishedWork !== null) {
        // We've completed the root. Commit it.
        completeRoot(root, finishedWork, expirationTime);
      }
    }
  } else {
    // 这里匹配 Async 异步任务，和上面Sync的任务流程基本差不多
    // Flush async work.
    let finishedWork = root.finishedWork;
    // 一开始进来判断这个 finishedWork，有可能在上一个时间片中，renderRoot执行完了，但是，没有时间去执行 completeRoot 了
    // 需要再下次异步调度的时候进来，如果有 finishedWork 则先 completeRoot
    if (finishedWork !== null) {
      // This root is already complete. We can commit it.
      completeRoot(root, finishedWork, expirationTime);
    } else {
      root.finishedWork = null;
      // If this root previously suspended, clear its existing timeout, since
      // we're about to try rendering again.
      const timeoutHandle = root.timeoutHandle;
      if (timeoutHandle !== noTimeout) {
        root.timeoutHandle = noTimeout;
        // $FlowFixMe Complains noTimeout is not a TimeoutID, despite the check above
        cancelTimeout(timeoutHandle);
      }
      // 这个任务是可以中断的
      const isYieldy = true;
      renderRoot(root, isYieldy, isExpired);
      finishedWork = root.finishedWork;
      // finishedWork 有可能为 null, 中断了就没有完成任务
      if (finishedWork !== null) {
        // We've completed the root. Check the deadline one more time
        // before committing.
        // 先判断是否需要跳出，这时候时间片可能已经用完，如果没有用完，执行 completeRoot
        if (!shouldYield()) {
          // Still time left. Commit the root.
          completeRoot(root, finishedWork, expirationTime);
        } else {
          // There's no time left. Mark this root as complete. We'll come
          // back and commit it later.
          // 需要跳出，则赋值 finishedWork，注意这里不执行 completeRoot，因为没有时间了，需要等待下个时间片进来才能执行
          root.finishedWork = finishedWork;
        }
      }
    }
  }

  isRendering = false;
}

执行 findHighestPriorityRoot
currentSchedulerTime = currentRendererTime

看下 deadine 为 null 时的情况
- 这是同步的情况
- while(nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && (minExpirationTime === NoWork || minExpirationTime >= nextFlushedExpirationTime))
  - 对于 perfromSyncWork 来说，minExpirationTime 是 1，1 >= nextFlushedExpirationTime 说明只有 Sync(1)的情况，或者 NoWork，所以 nextFlushedExpirationTime 只有是1的情况
  - 相当于在 perfromSyncWork 的时候，只会执行 root.expirationTime 是 Sync 的任务，也就是说是同步更新的更新，才会在这里继续执行，这样和 SyncWork 这函数名匹配
  - 在这种情况下，调用 performWorkOnRoot 和 findHighestPriorityRoot 执行掉 Sync的任务