一篇帶你理解 React 的 Commit 階段

作者：前端西瓜哥 2022-12-20 08:22:42

Commit 分成三個階段：BeforeMuation、Muation 以及 Layout 階段。

大家好，我是前端西瓜哥。今天我們來詳細(xì)講解一下 React 的 commit 階段的邏輯。

React 版本為 18.2.0

commit 分三個階段：

BeforeMutation。
Mutation：在這里更新 DOM。
Layout。

commitRootImpl 中的三個函數(shù)的調(diào)用分別對應(yīng)這個三個階段：

function commitRootImpl(){
  // BeforeMutation 階段
  commitBeforeMutationEffects(root, finishedWork);
  // Mutation 階段
  commitMutationEffects(root, finishedWork, lanes);
  // Layout 階段
  commitLayoutEffects(finishedWork, root, lanes);
}

一些標(biāo)記

在 reconcil （調(diào)和）階段，給 fiber 打了很多的 flags（標(biāo)記），commit 階段是會讀取這些 flags 進(jìn)行不同的操作的。

flags 是通過二進(jìn)制掩碼的方式來保存的，掩碼優(yōu)點是節(jié)省內(nèi)存，缺點是可讀性很差。

使用或位運算，可以將多個 flag 組合成一個組。

我這三個階段用到的組合掩碼為：

export const BeforeMutationMask =
  Update |
  Snapshot;

export const MutationMask =
  Placement |
  Update |
  ChildDeletion |
  ContentReset |
  Ref |
  Hydrating |
  Visibility;

export const LayoutMask = Update | Callback | Ref | Visibility;

BeforeMutation 階段

BeforeMutation 階段。

commitRootImpl 首先會調(diào)用 commitBeforeMutationEffects 方法。

commitBeforeMutationEffects 的核心實現(xiàn)：

function commitBeforeMutationEffects(root, firstChild) {
  nextEffect = firstChild;
  commitBeforeMutationEffects_begin();
}

主要是調(diào)用這個 commitBeforeMutationEffects_begin 方法。

begin

begin 干了啥？

進(jìn)行深度優(yōu)先遍歷，找到最后一個帶有 BeforeMutation 標(biāo)識的 fiber。這是因為 useEffect 的調(diào)用邏輯是從子到父，要找最后一個 fiber 作為起點。

commitBeforeMutationEffects_begin 的核心實現(xiàn)：

