06 - 完成節(jié)點任務(wù)

完成節(jié)點更新之后完成節(jié)點的創(chuàng)建，并提供優(yōu)化到最小幅度的DOM更新列表。

1. completeUnitOfWork

第 04 篇說過 renderRoot 做的事情：

• 調(diào)用 workLoop 進(jìn)行循環(huán)單元更新
• 捕獲錯誤并進(jìn)行處理
• 走完流程之后善后

現(xiàn)在在 workLoop 中調(diào)用 performUnitOfWork。
next = beginWork(current, workInProgress, nextRenderExpirationTime)
每次都 return child，以便繼續(xù)循環(huán)向下單路查找，直到觸及葉子節(jié)點（樹枝到頭了就是葉子）返回 null，也就是葉子節(jié)點沒有 child 了。這算是 renderRoot 中完成了一次 workLoop 調(diào)用。
此時，傳入該葉子節(jié)點執(zhí)行 completeUnitOfWork。
之后嘗試?yán)^續(xù)循環(huán)執(zhí)行 wokrLoop，處理其他路。

completeUnitOfWork：

• 1. 根據(jù)是否中斷來調(diào)用不同的處理方法

在外部 renderRoot 使用 do...while 調(diào)用 workLoop 時會使用 try...catch，只要不是致命錯誤，就記錄相應(yīng)錯誤（比如 Suspense 的 promise 在中間過程中的合理報錯），然后繼續(xù)執(zhí)行循環(huán)。

• 2. 判斷是否有兄弟節(jié)點來執(zhí)行不同的操作
• 3. 完成節(jié)點之后賦值 effect 鏈

在之前的 beginWork 中為節(jié)點標(biāo)記了相應(yīng)的 sideEffect，也就是等到 commit 階段中更新 dom 時的操作依據(jù)(增刪改等)。而在 completeUnitOfWork 中則將 fiber 上的 sideEffect 進(jìn)一步進(jìn)行串聯(lián)，方便 commit 時使用。
之前第 03 篇中說過每個 fiber 上都有：

• effectTag: SideEffectTag。用來記錄 SideEffect。
• nextEffect: Fiber | null。單鏈表用來快速查找下一個side effect。
• firstEffect: Fiber | null。 子樹中第一個side effect。
• lastEffect: Fiber | null。子樹中最后一個side effect。

有些像是層層嵌套的文件夾 A/B/C/D，B中只記錄了C/D。這些打了 effectTag 標(biāo)記的 fiber 節(jié)點通過這些指針單獨組成單向鏈表，反正都是些指針引用，也不占多少空間。

通過不斷地 completeUnitOfWork 將 effect 匯總串聯(lián)到上層節(jié)點，最終 RootFiber 上的 firstEffect 到 lastEffect 這個鏈表中記錄了所有帶有 effectTag 的 fiber 節(jié)點，即最終在 commit 階段所有需要應(yīng)用到 dom 節(jié)點上的 SideEffect。

TODO：commitRoot 方法
**
SideEffectTag 清單：

export type SideEffectTag = number;

// Don't change these two values. They're used by React Dev Tools.
export const NoEffect = /*              */ 0b00000000000;
export const PerformedWork = /*         */ 0b00000000001;

// You can change the rest (and add more).
export const Placement = /*             */ 0b00000000010;
export const Update = /*                */ 0b00000000100;
export const PlacementAndUpdate = /*    */ 0b00000000110;
export const Deletion = /*              */ 0b00000001000;
export const ContentReset = /*          */ 0b00000010000;
export const Callback = /*              */ 0b00000100000;
export const DidCapture = /*            */ 0b00001000000;
export const Ref = /*                   */ 0b00010000000;
export const Snapshot = /*              */ 0b00100000000;

// Update & Callback & Ref & Snapshot
export const LifecycleEffectMask = /*   */ 0b00110100100;

// Union of all host effects
export const HostEffectMask = /*        */ 0b00111111111;

export const Incomplete = /*            */ 0b01000000000;
export const ShouldCapture = /*         */ 0b10000000000;

performUnitOfWork：

