React源码解析之Commit第二子阶段「mutation」(下)

      case Deletion: {
        //删除节点
        commitDeletion(nextEffect);
        break;
      }

function commitDeletion(current: Fiber): void {
  //因为是 DOM 操作，所以supportsMutation为 true
  if (supportsMutation) {
    // Recursively delete all host nodes from the parent.
    // Detach refs and call componentWillUnmount() on the whole subtree.

    //删除该节点的时候，还会删除子节点
    //如果子节点是 ClassComponent 的话，需要执行生命周期 API——componentWillUnmount()
    unmountHostComponents(current);
  } else {
    // Detach refs and call componentWillUnmount() on the whole subtree.
    //卸载 ref
    commitNestedUnmounts(current);
  }
  //重置 fiber 属性
  detachFiber(current);
}

//重置 fiber 对象，释放内存(注意是属性值置为 null，不会删除属性)
function detachFiber(current: Fiber) {
  // Cut off the return pointers to disconnect it from the tree. Ideally, we
  // should clear the child pointer of the parent alternate to let this
  // get GC:ed but we don't know which for sure which parent is the current
  // one so we'll settle for GC:ing the subtree of this child. This child
  // itself will be GC:ed when the parent updates the next time.

  //重置目标 fiber对象，理想情况下，也应该清除父 fiber的指向(该 fiber)，这样有利于垃圾回收
  //但是 React确定不了父节点，所以会在目标 fiber 下生成一个子 fiber，代表垃圾回收，该子节点
  //会在父节点更新的时候，成为垃圾回收
  current.return = null;
  current.child = null;
  current.memoizedState = null;
  current.updateQueue = null;
  current.dependencies = null;
  const alternate = current.alternate;
  //使用的doubleBuffer技术，Fiber在更新后，不用再重新创建对象，而是复制自身，并且两者相互复用，用来提高性能
  //相当于是当前 fiber 的一个副本，用来节省内存用的，也要清空属性
  if (alternate !== null) {
    alternate.return = null;
    alternate.child = null;
    alternate.memoizedState = null;
    alternate.updateQueue = null;
    alternate.dependencies = null;
  }
}