function commitBeforeMutationEffects_begin() {
  while (nextEffect !== null) {
    const fiber = nextEffect;
    // 取出子 fiber
    const child = fiber.child;
    if (
      (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags &&
      child !== null
    ) {
      // 說明子 fiber 樹中存在 BeforeMutationMask 標(biāo)識的 fiber
      // 那就繼續(xù)遍歷往下找
      child.return = fiber;
      nextEffect = child;
    } else {
      // 找不到了，說明到底了，執(zhí)行 complete 邏輯。
      commitBeforeMutationEffects_complete();
    }
  }
}

subtreeFlags 是當(dāng)前 fiber 的子樹的標(biāo)識匯總，目的是防止無意義的完整深度遍歷，能夠更早地結(jié)束遍歷。如果直接用 flags，是要遍歷到葉子節(jié)點才能知道到底誰是要找的最有一個節(jié)點。

找到后，調(diào)用 complete 。

complete

commitBeforeMutationEffects_complete 實現(xiàn)為：

function commitBeforeMutationEffects_complete() {
  while (nextEffect !== null) {
    const fiber = nextEffect;
    try {
      // BeforeMutation 階段真正做的事情
      commitBeforeMutationEffectsOnFiber(fiber);
    } catch (error) {
      captureCommitPhaseError(fiber, fiber.return, error);
    }

    const sibling = fiber.sibling;
    if (sibling !== null) { // 沒有下一個兄弟節(jié)點
      sibling.return = fiber.return;
      nextEffect = sibling;
      return;
      // 結(jié)束后會回到 begin 中的循環(huán)中
      // 繼續(xù)往下找最后一個 帶有 BeforeMutation 標(biāo)識的 fiber
    }
  
    // 從上往下，處理
    nextEffect = fiber.return;
  }
}

前面很多邏輯都是遍歷的邏輯，真正的核心操作在 commitBeforeMutationEffectsOnFiber 方法。

做了什么？

對標(biāo)記了 Snapshot 的組件進(jìn)行處理，通常是類組件，會調(diào)用類組件實例 instance 的 getSnapshotBeforeUpdate 方法，生成快照對象，然后再放到 instance.__reactInternalSnapshotBeforeUpdate 下，作為之后的 componentDidUpdate 鉤子函數(shù)的第三個參數(shù)。

其他類型的組件基本啥都不做。

function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
  const current = finishedWork.alternate;
  const flags = finishedWork.flags;

  // flags 存在 Snapshot
  if ((flags & Snapshot) !== NoFlags) {
    switch (finishedWork.tag) {
      case FunctionComponent:
      case ForwardRef:
      case SimpleMemoComponent: {
        break;
      }
      // 類組件
      case ClassComponent: {
        if (current !== null) {
          const prevProps = current.memoizedProps;
          const prevState = current.memoizedState;
          const instance = finishedWork.stateNode;
          // 調(diào)用類組件實例的 getSnapshotBeforeUpdate 生成快照對象
          const snapshot = instance.getSnapshotBeforeUpdate(
            finishedWork.elementType === finishedWork.type
              ? prevProps
              : resolveDefaultProps(finishedWork.type, prevProps),
            prevState,
          );
 
          instance.__reactInternalSnapshotBeforeUpdate = snapshot;
        }
        break;
      }
      case HostRoot: {
        if (supportsMutation) {
          const root = finishedWork.stateNode;
          clearContainer(root.containerInfo);
        }
        break;
      }
      case HostComponent:
      case HostText:
      case HostPortal:
      case IncompleteClassComponent:
        // 啥也不做
        break;
      default: {
        throw new Error(
          'This unit of work tag should not have side-effects. This error is ' +
            'likely caused by a bug in React. Please file an issue.',
        );
      }
    }
  }
}

Mutation 階段

mutation 階段是最重要的階段，在這個階段，React 真正地更新了文檔 DOM 樹。

入口函數(shù)是 commitMutationEffects，但它只是 commitMutationEffectsOnFiber 的封裝。

function commitMutationEffects(root, finishedWork, committedLanes) {
  inProgressLanes = committedLanes;
  inProgressRoot = root;
  commitMutationEffectsOnFiber(finishedWork, root, committedLanes);
  inProgressLanes = null;
  inProgressRoot = null;
}

每個 fiber 都要傳入 commitMutationEffectsOnFiber，執(zhí)行 mutation 主邏輯。

從這調(diào)用棧可知 commitMutationEffectsOnFiber 遞歸調(diào)用了多次，形成了很長的調(diào)用棧。

commitMutationEffectsOnFiber 的核心實現(xiàn)為：