function performUnitOfWork(workInProgress: Fiber): Fiber | null {
  // The current, flushed, state of this fiber is the alternate.
  // Ideally nothing should rely on this, but relying on it here
  // means that we don't need an additional field on the work in
  // progress.
  const current = workInProgress.alternate;

  // See if beginning this work spawns more work.
  startWorkTimer(workInProgress);

  let next;
  if (enableProfilerTimer) {
    if (workInProgress.mode & ProfileMode) {
      startProfilerTimer(workInProgress);
    }

    next = beginWork(current, workInPrognextRenderExpirationTimeress, );
    workInProgress.memoizedProps = workInProgress.pendingProps;

    if (workInProgress.mode & ProfileMode) {
      // Record the render duration assuming we didn't bailout (or error).
      stopProfilerTimerIfRunningAndRecordDelta(workInProgress, true);
    }
  } else {
    next = beginWork(current, workInProgress, nextRenderExpirationTime);
    workInProgress.memoizedProps = workInProgress.pendingProps;
  }

  if (next === null) {
    // 如果這次遍歷時調(diào)用beginWork返回了null，說明已經(jīng)到了單路的葉子節(jié)點了，于是調(diào)用completeUnitOfWork。
    // 當(dāng)前的workInProgress就是葉子節(jié)點，因為尋找child卻返回了null，說明到頭了。
    // If this doesn't spawn new work, complete the current work.
    next = completeUnitOfWork(workInProgress);
  }

  ReactCurrentOwner.current = null;

  return next;
}

completeUnitOfWork：
如果說 workLoop 在局部子樹中是從上向下處理節(jié)點。那么 completeUnitOfWork 中則是在局部子樹中從下向上處理節(jié)點。

if (next === null) {
  // 如果這次遍歷時調(diào)用beginWork返回了null，說明已經(jīng)到了單路的葉子節(jié)點了，于是調(diào)用completeUnitOfWork。
  // 當(dāng)前的workInProgress就是葉子節(jié)點，因為尋找child卻返回了null，說明到頭了。
  // If this doesn't spawn new work, complete the current work.
  next = completeUnitOfWork(workInProgress);
}

completeUnitOfWork 代碼有些多，主體是個 while 循環(huán)，其中有下面這個遍歷邏輯：

• 在 performUnitOfWork 中，如果從上至下單路遍歷到了葉子節(jié)點，則開始調(diào)用 completeUnitOfWork 進(jìn)行向上遍歷。
• 如果有 sibling 兄弟節(jié)點則 return 兄弟節(jié)點，以便 workLoop 中再次調(diào)用 performUnitOfWork 對剛才的兄弟節(jié)點進(jìn)行遍歷。
• 又一次單路到頭了，遇到了葉子節(jié)點，則再次 completeUnitOfWork 處理葉子節(jié)點。
• 如果當(dāng)前子樹兄弟節(jié)點全處理完了，則向上對父節(jié)點進(jìn)行 completeUnitOfWork 處理。如果父節(jié)點也有兄弟節(jié)點，則同理。

最終效果就是一整棵 RootFiber 樹：

• 每個節(jié)點都會先使用 performUnitOfWork 處理一次。
• 再使用 completeUnitOfWork 處理一次。

**
completeUnitOfWork 節(jié)選：

function completeUnitOfWork(workInProgress: Fiber): Fiber | null
// ...
if (siblingFiber !== null) {
  // If there is more work to do in this returnFiber, do that next.
  return siblingFiber;
} else if (returnFiber !== null) {
  // If there's no more work in this returnFiber. Complete the returnFiber.
  workInProgress = returnFiber;
  continue;
} else {
  // 說明更新過程完成了，到rootFiber了。等著commit階段了
  return null;
}

completeUnitOfWork 中的一些工作：

• 重設(shè) ChildExpirationTime
• completeWork

2. 重設(shè) ChildExpirationTime

ChildExpirationTime 記錄了一個 fiber 的子樹中優(yōu)先級最高的更新時間。盡管產(chǎn)生更新需求的節(jié)點可能是整個應(yīng)用 fiber 樹中的某個節(jié)點，但進(jìn)行更新調(diào)度時是從頂部 RootFiber 開始參與調(diào)度的。
因此通過 ChildExpirationTime 不斷向上匯總子樹的最高優(yōu)先級的更新時間，最終 RootFiber 的 ChildExpirationTime 記錄了整棵樹中最高優(yōu)先級的更新時間。
而在 completeUnitOfWork 從下向上進(jìn)行信息匯總時，如果某個節(jié)點的更新任務(wù)已經(jīng)得到執(zhí)行，也就是沒有自身的 expirationTime 了，那么 completeUnitOfWork 中就需要順便不斷向上重置 ChildExpirationTime。通過調(diào)用：
resetChildExpirationTime(workInProgress, nextRenderExpirationTime);

