# React 源码解读（三） requestWork

function requestWork(root: FiberRoot, expirationTime: ExpirationTime) {
  // 把root添加到调度队列， 链表的形式
  addRootToSchedule(root, expirationTime);
  // 在render过程当中， 直接返回return
  // batchedUpdate 批处理  setState  isRendering=true   第二个setState
  // 不会出现频繁式的更新
  if (isRendering) {
    // Prevent reentrancy. Remaining work will be scheduled at the end of
    // the currently rendering batch.
    return;
  }

  if (isBatchingUpdates) {
    
    // Flush work at the end of the batch.
    // 执行unbatchedUpdates()时会设置为true
    if (isUnbatchingUpdates) {
      // ...unless we're inside unbatchedUpdates, in which case we should
      // flush it now.
      nextFlushedRoot = root;
      nextFlushedExpirationTime = Sync;
      // 立即执行更新
      performWorkOnRoot(root, Sync, false);
    }
    // 批处理 return 不执行
    return;
  }

  // TODO: Get rid of Sync and use current time?
  // 同步任务，直接执行
  if (expirationTime === Sync) {
    // 立即同步执行
    performSyncWork();
  } else {
    // 通过ExpirationTime 进行调度
    scheduleCallbackWithExpirationTime(root, expirationTime);
  }
}

    // update队列
    let finishedWork = root.finishedWork;
    // 判断是否存在任务了
    if (finishedWork !== null) {
      // This root is already complete. We can commit it.
      // 存在任务了
      // finishedWork存在，进行commit了
      completeRoot(root, finishedWork, expirationTime);
    } else {
      // root.finishedWork 有可能是其他什么值 undefined 之类的，重新置成 null 没毛病
      root.finishedWork = null;
      // If this root previously suspended, clear its existing timeout, since
      // we're about to try rendering again.
      // 如果这个Root，之前有暂停，清除掉这个定时器，会尝试继续渲染
      const timeoutHandle = root.timeoutHandle;
      if (timeoutHandle !== noTimeout) {
        root.timeoutHandle = noTimeout;
        // $FlowFixMe Complains noTimeout is not a TimeoutID, despite the check above
        cancelTimeout(timeoutHandle);
      }
      // 继续调度
      renderRoot(root, isYieldy);
      finishedWork = root.finishedWork;
      if (finishedWork !== null) {
        // We've completed the root. Commit it.
        // 判断是否可以执行commit
        completeRoot(root, finishedWork, expirationTime);
      }
    }

// 设置 ReactCurrentDispatcher， 包含所有hooks的实现
  const previousDispatcher = ReactCurrentDispatcher.current;
  ReactCurrentDispatcher.current = ContextOnlyDispatcher;

if (
    expirationTime !== nextRenderExpirationTime ||
    root !== nextRoot ||
    nextUnitOfWork === null
  ) 

    // 重置
    resetStack();
    nextRoot = root;
    nextRenderExpirationTime = expirationTime;
    // 创建镜像Fiber， 赋值给alternate属性
    // 是当前fiber对象的一个镜像，WorkInProgress Fiber对象
    // Fiber发生了变化，直接与 WorkInProgress Fiber 对比
    // Fiber.alternate = WorkInProgress Fiber
    // WorkInProgress.alternate = Fiber
    nextUnitOfWork = createWorkInProgress(
      nextRoot.current,
      null,
      nextRenderExpirationTime,
    );

  startWorkLoopTimer(nextUnitOfWork);
  do {
    try {
      workLoop(isYieldy);
    } catch (thrownValue) {
      //......
    }
    break;
  } while (true);

const updateExpirationTime = workInProgress.expirationTime;
  // 判断节点是否存在
  if (current !== null) {
    const oldProps = current.memoizedProps;
    const newProps = workInProgress.pendingProps;
    // 前后props是否相等
    // 判断了是否有老版本context使用并且发生变化
    if (oldProps !== newProps || hasLegacyContextChanged()) {
      // If props or context changed, mark the fiber as having performed work.
      // This may be unset if the props are determined to be equal later (memo).
      didReceiveUpdate = true;
      // 需要更新的优先级小于当前更新的优先级
    } else if (updateExpirationTime < renderExpirationTime) {
      didReceiveUpdate = false;
      // switch (workInProgress.tag) case
      }
      return bailoutOnAlreadyFinishedWork(
        current,
        workInProgress,
        renderExpirationTime,
      );
    }
  } else {
    didReceiveUpdate = false;
  }

 // 在进入开始阶段之前，清除到期时间。
  workInProgress.expirationTime = NoWork;
  // 就根据不同的节点类型进行更新
  // 真正在这个下面的逻辑里面打上标签EffectTag, 将 update 加入到 updateQuene 中，产生 finishWork
  // update => updateQuene => finishWork
  switch (workInProgress.tag) {}
    // FunctionalComponent在第一次创建 Fiber 的时候就是 IndeterminateComponent
    // 会调到 reconcileChildren 这个方法， 判断是否能够复用，执行节点的更新

export const PerformedWork = /*         */ 0b000000000001;

workInProgress.effectTag |= PerformedWork

function scheduleCallbackWithExpirationTimescheduleCallbackWithExpirationTime(
  root: FiberRoot,
  expirationTime: ExpirationTime,
) {
  // 判断是否还有正在跑的任务
  if (callbackExpirationTime !== NoWork) {
    // 判断任务优先级， 优先级低的任务直接return
    if (expirationTime < callbackExpirationTime) {
      // Existing callback has sufficient timeout. Exit.
      return;
    } else {
      // 清空之前的callbackID
      if (callbackID !== null) {
        // 现有的回调没有足够的超时。 取消并安排一个新的。
        cancelDeferredCallback(callbackID);
      }
    }
  } else {
    startRequestCallbackTimer();
  }
  // 设置新的callback和callbackExiporationTime
  callbackExpirationTime = expirationTime;
  const currentMs = now() - originalStartTimeMs;
  const expirationTimeMs = expirationTimeToMs(expirationTime);
  // 判断是否超时
  const timeout = expirationTimeMs - currentMs;
  // 生成一个 callbackID，用于关闭任务 
  // scheduledCallback = callback;
  // 把callBack为performAsyncWork 赋给 scheduledCallback，
  // scheduleDeferredCallback = unstable_scheduleCallback  => requestHostCallback => requestAnimationFrame
  callbackID = scheduleDeferredCallback(performAsyncWork, {timeout});
}