function commitMutationEffectsOnFiber(finishedWork, root, lanes) {
  const current = finishedWork.alternate;
  const flags = finishedWork.flags;
  
  switch (finishedWork.tag) {
    case FunctionComponent:
    case ForwardRef:
    case MemoComponent:
    case SimpleMemoComponent: {
      // 做了一些事情
      commitReconciliationEffects(finishedWork);
    }
    // 類組件
    case ClassComponent: {
      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
      commitReconciliationEffects(finishedWork);

      if (flags & Ref) {
        if (current !== null) {
          safelyDetachRef(current, current.return);
        }
      }
      return;
    }
}

對不同類型的 fiber 會進(jìn)行不同的處理，但有一些公共邏輯會執(zhí)行的，那就是：

// Deletion 深度遍歷執(zhí)行刪除操作
recursivelyTraverseMutationEffects(root, finishedWork, lanes);
// Placement 插入邏輯
commitReconciliationEffects(finishedWork);

刪除邏輯

首先是調(diào)用 recursivelyTraverseMutationEffects 方法，這個方法會執(zhí)行刪除邏輯。

該方法會讀取 fiber 的 deletions 數(shù)組，對這些要刪除的 fiber 進(jìn)行操作。

function recursivelyTraverseMutationEffects(root, parentFiber, lanes) {
  // Deletions effects can be scheduled on any fiber type. They need to happen
  // before the children effects hae fired.
  const deletions = parentFiber.deletions;
  if (deletions !== null) {
    for (let i = 0; i < deletions.length; i++) {
      const childToDelete = deletions[i];
      try {
        // 執(zhí)行 fiber 的刪除邏輯
        commitDeletionEffects(root, parentFiber, childToDelete);
      } catch (error) {
        captureCommitPhaseError(childToDelete, parentFiber, error);
      }
    }
  }
  // 【下面的可不看】其實就是對子節(jié)點遍歷，也執(zhí)行 mutation 主邏輯。
  if (parentFiber.subtreeFlags & MutationMask) {
    let child = parentFiber.child;
    while (child !== null) {
      // 又調(diào)用 mutation 邏輯的入口函數(shù)
      commitMutationEffectsOnFiber(child, root, lanes);
      child = child.sibling;
    }
  }
}

對于要刪除的 fiber，我們這里討論原生組件、類組件、函數(shù)組件這 3 種組件類型 fiber 的刪除邏輯。

【1】原生組件

對于原生組件類型（div、span 這些）：

首先將綁定的 ref 置為 null。
先遞歸，對它的子 fiber 調(diào)用刪除邏輯。
然后從 DOM 樹中刪除對應(yīng) DOM。

function commitDeletionEffectsOnFiber(finishedRoot, nearestMountedAncestor, deletedFiber) {
  // deletedFiber 表示那個要被刪除的 fiber

  switch (deletedFiber.tag) {
    /********* 原生組件 *********/
    case HostComponent: {
      if (!offscreenSubtreeWasHidden) {
        // ref 設(shè)置回 null
        safelyDetachRef(deletedFiber, nearestMountedAncestor);
      }
      // 后面的 HostText 會接著執(zhí)行，switch 就是這個邏輯
    }
    case HostText: {
      const prevHostParent = hostParent;
      const prevHostParentIsContainer = hostParentIsContainer;
      hostParent = null;
 
      // 往下遍歷子節(jié)點，執(zhí)行刪除
      recursivelyTraverseDeletionEffects(
        finishedRoot,
        nearestMountedAncestor,
        deletedFiber,
      );
 
      hostParent = prevHostParent;
      hostParentIsContainer = prevHostParentIsContainer;

      // 刪除真正的 DOM，調(diào)用了原生的 removeChild 方法
      if (hostParent !== null) {
        if (hostParentIsContainer) {
          removeChildFromContainer(
            ((hostParent: any): Container),
            (deletedFiber.stateNode: Instance | TextInstance),
          );
        } else {
          removeChild(
            ((hostParent: any): Instance),
            (deletedFiber.stateNode: Instance | TextInstance),
          );
        }
      }
      return;
    }
    // 其他組件類型
}

【2】類組件

對于類組件：

先重置 ref。
然后調(diào)用 componentWillUnmount 方法。
最后遞歸，對它的子 fiber 調(diào)用刪除邏輯。

function commitDeletionEffectsOnFiber(finishedRoot, nearestMountedAncestor, deletedFiber) {
  // deletedFiber 表示那個要被刪除的 fiber

  switch (deletedFiber.tag) {
    // ...
      
    /********* 類組件 *********/
    case ClassComponent: {
      if (!offscreenSubtreeWasHidden) {
        // 移除 ref
        safelyDetachRef(deletedFiber, nearestMountedAncestor);
        const instance = deletedFiber.stateNode;
        if (typeof instance.componentWillUnmount === 'function') {
          // 調(diào)用類組件實例的 componentWillUnmount 方法
          safelyCallComponentWillUnmount(
            deletedFiber,
            nearestMountedAncestor,
            instance,
          );
        }
      }
      // 遍歷子節(jié)點執(zhí)行刪除邏輯
      recursivelyTraverseDeletionEffects(
        finishedRoot,
        nearestMountedAncestor,
        deletedFiber,
      );
      return;
    }
    // ...
  }
}

【3】函數(shù)組件

對于函數(shù)組件：

遍歷它的 updateQueue 隊列，并通過 effect 的 tag 來識別類型來決定是否調(diào)用 destory 方法。對 useInsertionEffect 和 useLayoutEffect，調(diào)用它們的 destory 方法。destroy 就是執(zhí)行 useInsertionEffect / useLayoutEffect 的回調(diào)函數(shù)所返回的函數(shù)。useEffect 則跳過，不調(diào)用 destory 方法。
最后遞歸，對它的子 fiber 調(diào)用刪除邏輯。

function commitDeletionEffectsOnFiber(finishedRoot, nearestMountedAncestor, deletedFiber) {
  // deletedFiber 表示那個要被刪除的 fiber

  switch (deletedFiber.tag) {
    // ...
 
    /********* 函數(shù)組件 *********/
    case FunctionComponent:
    case ForwardRef:
    case MemoComponent:
    case SimpleMemoComponent: {
      if (!offscreenSubtreeWasHidden) {
        const updateQueue = deletedFiber.updateQueue;
        if (updateQueue !== null) {
          // 讀取 updateQueue 隊列，隊列用鏈表的方式保存
          const lastEffect = updateQueue.lastEffect;
          if (lastEffect !== null) {
            const firstEffect = lastEffect.next;

            let effect = firstEffect;
            do {
              const {destroy, tag} = effect;
              if (destroy !== undefined) {
                // 處理 useInsertionEffect 產(chǎn)生的副作用
                // 執(zhí)行 useInsertionEffect 回調(diào)函數(shù)返回的函數(shù)，即 destroy
                if ((tag & HookInsertion) !== NoHookEffect) {
                  // safelyCallDestroy 只是加了 try-catch 去調(diào)用 destroy
                  safelyCallDestroy(
                    deletedFiber,
                    nearestMountedAncestor,
                    destroy,
                  );

                // useLayoutEffect 同理
                } else if ((tag & HookLayout) !== NoHookEffect) {
                  safelyCallDestroy(
                    deletedFiber,
                    nearestMountedAncestor,
                    destroy,
                  );
                }
              }
              // 找下一個 effect
              effect = effect.next;
            } while (effect !== firstEffect);
          }
        }
      }

      // 向下遞歸
      recursivelyTraverseDeletionEffects(
        finishedRoot,
        nearestMountedAncestor,
        deletedFiber,
      );
      return;
    }

    default: {
      recursivelyTraverseDeletionEffects(
        finishedRoot,
        nearestMountedAncestor,
        deletedFiber,
      );
      return;
    }
  }
}

插入邏輯

完成刪除邏輯后，接著就是調(diào)用 commitReconciliationEffects，這個方法負(fù)責(zé)往真實 DOM 樹中插入 DOM 節(jié)點。

commitReconciliationEffects 核心內(nèi)容：

function commitReconciliationEffects(finishedWork) {
  const flags = finishedWork.flags;

  if (flags & Placement) {
    try {
      // 執(zhí)行 Placement 插入邏輯
      commitPlacement(finishedWork);
    } catch (error) {
      captureCommitPhaseError(finishedWork, finishedWork.return, error);
    }
    // 移除 Placement 標(biāo)志
    finishedWork.flags &= ~Placement;
  }

  if (flags & Hydrating) {
    finishedWork.flags &= ~Hydrating;
  }
}

如果 finishedWork 有 Placement 標(biāo)識，則調(diào)用 commitPlacement 方法。

commitPlacement 的邏輯為：

如果 finishedWork 還有 ContentReset 標(biāo)識，先清空標(biāo)簽體，通過parent.textContent = '' 的方式。
接著是執(zhí)行插入邏輯。會嘗試找下一個兄弟節(jié)點，存在會原生的 insertBefore 方法插入，不存在則使用 appendChild 方法。

commitPlacement 實現(xiàn)如下。

function commitPlacement(finishedWork) {
  // 獲取父 fiber
  const parentFiber = getHostParentFiber(finishedWork);

  switch (parentFiber.tag) {
    case HostComponent: {
      const parent = parentFiber.stateNode;
      // 父 fiber 是否有 ContentReset（內(nèi)容重置）標(biāo)記
      if (parentFiber.flags & ContentReset) {
        // 其實就是 parent.textContent = '';
        resetTextContent(parent); // 
        // 移除 ContentReset 標(biāo)志
        parentFiber.flags &= ~ContentReset;
      }

      // 找它的下一個兄弟 DOM 節(jié)點，后面用 insertBefore 方法
      // 如果沒有，就調(diào)用原生的 appendChild 方法
      const before = getHostSibling(finishedWork);
      insertOrAppendPlacementNode(finishedWork, before, parent);
      break;
    }
    case HostRoot:
    case HostPortal: {
      const parent: Container = parentFiber.stateNode.containerInfo;
      const before = getHostSibling(finishedWork);
      insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);
      break;
    }
    // eslint-disable-next-line-no-fallthrough
    default:
      throw new Error(
        'Invalid host parent fiber. This error is likely caused by a bug ' +
          'in React. Please file an issue.',
      );
  }
}

Placement 只會在原生組件和 fiber 根節(jié)點上標(biāo)記，沒有函數(shù)組件和類組件什么事。

更新邏輯

對于可復(fù)用的原生組件，會調(diào)用 commitUpdate 進(jìn)行更新。

commitUpdate 的代碼：

function commitUpdate(domElement, updatePayload, type, oldProps, newProps) {
  // 對比更新，需要處理 onXx、className 這些特殊的 props
  updateProperties(domElement, updatePayload, type, oldProps, newProps);

  // 更新 DOM 元素的 "__reactProps$ + randomKey" 為這個新的 props
  updateFiberProps(domElement, newProps);
}

?類組件不會進(jìn)行更新操作。

對于函數(shù)組件，會依次調(diào)用：

useInsertionEffect 的回調(diào)函數(shù)函數(shù)返回的銷毀函數(shù)（保存在 effect.destroy 中）。
useInsertionEffect 的回調(diào)函數(shù)（保存在 effect.create 中），調(diào)用完后將返回結(jié)果賦值個 effect.destroy，下一次更新再調(diào)用。
useLayoutEffect 的回調(diào)函數(shù)函數(shù)返回的銷毀函數(shù)。

需要注意，函數(shù)組件初次掛載，flags 也會標(biāo)記為 Update，走更新邏輯。這也是為什么 useEffect 在函數(shù)組件掛載時也會執(zhí)行，和類組件的 componentDidUpate 不同。

// 找出 useInsertionEffect 的 destroy 方法去調(diào)用
// 需要注意 destroy 可能為 undefined（函數(shù)組件初次掛載的情況下）
commitHookEffectListUnmount(HookInsertion | HookHasEffect, finishedWork, finishedWork.return);

// 執(zhí)行 useInsertionEffect 的回調(diào)函數(shù)，并將返回值保存到 effect.destory 里。
commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);