3. completeWork

• pop 各種 context 相關(guān)的內(nèi)容
• 對于 HostComponent 執(zhí)行初始化
• 初始化監(jiān)聽事件

大部分類型的 fiber 節(jié)點不需要在這一步做什么事情（Suspense 類型以后再說），而以下兩種類型有點東西：

• HostComponent
• HostText

下面主要談?wù)?HostComponent（該 fiber 類型對應(yīng)到原生 dom）在 completeWork 中的相關(guān)操作。

4. HostComponent

HostComponent 中涉及到 updateHostComponent。在一次更新而非渲染中：

• diffProperties 計算需要更新的內(nèi)容
• 不同的 dom property 處理方式不同

首次渲染時

創(chuàng)建對應(yīng)的 dom 實例：

let instance = createInstance(
  type,
  newProps,
  rootContainerInstance,
  currentHostContext,
  workInProgress,
);

appendAllChildren(instance, workInProgress, false, false);

if (
  finalizeInitialChildren( // finalizeInitialChildren 最終返回是否需要 auto focus 自動聚焦
    instance,
    type,
    newProps,
    rootContainerInstance,
    currentHostContext,
  )
) {
  markUpdate(workInProgress); // 如果是需要 autoFocus，那么還要設(shè)置 sideEffect。
}
workInProgress.stateNode = instance;

function markUpdate(workInProgress: Fiber) {
  // Tag the fiber with an update effect. This turns a Placement into
  // a PlacementAndUpdate.
  workInProgress.effectTag |= Update;
}

function markRef(workInProgress: Fiber) {
  workInProgress.effectTag |= Ref;
}

appendAllChildren：
找到子樹中第一層 dom 類型的節(jié)點，append 到自身對應(yīng)的 dom 實例下。即 workInProgress.stateNode 所記錄的原生 dom 實例。
因為在每次 completeUnitOfWork 時遇到 HostComponent 即原生 dom 對應(yīng)的 fiber 類型時，都會 appendAllChildren。
所以也就是對 fiber 樹這個虛擬 dom 進(jìn)行提純，最終從下向上構(gòu)建出純 dom 樹。
**
finalizeInitialChildren：
appendAllChildren 之后緊接著 finalizeInitialChildren 初始化事件監(jiān)聽體系。
setInitialProperties 初始化事件監(jiān)聽（后面會單獨講事件監(jiān)聽）。
初始化 dom attribute（主要是一些原生 dom 操作）。
初始化markUpdate、mark*、 defaultValue、isControlled、處理 style 屬性，px 補(bǔ)全等。

下面展開敘述。

finalizeInitialChildren 最終返回是否需要 auto focus 自動聚焦：

export function finalizeInitialChildren(
  domElement: Instance,
  type: string,
  props: Props,
  rootContainerInstance: Container,
  hostContext: HostContext,
): boolean {
  setInitialProperties(domElement, type, props, rootContainerInstance);
  return shouldAutoFocusHostComponent(type, props);
}

function shouldAutoFocusHostComponent(type: string, props: Props): boolean {
  switch (type) {
    case 'button':
    case 'input':
    case 'select':
    case 'textarea':
      return !!props.autoFocus;
  }
  return false;
}

// ...
setInitialDOMProperties(
  tag,
  domElement,
  rootContainerElement,
  props,
  isCustomComponentTag,
);

setInitialDOMProperties：

