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 方法