// useLayoutEffect 對應(yīng)的 destroy 方法
// 同樣可能不存在
commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork, finishedWork.return);

Layout

最后是 Layout 階段。

commitLayoutEffects 的實現(xiàn)：

function commitLayoutEffects(finishedWork, root, committedLanes) {
  inProgressLanes = committedLanes;
  inProgressRoot = root;
  nextEffect = finishedWork;

  // 又是 begin，和 BeforeMutation 階段類似的遞歸邏輯
  commitLayoutEffects_begin(finishedWork, root, committedLanes);

  inProgressLanes = null;
  inProgressRoot = null;
}

和 BeforeMutation 階段一樣，先深度優(yōu)先遞歸，找最后一個有 LayoutMask 標(biāo)記的 fiber。

然后從下往上調(diào)用 complete 邏輯，確保邏輯是從底部到頂部，即先子后父。

function commitLayoutEffects_begin(subtreeRoot, root, committedLanes) {
  // Suspense layout effects semantics don't change for legacy roots.
  const isModernRoot = (subtreeRoot.mode & ConcurrentMode) !== NoMode;

  while (nextEffect !== null) {
    const fiber = nextEffect;
    const firstChild = fiber.child;

    if (fiber.tag === OffscreenComponent) {
      // 離屏組件的邏輯，不講
      continue;
    }

    // 找最后一個有 LayoutMask 標(biāo)記的 fiber
    if ((fiber.subtreeFlags & LayoutMask) !== NoFlags && firstChild !== null) {
      firstChild.return = fiber;
      nextEffect = firstChild;
    } else {
      // 到底了，就執(zhí)行 complete
      commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
    }
  }
}