function setInitialDOMProperties(
  tag: string,
  domElement: Element,
  rootContainerElement: Element | Document,
  nextProps: Object,
  isCustomComponentTag: boolean,
): void {
  for (const propKey in nextProps) {
    if (!nextProps.hasOwnProperty(propKey)) {
      continue;
    }
    const nextProp = nextProps[propKey];
    if (propKey === STYLE) {
      // 設(shè)置 style 屬性
      // Relies on `updateStylesByID` not mutating `styleUpdates`.
      CSSPropertyOperations.setValueForStyles(domElement, nextProp);
    } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
      const nextHtml = nextProp ? nextProp[HTML] : undefined;
      if (nextHtml != null) {
        setInnerHTML(domElement, nextHtml);
      }
    } else if (propKey === CHILDREN) {
      if (typeof nextProp === 'string') {
        // Avoid setting initial textContent when the text is empty. In IE11 setting
        // textContent on a <textarea> will cause the placeholder to not
        // show within the <textarea> until it has been focused and blurred again.
        // https://github.com/facebook/react/issues/6731#issuecomment-254874553
        const canSetTextContent = tag !== 'textarea' || nextProp !== '';
        if (canSetTextContent) {
          setTextContent(domElement, nextProp);
        }
      } else if (typeof nextProp === 'number') {
        setTextContent(domElement, '' + nextProp);
      }
    } else if (
      propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
      propKey === SUPPRESS_HYDRATION_WARNING
    ) {
      // Noop
    } else if (propKey === AUTOFOCUS) {
      // We polyfill it separately on the client during commit.
      // We could have excluded it in the property list instead of
      // adding a special case here, but then it wouldn't be emitted
      // on server rendering (but we *do* want to emit it in SSR).
    } else if (registrationNameModules.hasOwnProperty(propKey)) {
      if (nextProp != null) {
        if (__DEV__ && typeof nextProp !== 'function') {
          warnForInvalidEventListener(propKey, nextProp);
        }
        ensureListeningTo(rootContainerElement, propKey);
      }
    } else if (nextProp != null) {
      DOMPropertyOperations.setValueForProperty(
        domElement,
        propKey,
        nextProp,
        isCustomComponentTag,
      );
    }
  }
}

比如設(shè)置 style 樣式屬性 setValueForStyles：
分為 -- 開頭的自定義和常規(guī) css 屬性，就是直接操作原生 dom 上的 style。

/**
 * Sets the value for multiple styles on a node.  If a value is specified as
 * '' (empty string), the corresponding style property will be unset.
 *
 * @param {DOMElement} node
 * @param {object} styles
 */
export function setValueForStyles(node, styles) {
  const style = node.style;
  for (let styleName in styles) {
    if (!styles.hasOwnProperty(styleName)) {
      continue;
    }
    const isCustomProperty = styleName.indexOf('--') === 0;
    // 嘗試為number自動補(bǔ)全px
    const styleValue = dangerousStyleValue(
      styleName,
      styles[styleName],
      isCustomProperty,
    );
    if (styleName === 'float') {
      styleName = 'cssFloat';
    }
    if (isCustomProperty) {
      style.setProperty(styleName, styleValue);
    } else {
      style[styleName] = styleValue;
    }
  }
}

值得一提的是，會為一些缺省的 number 數(shù)值會自動補(bǔ)全 'px' 單位（顯然還有好些例外的 css 屬性本身的值就是純 number）：

function dangerousStyleValue(name, value, isCustomProperty) {
  const isEmpty = value == null || typeof value === 'boolean' || value === '';
  if (isEmpty) {
    return '';
  }

  if (
    !isCustomProperty &&
    typeof value === 'number' &&
    value !== 0 &&
    !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name]) // 
  ) {
    return value + 'px'; // Presumes implicit 'px' suffix for unitless numbers
  }

  return ('' + value).trim();
}

這份列表就是剛才說的“例外”，它們的樣式值就是純 number 類型，沒有 px：

/**
 * CSS properties which accept numbers but are not in units of "px".
 */
export const isUnitlessNumber = {
  animationIterationCount: true,
  borderImageOutset: true,
  borderImageSlice: true,
  borderImageWidth: true,
  boxFlex: true,
  boxFlexGroup: true,
  boxOrdinalGroup: true,
  columnCount: true,
  columns: true,
  flex: true,
  flexGrow: true,
  flexPositive: true,
  flexShrink: true,
  flexNegative: true,
  flexOrder: true,
  gridArea: true,
  gridRow: true,
  gridRowEnd: true,
  gridRowSpan: true,
  gridRowStart: true,
  gridColumn: true,
  gridColumnEnd: true,
  gridColumnSpan: true,
  gridColumnStart: true,
  fontWeight: true,
  lineClamp: true,
  lineHeight: true,
  opacity: true,
  order: true,
  orphans: true,
  tabSize: true,
  widows: true,
  zIndex: true,
  zoom: true,

  // SVG-related properties
  fillOpacity: true,
  floodOpacity: true,
  stopOpacity: true,
  strokeDasharray: true,
  strokeDashoffset: true,
  strokeMiterlimit: true,
  strokeOpacity: true,
  strokeWidth: true,
};

**
更新時（進(jìn)行 diff 判斷）

