React源码解析之「错误处理」流程

      //捕获异常，并处理
      catch (thrownValue)
      {
        //抛出可预期的错误
        throwException(
          root,
          returnFiber,
          sourceFiber,
          thrownValue,
          renderExpirationTime,
        );
        //完成对sourceFiber的渲染，
        //但是因为已经是报错的，所以不会再渲染sourceFiber的子节点了
        //sourceFiber 即报错的节点
        workInProgress = completeUnitOfWork(sourceFiber);
      }

  // The source fiber did not complete.
  //effectTag 置为 Incomplete
  //判断节点更新的过程中出现异常
  sourceFiber.effectTag |= Incomplete;

    //如果该节点没有异常抛出的话，即可正常执行
    if ((workInProgress.effectTag & Incomplete) === NoEffect) {
    
    }else{
       // This fiber did not complete because something threw. Pop values off
      // the stack without entering the complete phase. If this is a boundary,
      // capture values if possible.
      //节点未能完成更新，捕获其中的错误
      const next = unwindWork(workInProgress, renderExpirationTime);
    //如果next存在，则表示产生了新 work
      if (next !== null) {
        // If completing this work spawned new work, do that next. We'll come
        // back here again.
        // Since we're restarting, remove anything that is not a host effect
        // from the effect tag.
        //更新其 effectTag，标记是 restart 的
        next.effectTag &= HostEffectMask;
        //返回 next，以便执行新 work
        return next;
      }
      //如果父节点存在的话，重置它的 Effect 链，标记为「未完成」
      if (returnFiber !== null) {
        // Mark the parent fiber as incomplete and clear its effect list.
        returnFiber.firstEffect = returnFiber.lastEffect = null;
        returnFiber.effectTag |= Incomplete;
      }
    }

next.effectTag &= HostEffectMask

export const NoEffect = /*              */ 0b000000000000; //0
// 渲染出错，捕获到错误信息
export const DidCapture = /*            */ 0b000001000000; //64
// Union of all host effects
export const HostEffectMask = /*        */ 0b001111111111; //1023
// 任何造成 fiber 的 work 无法完成的情况
export const Incomplete = /*            */ 0b010000000000; //1024
// 需要处理错误
export const ShouldCapture = /*         */ 0b100000000000; //2048

//根据不同组件的类型和目标节点的effectTag，判断返回该节点还是 null
function unwindWork(
  workInProgress: Fiber,
  renderExpirationTime: ExpirationTime,
) {
  switch (workInProgress.tag) {
    //注意：只有ClassComponent和SuspenseComponent有ShouldCaptutre 的 sideEffect
    //也就是说，只有 ClassComponent和SuspenseComponent能捕获到错误
    case ClassComponent: {
      //===暂时跳过===
      const Component = workInProgress.type;
      if (isLegacyContextProvider(Component)) {
        popLegacyContext(workInProgress);
      }
      //获取effectTag
      const effectTag = workInProgress.effectTag;
      //如果 effectTag 上有 ShouldCapture 的副作用（side-effect）的话，
      //就将 ShouldCapture 去掉，加上 DidCapture 的副作用
      if (effectTag & ShouldCapture) {
        workInProgress.effectTag = (effectTag & ~ShouldCapture) | DidCapture;
        return workInProgress;
      }
      return null;
    }
    //如果fiberRoot 节点捕获到错误的话，则说明能处理错误的子节点没有去处理
    //可能是 React 内部的 bug
    case HostRoot: {
      popHostContainer(workInProgress);
      popTopLevelLegacyContextObject(workInProgress);
      const effectTag = workInProgress.effectTag;
      invariant(
        (effectTag & DidCapture) === NoEffect,
        'The root failed to unmount after an error. This is likely a bug in ' +
        'React. Please file an issue.',
      );
      workInProgress.effectTag = (effectTag & ~ShouldCapture) | DidCapture;
      return workInProgress;
    }
    //即 DOM 元素，会直接返回 null
    //也就是说，会交给父节点去处理
    //如果父节点仍是 HostComponent 的话，会向上递归，直到到达ClassComponent
    //然后让ClassComponent捕获 error
    case HostComponent: {
      // TODO: popHydrationState
      popHostContext(workInProgress);
      return null;
    }
    case SuspenseComponent: {
      popSuspenseContext(workInProgress);
      const effectTag = workInProgress.effectTag;
      if (effectTag & ShouldCapture) {
        workInProgress.effectTag = (effectTag & ~ShouldCapture) | DidCapture;
        // Captured a suspense effect. Re-render the boundary.
        return workInProgress;
      }
      return null;
    }
    case DehydratedSuspenseComponent: {
      if (enableSuspenseServerRenderer) {
        // TODO: popHydrationState
        popSuspenseContext(workInProgress);
        const effectTag = workInProgress.effectTag;
        if (effectTag & ShouldCapture) {
          workInProgress.effectTag = (effectTag & ~ShouldCapture) | DidCapture;
          // Captured a suspense effect. Re-render the boundary.
          return workInProgress;
        }
      }
      return null;
    }
    case SuspenseListComponent: {
      popSuspenseContext(workInProgress);
      // SuspenseList doesn't actually catch anything. It should've been
      // caught by a nested boundary. If not, it should bubble through.
      return null;
    }
    case HostPortal:
      popHostContainer(workInProgress);
      return null;
    case ContextProvider:
      popProvider(workInProgress);
      return null;
    case EventComponent:
      if (enableFlareAPI) {
        popHostContext(workInProgress);
      }
      return null;
    default:
      return null;
  }
}

function finishClassComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  shouldUpdate: boolean,
  hasContext: boolean,
  renderExpirationTime: ExpirationTime,
) {
  //判断是否有错误捕获
  const didCaptureError = (workInProgress.effectTag & DidCapture) !== NoEffect;

  let nextChildren;
  //getDerivedStateFromError是生命周期api，作用是捕获 render error，详情请看：
  //https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromerror
  if (
    didCaptureError &&
    typeof Component.getDerivedStateFromError !== 'function'
  ) {
    // If we captured an error, but getDerivedStateFrom catch is not defined,
    // unmount all the children. componentDidCatch will schedule an update to
    // re-render a fallback. This is temporary until we migrate everyone to
    // the new API.
    // TODO: Warn in a future release.
    //如果出现 error 但是开发者没有调用getDerivedStateFromError的话，就中断渲染
    nextChildren = null;
  }

  //当 classComponent 内部的节点报错时
  if (current !== null && didCaptureError) {
    // If we're recovering from an error, reconcile without reusing any of
    // the existing children. Conceptually, the normal children and the children
    // that are shown on error are two different sets, so we shouldn't reuse
    // normal children even if their identities match.
    //强制重新计算 children，因为当出错时，是渲染到节点上的 props/state 出现了问题，所以不能复用，必须重新 render
    forceUnmountCurrentAndReconcile(
      current,
      workInProgress,
      nextChildren,
      renderExpirationTime,
    );
  }
}

// 强制重新计算 children
function forceUnmountCurrentAndReconcile(
  current: Fiber,
  workInProgress: Fiber,
  nextChildren: any,
  renderExpirationTime: ExpirationTime,
) {
  // This function is fork of reconcileChildren. It's used in cases where we
  // want to reconcile without matching against the existing set. This has the
  // effect of all current children being unmounted; even if the type and key
  // are the same, the old child is unmounted and a new child is created.
  //
  // To do this, we're going to go through the reconcile algorithm twice. In
  // the first pass, we schedule a deletion for all the current children by
  // passing null.

  //关于reconcileChildFibers()的讲解，请看「React源码解析之FunctionComponent（上）」
  //https://juejin.im/post/5ddbe114e51d45231e010c75
  workInProgress.child = reconcileChildFibers(
    workInProgress,
    current.child,
    //nextChildren 为 null 也就是删除内部的所有子节点
    //渲染出的是一个空的 classComponent
    null,
    renderExpirationTime,
  );
  // In the second pass, we mount the new children. The trick here is that we
  // pass null in place of where we usually pass the current child set. This has
  // the effect of remounting all children regardless of whether their their
  // identity matches.
  //再渲染一遍，此时老 props 为 null（对应上面的 nextChildren = null）
  workInProgress.child = reconcileChildFibers(
    workInProgress,
    //workInProgress 为 null
    null,
    //这里的新 props 跟老 props（null）基本是没有共同属性的
    nextChildren,
    renderExpirationTime,
  );
}