complete 代碼：

function commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes) {
  while (nextEffect !== null) {
    const fiber = nextEffect;
    if ((fiber.flags & LayoutMask) !== NoFlags) {
      const current = fiber.alternate;

      try {
        // 調(diào)用 commitLayoutEffectOnFiber
        commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
      } catch (error) {
        captureCommitPhaseError(fiber, fiber.return, error);
      }

    }

    if (fiber === subtreeRoot) {
      nextEffect = null;
      return;
    }

    const sibling = fiber.sibling;
    if (sibling !== null) {
      sibling.return = fiber.return;
      nextEffect = sibling;
      return;
    }

    nextEffect = fiber.return;
  }
}

核心工作在這個 commitLayoutEffectOnFiber 方法。它會根據(jù)組件類型不同執(zhí)行不同邏輯。

對于函數(shù)組件，會調(diào)用 useLayoutEffect 的回調(diào)函數(shù)（effect.create）。

對于類組件：

如果是掛載（通過 fiber.alternate 是否為 null 判斷），調(diào)用 instance.componentDidMount 方法。如果是更新，提取 preProps 等參數(shù) 傳入到 componentDidUpdate 里調(diào)用；
取出 updateQueue 里的 effect，依次調(diào)用 effect.callback 函數(shù)。這個 callback 其實就是 setState 方法的第二個參數(shù)。