對于 input、select、textarea 就算 props 沒變，也要 markUPdate(workInProgress) 標(biāo)記后續(xù)需要更新

for 循環(huán)遍歷 lastProps 的 propKey，如果本次不是刪除該 props，則繼續(xù)遍歷，否則進(jìn)行后面的刪除操作。
通過 prop 來判斷相關(guān) dom attribute 是否發(fā)生變化：

• 刪除 style 相關(guān)屬性：把 dom style 相關(guān) css 屬性設(shè)置為 '' 空字符串即可。
• 其他 props 的若要刪除：設(shè)置為 null。
• 對于 children，只檢查 string 或者 number 類型的 props 值是否變化，從而能否跳過更新。其他則一律更新。
• 經(jīng)過以上判斷對比，可能成功地跳過了部分不必要的 props 的更新。而剩余的所有情況，則一律更新：

updatePayload.push(propKey, nextProp);

• 然后返回 updatePalyload 數(shù)組，通過 markUpdate(workInprogress) 進(jìn)行標(biāo)記。

updateHostComponent(
  current,
  workInProgress,
  type,
  newProps,
  rootContainerInstance,
);

if (current.ref !== workInProgress.ref) {
  markRef(workInProgress);
}

updateHostComponent：

• 如果當(dāng)前 fiber 節(jié)點新老 props 沒變，則跳過更新。TODO 未完待續(xù)，涉及 dom diff or props diff？

  updateHostComponent = function(
    current: Fiber,
    workInProgress: Fiber,
    type: Type,
    newProps: Props,
    rootContainerInstance: Container,
  ) {
    const oldProps = current.memoizedProps;
    // 跳過dom更新
    if (oldProps === newProps) {
      // In mutation mode, this is sufficient for a bailout because
      // we won't touch this node even if children changed.
      return;
    }

    const instance: Instance = workInProgress.stateNode; // 拿到dom實例
    const currentHostContext = getHostContext();
    const updatePayload = prepareUpdate(
      instance,
      type,
      oldProps,
      newProps,
      rootContainerInstance,
      currentHostContext,
    );
    // TODO: Type this specific to this type of component.
    workInProgress.updateQueue = (updatePayload: any);
    // If the update payload indicates that there is a change or if there
    // is a new ref we mark this as an update. All the work is done in commitWork.
    if (updatePayload) {
      markUpdate(workInProgress);
    }
  };

5. HostText

HostText 中涉及到 updateHostText，因為是 dom text 節(jié)點，所以只需對比新老 text 字符串。

首次渲染
調(diào)用 createTextInstance，其中調(diào)用 createTextNode，里面其實就是在調(diào)用原生的 document.createTextNode(text)，另外想要找到 document 節(jié)點，只需在任意原生 dom 節(jié)點上查詢 ownerDocument 屬性即可。

precacheFiberNode HostComponent 講過了？我怎么沒印象。

6. renderRoot 中的錯誤處理

• 給報錯節(jié)點增加 Incomplete 副作用
• 給父鏈上具有 error boundary 的節(jié)點增加副作用，收集錯誤以及進(jìn)行一定的處理。
• 創(chuàng)建錯誤相關(guān)的更新。

首先，在 renderRoot 中：

do {
    try {
      workLoop(isYieldy);
    } catch (thrownValue) {
      if (nextUnitOfWork === null) {
        // This is a fatal error.
        didFatal = true;
        onUncaughtError(thrownValue);
      } else {
        
        const failedUnitOfWork: Fiber = nextUnitOfWork;
        if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
          replayUnitOfWork(failedUnitOfWork, thrownValue, isYieldy);
        }

        const sourceFiber: Fiber = nextUnitOfWork;
        let returnFiber = sourceFiber.return;
        if (returnFiber === null) {
          // This is the root. The root could capture its own errors. However,
          // we don't know if it errors before or after we pushed the host
          // context. This information is needed to avoid a stack mismatch.
          // Because we're not sure, treat this as a fatal error. We could track
          // which phase it fails in, but doesn't seem worth it. At least
          // for now.
          didFatal = true;
          onUncaughtError(thrownValue);
        } else {
          throwException(
            root,
            returnFiber,
            sourceFiber,
            thrownValue,
            nextRenderExpirationTime,
          );
          nextUnitOfWork = completeUnitOfWork(sourceFiber);
          continue;
        }
      }
    }
    break;
  } while (true);

