点击进入React源码调试仓库。
本篇是具体解读React DOM操作的第一篇文章，文章所讲的内容产生在commit阶段。
Fiber架构使得React须要保护两类树结构，一类是Fiber树，另一类是DOM树。当删除DOM节点时，Fiber树也要同步变动。但请留神删除操作执行的机会：在实现DOM节点的其余变动（增、改）前，要先删除fiber节点，防止其余操作被烦扰。 这是因为进行其余DOM操作时须要循环fiber树，此时如果有须要删除的fiber节点却还没删除的话，就会产生凌乱。
function commitMutationEffects( firstChild: Fiber, root: FiberRoot, renderPriorityLevel,) { let fiber = firstChild; while (fiber !== null) { // 首先进行删除 const deletions = fiber.deletions; if (deletions !== null) { commitMutationEffectsDeletions(deletions, root, renderPriorityLevel); } // 如果删除之后的fiber还有子节点， // 递归调用commitMutationEffects来解决 if (fiber.child !== null) { const primarySubtreeTag = fiber.subtreeTag & MutationSubtreeTag; if (primarySubtreeTag !== NoSubtreeTag) { commitMutationEffects(fiber.child, root, renderPriorityLevel); } } if (__DEV__) {/*...*/} else { // 执行其余DOM操作 try { commitMutationEffectsImpl(fiber, root, renderPriorityLevel); } catch (error) { captureCommitPhaseError(fiber, error); } } fiber = fiber.sibling; }}fiber.deletions是render阶段的diff过程检测到fiber的子节点如果有须要被删除的，就会被加到这里来。
commitDeletion函数是删除节点的入口，它通过调用unmountHostComponents实现删除。搞懂删除操作之前，先看看场景。
有如下的Fiber树，Node（Node是一个代号，并不指的某个具体节点）节点行将被删除。
Fiber树 div#root | <App/> | div | <Parent/> | Delation --> Node | ↖ | ↖ P ——————> <Child> | a通过这种场景能够揣测出当删除该节点时，它下体面树中的所有节点都要被删除。当初间接以这个场景为例，走一下删除过程。这个过程实际上也就是unmountHostComponents函数的运行机制。
删除过程
删除Node节点须要父DOM节点的参加：
parentInstance.removeChild(child)所以首先要定位到父级节点。过程是在Fiber树中，以Node的父节点为终点往上找，找到的第一个原生DOM节点即为父节点。在例子中，父节点就是div。尔后以Node为终点，遍历子树，子树也是fiber树，因而遍历是深度优先遍历，将每个子节点都删除。
须要特地留神的一点是，对循环节点进行删除，每个节点都会被删除操作去解决，这里的每个节点是fiber节点而不是DOM节点。DOM节点的删除机会是从Node开始遍历进行删除的时候，遇到了第一个原生DOM节点（HostComponent或HostText）这个时刻，在删除了它子树的所有fiber节点后，才会被删除。
以上是残缺过程的简述，对于具体过程要明确几个要害函数的职责和调用关系才行。删除fiber节点的是unmountHostComponents函数，被删除的节点称为指标节点，它的职责为：
- 找到指标节点的DOM层面的父节点
- 判断指标节点如果是原生DOM类型的节点，那么执行3、4，否则先卸载本人之后再往下找到原生DOM类型的节点之后再执行3、4
- 遍历子树执行fiber节点的卸载
- 删除指标节点的DOM节点
其中第3步的操作，是通过commitNestedUnmounts实现的，它的职责很繁多也很明确，就是遍历子树卸载节点。
而后具体到每个节点的卸载过程，由commitUnmount实现。它的职责是
- Ref的卸载
- 类组件生命周期的调用
- HostPortal类型的fiber节点递归调用
unmountHostComponents反复删除过程
上面来看一下不同类型的组件它们的具体删除过程是怎么的。
辨别被删除组件的类别
Node节点的类型有多种可能性，咱们以最典型的三种类型（HostComponent、ClassComponent、HostPortal）为例别离阐明一下删除过程。
首先执行unmountHostComponents，会向上找到DOM层面的父节点，而后依据上面的三种组件类型别离解决，咱们挨个来看。
HostComponent
Node 是HostComponent，调用commitNestedUnmounts，以Node为终点，遍历子树，开始对所有子Fiber进行卸载操作，遍历的过程是深度优先遍历。
Delation --> Node(span) | ↖ | ↖ P ——————> <Child> | a对节点一一执行commitUnmount进行卸载，这个遍历过程其实对于三种类型的节点，都是相似的，为了节俭篇幅，这里只表述一次。
Node的fiber被卸载，而后向下，p的fiber被卸载，p没有child，找到它的sibling<Child>，<Child>的fiber被卸载，向下找到a，a的fiber被卸载。此时到了整个子树的叶子节点，开始向上return。由a 到 <Child>，再回到Node，遍历卸载的过程完结。
在子树的所有fiber节点都被卸载之后，才能够平安地将Node的DOM节点从父节点中移除。
ClassComponent
Delation --> Node(ClassComponent) | | span | ↖ | ↖ P ——————> <Child> | aNode是ClassComponent，它没有对应的DOM节点，要先调用commitUnmount卸载它本人，之后会先往下找，找到第一个原生DOM类型的节点span，以它为终点遍历子树，确保每一个fiber节点都被卸载，之后再将span从父节点中删除。
HostPortal
div2(Container Of Node) ↗ div containerInfo | ↗ | ↗ Delation --> Node(HostPortal) | | span | ↖ | ↖ P ——————> <Child> | aNode是HostPortal，它没有对应的DOM节点，因而删除过程和ClassComponent基本一致，不同的是删除它上面第一个子fiber的DOM节点时不是从这个被删除的HostPortal类型节点的DOM层面的父节点中删除，而是从HostPortal的containerInfo中移除，图示上为div2，因为HostPortal会将子节点渲染到父组件以外的DOM节点。
以上是三种类型节点的删除过程，这里值得注意的是，unmountHostComponents函数执行到遍历子树卸载每个节点的时候，一旦遇到HostPortal类型的子节点，会再次调用unmountHostComponents，以它为指标节点再进行它以及它子树的卸载删除操作，相当于一个递归过程。
commitUnmount
HostComponent 和 ClassComponent的删除都调用了commitUnmount，除此之外还有FunctionComponent也会调用它。它的作用对三种组件是不同的：
- FunctionComponent 函数组件中一旦调用了useEffect，那么它卸载的时候要去调用useEffect的销毁函数。（useLayoutEffect的销毁函数是调用commitHookEffectListUnmount执行的）
- ClassComponent 类组件要调用componentWillUnmount
- HostComponent 要卸载ref
function commitUnmount( finishedRoot: FiberRoot, current: Fiber, renderPriorityLevel: ReactPriorityLevel,): void { onCommitUnmount(current); switch (current.tag) { case FunctionComponent: case ForwardRef: case MemoComponent: case SimpleMemoComponent: case Block: { 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, tag} = effect; if (destroy !== undefined) { if ((tag & HookPassive) !== NoHookEffect) { // 向useEffect的销毁函数队列里push effect enqueuePendingPassiveHookEffectUnmount(current, effect); } else { // 尝试应用try...catch调用destroy safelyCallDestroy(current, destroy); ... } } effect = effect.next; } while (effect !== firstEffect); } } return; } case ClassComponent: { safelyDetachRef(current); const instance = current.stateNode; // 调用componentWillUnmount if (typeof instance.componentWillUnmount === 'function') { safelyCallComponentWillUnmount(current, instance); } return; } case HostComponent: { // 卸载ref safelyDetachRef(current); return; } ... }}总结
咱们来复盘一下删除过程中的重点：
- 删除操作执行的机会
- 删除的指标是谁
- 从哪里删除
mutation在基于Fiber节点对DOM做其余操作之前，须要先删除节点，保障留给后续操作的fiber节点都是无效的。删除的指标是Fiber节点及其子树和Fiber节点对应的DOM节点，整个轨迹循着fiber树，对指标节点和所有子节点都进行卸载，对指标节点对应的（或之下的第一个）DOM节点进行删除。对于原生DOM类型的节点，间接从其父DOM节点删除，对于HostPortal节点，它会把子节点渲染到内部的DOM节点，所以会从这个DOM节点中删除。明确以上三个点再联合上述梳理的过程，就能够逐步理清删除操作的脉络。
欢送扫码关注公众号，发现更多技术文章