Obsidian_Note/React 的源码深入/React 的流程解析 - commit 阶段/React 的深入探索 - commitMutationEffects.md

commitMutationEffects 对应 commit 中的 mutation 阶段，这个方法内部是一个 while 循环，遍历 effectList 链表，遍历到的每一个 Fiber 节点首先会判断是否存在 ConentReset 标记，这个标记表示 Fiber 是否需要重置文本节点

### commitResetTextContent

然后会判断是否存在 Ref 标记

### commitDetachRef

然后进入 mutation 阶段最重要的逻辑：判断 Fiber 阶段是否存在以下 effectTag
1. Placement  插入DOM
2. Update       更新属性
3. Deletion     删除 DOM 节点
4. Hydrating   SSR 相关

然后根据 effectTag 不同进入不同的处理逻辑

## Placement

commitPlacement
如果当前环境不支持 mutation 会直接返回，ReactDOM 下是支持的
首先会根据当前的 Fiber 节点，找到其最近的 Host 类型的父 Fiber 节点，Host 类型包括 HostComponent、HostRoot、HostPortal 和 FundamentalComponent，这几种类型有一个共同点：它们都有对应的 DOM 节点
找到之后先进行各自的前置处理逻辑

### getHostParetFiber

一直递归向上查找，直到找到 HostComponent 为止

如果父 Fiber 节点上存在 ConentReset 标记，就要先执行 resetTextConent 函数，然后会找到当前 Fiber 节点的 Host 类型的兄弟节点

### getHostSibling
该方法内部有着一个嵌套循环

为什么要找到最近的兄弟节点 HostComponent？
- 因为 DOM 的插入有两种方法，第一种是 insertBefore 方法，第二种是 appendChild
- 使用 insertBefore 时需要找到兄弟节点
- 使用 appendChild 时需要找到父节点

### insertInContainerBefor

内部实际上还是使用了 insertBefore 方法

### appendChildToContainer
内部实际上还是使用了 appendChild 方法