function unmountHostComponents(current): void {
  // We only have the top Fiber that was deleted but we need to recurse down its
  // children to find all the terminal nodes.
  let node: Fiber = current;

  // Each iteration, currentParent is populated with node's host parent if not
  // currentParentIsValid.
  let currentParentIsValid = false;

  // Note: these two variables *must* always be updated together.
  let currentParent;
  let currentParentIsContainer;
  //从上至下，遍历兄弟节点、子节点
  while (true) {
    if (!currentParentIsValid) {
      //获取父节点
      let parent = node.return;
      //将此 while 循环命名为 findParent
      //此循环的目的是找到是 DOM 类型的父节点
      findParent: while (true) {
        invariant(
          parent !== null,
          'Expected to find a host parent. This error is likely caused by ' +
            'a bug in React. Please file an issue.',
        );
        switch (parent.tag) {
          case HostComponent:
            //获取父节点对应的 DOM 元素
            currentParent = parent.stateNode;
            currentParentIsContainer = false;
            break findParent;
          case HostRoot:
            currentParent = parent.stateNode.containerInfo;
            currentParentIsContainer = true;
            break findParent;
          case HostPortal:
            currentParent = parent.stateNode.containerInfo;
            currentParentIsContainer = true;
            break findParent;
        }
        parent = parent.return;
      }
      //执行到这边，说明找到了符合条件的父节点
      currentParentIsValid = true;
    }
    //如果是 DOM 元素或文本元素的话(主要看这个)
    if (node.tag === HostComponent || node.tag === HostText) {
      //在目标节点被删除前，从该节点开始深度优先遍历，卸载 ref 和执行 componentWillUnmount()/effect.destroy()
      commitNestedUnmounts(node);
      // After all the children have unmounted, it is now safe to remove the
      // node from the tree.
      //我们只看 false 的情况，也就是操作 DOM 标签的情况
      if (currentParentIsContainer) {
        removeChildFromContainer(
          ((currentParent: any): Container),
          (node.stateNode: Instance | TextInstance),
        );
      }

      else {
        //源码：parentInstance.removeChild(child);
        removeChild(
          ((currentParent: any): Instance),
          (node.stateNode: Instance | TextInstance),
        );
      }
      // Don't visit children because we already visited them.
    }
    //suspense 组件不看
    else if (
      enableSuspenseServerRenderer &&
      node.tag === DehydratedSuspenseComponent
    ) {
      //不看这部分
    }
    //portal 不看
    else if (node.tag === HostPortal) {
      //不看这部分
    }
    //上述情况都不符合，可能是一个 Component 组件
    else {
      //卸载 ref 和执行 componentWillUnmount()/effect.destroy()
      commitUnmount(node);
      // Visit children because we may find more host components below.
      if (node.child !== null) {
        node.child.return = node;
        node = node.child;
        continue;
      }
    }
    //子树已经遍历完
    if (node === current) {
      return;
    }
    while (node.sibling === null) {
      //如果遍历回顶点 或 遍历完子树，则直接 return
      if (node.return === null || node.return === current) {
        return;
      }
      //否则向上遍历，向兄弟节点遍历
      node = node.return;
      if (node.tag === HostPortal) {
        // When we go out of the portal, we need to restore the parent.
        // Since we don't keep a stack of them, we will search for it.
        currentParentIsValid = false;
      }
    }
    // 向上遍历，向兄弟节点遍历
    node.sibling.return = node.return;
    node = node.sibling;
  }
}

    if (node.tag === HostComponent || node.tag === HostText) {

  commitNestedUnmounts(node);

 removeChild(
          ((currentParent: any): Instance),
          (node.stateNode: Instance | TextInstance),
        );

export function removeChild(
  parentInstance: Instance,
  child: Instance | TextInstance | SuspenseInstance,
): void {
  parentInstance.removeChild(child);
}

   else {
      //卸载 ref 和执行 componentWillUnmount()/effect.destroy()
      commitUnmount(node);
      // Visit children because we may find more host components below.
      if (node.child !== null) {
        node.child.return = node;
        node = node.child;
        continue;
      }
    }

function commitNestedUnmounts(root: Fiber): void {
  // While we're inside a removed host node we don't want to call
  // removeChild on the inner nodes because they're removed by the top
  // call anyway. We also want to call componentWillUnmount on all
  // composites before this host node is removed from the tree. Therefore
  // we do an inner loop while we're still inside the host node.
  //当在被删除的目标节点的内部时，我们不想在内部调用removeChild，因为子节点会被父节点给统一删除
  //但是 React 要在目标节点被删除的时候，执行componentWillUnmount，这就是commitNestedUnmounts的目的
  let node: Fiber = root;
  while (true) {
    // 卸载 ref 和执行 componentWillUnmount()/effect.destroy()
    commitUnmount(node);
    // Visit children because they may contain more composite or host nodes.
    // Skip portals because commitUnmount() currently visits them recursively.
    if (
      node.child !== null &&
      // If we use mutation we drill down into portals using commitUnmount above.
      // If we don't use mutation we drill down into portals here instead.
      (!supportsMutation || node.tag !== HostPortal)
    ) {
      node.child.return = node;
      node = node.child;
      continue;
    }
    if (node === root) {
      return;
    }
    while (node.sibling === null) {
      if (node.return === null || node.return === root) {
        return;
      }
      node = node.return;
    }
    node.sibling.return = node.return;
    node = node.sibling;
  }
}

function commitUnmount(current: Fiber): void {
  //执行onCommitFiberUnmount()，查了下是个空 function
  onCommitUnmount(current);

  switch (current.tag) {
    //如果是 FunctionComponent 的话
    case FunctionComponent:
    case ForwardRef:
    case MemoComponent:
    case SimpleMemoComponent: {
      //下面代码结构和[React源码解析之Commit第一子阶段「before mutation」](https://mp.weixin.qq.com/s/YtgEVlZz1i5Yp87HrGrgRA)中的「三、commitHookEffectList()」相似
      //大致思路是循环 effect 链，执行每个 effect 上的 destory()
      const updateQueue: FunctionComponentUpdateQueue | null = (current.updateQueue: any);
      if (updateQueue !== null) {
        const lastEffect = updateQueue.lastEffect;
        if (lastEffect !== null) {
          const firstEffect = lastEffect.next;
          let effect = firstEffect;
          do {
            const destroy = effect.destroy;
            if (destroy !== undefined) {
              //安全(try...catch)执行 effect.destroy()
              safelyCallDestroy(current, destroy);
            }
            effect = effect.next;
          } while (effect !== firstEffect);
        }
      }
      break;
    }
    //如果是 ClassComponent 的话
    case ClassComponent: {
      //安全卸载 ref
      safelyDetachRef(current);
      const instance = current.stateNode;
      //执行生命周期 API—— componentWillUnmount()
      if (typeof instance.componentWillUnmount === 'function') {
        safelyCallComponentWillUnmount(current, instance);
      }
      return;
    }
    //如果是 DOM 标签的话
    case HostComponent: {
      //安全卸载 ref
      safelyDetachRef(current);
      return;
    }
    //portal 不看
    case HostPortal: {
      // TODO: this is recursive.
      // We are also not using this parent because
      // the portal will get pushed immediately.
      if (supportsMutation) {
        unmountHostComponents(current);
      } else if (supportsPersistence) {
        emptyPortalContainer(current);
      }
      return;
    }
    //事件组件 的更新，暂未找到相关资料
    case EventComponent: {
      if (enableFlareAPI) {
        const eventComponentInstance = current.stateNode;
        unmountEventComponent(eventComponentInstance);
        current.stateNode = null;
      }
    }
  }
}

//安全(try...catch)执行 effect.destroy()
function safelyCallDestroy(current, destroy) {
  if (__DEV__) {
    //删除了 dev 代码
  } else {
    try {
      destroy();
    } catch (error) {
      captureCommitPhaseError(current, error);
    }
  }
}

function safelyDetachRef(current: Fiber) {
  const ref = current.ref;
  //ref 不为 null，如果是 function，则 ref(null)，否则 ref.current=null
  if (ref !== null) {
    if (typeof ref === 'function') {
      if (__DEV__) {
        //删除了 dev 代码
      } else {
        try {
          ref(null);
        } catch (refError) {
          captureCommitPhaseError(current, refError);
        }
      }
    } else {
      ref.current = null;
    }
  }
}

// Capture errors so they don't interrupt unmounting.
//执行生命周期 API—— componentWillUnmount()
function safelyCallComponentWillUnmount(current, instance) {
  if (__DEV__) {
    //删除了 dev 代码
  } else {
    try {
      //执行生命周期 API—— componentWillUnmount()
      callComponentWillUnmountWithTimer(current, instance);
    } catch (unmountError) {
      captureCommitPhaseError(current, unmountError);
    }
  }
}

//执行生命周期 API—— componentWillUnmount()
const callComponentWillUnmountWithTimer = function(current, instance) {
  startPhaseTimer(current, 'componentWillUnmount');
  instance.props = current.memoizedProps;
  instance.state = current.memoizedState;
  instance.componentWillUnmount();
  stopPhaseTimer();
};

  instance.props = current.memoizedProps;
  instance.state = current.memoizedState;
  instance.componentWillUnmount();