處理完后，接下來就會更新 ref ：

if (finishedWork.flags & Ref) {
  commitAttachRef(finishedWork);
}

操作很簡單，對于原生組件，就是給 fiber.ref.current 賦值為 fiber.stateNode。

useEffect

現(xiàn)在還差 useEffect 沒調(diào)用了。

useEffect 不在同步的 commit 階段中執(zhí)行。它是異步的，被 scheduler 異步調(diào)度執(zhí)行。

function commitRootImpl(){
  // 異步調(diào)度
  scheduleCallback(NormalSchedulerPriority, () => {
    // 執(zhí)行 useEffect
    flushPassiveEffects();
    return null;
  });

  // BeforeMutation 階段
  commitBeforeMutationEffects(root, finishedWork);
  // Mutation 階段
  commitMutationEffects(root, finishedWork, lanes);
  // Layout 階段
  commitLayoutEffects(finishedWork, root, lanes);
}

先執(zhí)行所有 useEffect 的 destroy 方法，然后才執(zhí)行所有 useEffect 的 create 方法。并保持順序是先子后父。

function flushPassiveEffectsImpl() {
  // ...
  // useEffect 的 destroy
  commitPassiveUnmountEffects(root.current);
  // useEffect 的 create
  commitPassiveMountEffects(root, root.current, lanes, transitions);
  // ...
}

流程圖

畫個流程圖：

create 表示傳給 useEffect 的回調(diào)函數(shù)，destroy 為調(diào)用該回調(diào)函數(shù)返回的銷毀函數(shù)。

結(jié)尾

總結(jié)一下。

commit 分成三個階段：BeforeMuation、Muation 以及 Layout 階段。

BeforeMuation，沒做太多事，主要是類組件實例調(diào)用 getSnapshotBeforeUpdate 生成快照對象保存起來；
Muation，更新 DOM 的階段，做了刪除、插入、更新操作。（1）刪除邏輯：重置 ref 為 null，根據(jù) fiber.deletions 刪除 DOM 節(jié)點，調(diào)用類組件的 componentWillUnmount，調(diào)用 useInsertionEffect 和 useLayoutEffect 的 destory 方法（2）插入邏輯：將標(biāo)記了Place 的節(jié)點進(jìn)行真實 DOM 的插入（3）對比 props 更新 DOM 節(jié)點，調(diào)用 useInsertionEffect 的 destroy 、useInsertionEffect 的 create 和 useLayoutEffect 的 destroy；
Layout，調(diào)用類組件的 componentDidMount、componentDidUpdate、setState 的回調(diào)函數(shù)；調(diào)用函數(shù)組件 useLayoutEffect 的 create；最后更新 ref。

最后是 commit 階段外的 useEffect，它被 Scheduler 異步調(diào)度執(zhí)行，先執(zhí)行完整棵樹的 destroy，再執(zhí)行完整棵樹的 create。

責(zé)任編輯：姜華來源：前端西瓜哥

Commit Muation