onUncaughtError:
**
對于致命錯誤，會使用 onUncaughtError 來處理：

function onUncaughtError(error: mixed) {
  invariant(
    nextFlushedRoot !== null,
    'Should be working on a root. This error is likely caused by a bug in ' +
      'React. Please file an issue.',
  );
  // Unschedule this root so we don't work on it again until there's
  // another update.
  nextFlushedRoot.expirationTime = NoWork;
  if (!hasUnhandledError) {
    hasUnhandledError = true;
    unhandledError = error;
  }
}

throwException：
**
否則使用 throwException 對捕獲到的錯誤進(jìn)行處理：

• 先嘗試處理 Suspense 中的異常。
• 否則向上尋找可以錯誤處理的 ClassComponent 組件（比如使用了 getDerivedStateFromError 、 componentDidCatch ）。為該 ClassComponent 所在節(jié)點增加 ShouldCapture 副作用標(biāo)記。 然后創(chuàng)建錯誤 update 并入隊列，以便在 commit 階段被調(diào)用。
• 如果向上沒能找到能處理錯誤的 class component，則最終會在 HostRoot 上進(jìn)行類似操作。

function throwException(
  root: FiberRoot,
  returnFiber: Fiber,
  sourceFiber: Fiber,
  value: mixed,
  renderExpirationTime: ExpirationTime,
) {
  // The source fiber did not complete.
  sourceFiber.effectTag |= Incomplete;
  // Its effect list is no longer valid.
  sourceFiber.firstEffect = sourceFiber.lastEffect = null;

  if (
    value !== null &&
    typeof value === 'object' &&
    typeof value.then === 'function'
  ) {
  // 處理 Suspense 相關(guān)合理的中間狀態(tài)帶來的異常
  }
  
  // We didn't find a boundary that could handle this type of exception. Start
  // over and traverse parent path again, this time treating the exception
  // as an error.
  renderDidError();
  value = createCapturedValue(value, sourceFiber);
  let workInProgress = returnFiber;
  do {
    switch (workInProgress.tag) {
      case HostRoot: {
        const errorInfo = value;
        workInProgress.effectTag |= ShouldCapture;
        workInProgress.expirationTime = renderExpirationTime;
        const update = createRootErrorUpdate(
          workInProgress,
          errorInfo,
          renderExpirationTime,
        );
        enqueueCapturedUpdate(workInProgress, update);
        return;
      }
      case ClassComponent:
        // Capture and retry
        const errorInfo = value;
        const ctor = workInProgress.type;
        const instance = workInProgress.stateNode;
        if (
          (workInProgress.effectTag & DidCapture) === NoEffect &&
          (typeof ctor.getDerivedStateFromError === 'function' ||
            (instance !== null &&
              typeof instance.componentDidCatch === 'function' &&
              !isAlreadyFailedLegacyErrorBoundary(instance)))
        ) {
          workInProgress.effectTag |= ShouldCapture;
          workInProgress.expirationTime = renderExpirationTime;
          // Schedule the error boundary to re-render using updated state
          const update = createClassErrorUpdate(
            workInProgress,
            errorInfo,
            renderExpirationTime,
          );
          enqueueCapturedUpdate(workInProgress, update);
          return;
        }
        break;
      default:
        break;
    }
    workInProgress = workInProgress.return;
  } while (workInProgress !== null);
}

** nextUnitOfWork = completeUnitOfWork(sourceFiber) ：**
**
如果某個節(jié)點產(chǎn)生了錯誤，那么處理完錯誤相關(guān)的之后，會調(diào)用 completeUnitOfwork 做收尾工作，向上遍歷。不會再往下遍歷渲染子節(jié)點，因為已經(jīng)報錯了，向下的局部子樹沒意義了。

7. unwindWork

• 類似于 completeWork 對不同類型組件進(jìn)行處理（其整個過程是跟 completeWork 區(qū)分開的）。
• 對于 ShouldCapture 組件設(shè)置 DidCapture 副作用

unwindWork 和 completeWork 最大的區(qū)別是前者會判斷有 ShouldCapture ，然后取消設(shè)置，并新增 DidCapture ，然后 return。

如果一個節(jié)點報錯了，對于父組件 completeUnitOfWork 時會全部走 unwindWork 而不是 completeWork。
會全部從跟組件重走一遍更新過程，即 workLoop 那一套向下遍歷。

TODO 待深究。