一文读懂 React 组件渲染核心原理

lastPlacedIndex 初始值为 0，

首先处理第一个节点 c，给节点 c 的 index 赋值为最新值 0，c.index = 0。

可以看到 c 的 oldIndex 为 2，此时 oldIndex > lastPlacedIndex，无需对 c 做移动，将 lastPlacedIndex 赋值为 2。

此时 lastPlacedIndex = 2。

然后处理节点 a，a.index = 1。

a 的 oldIndex 为 0，此时 oldIndex < lastPlacedIndex，因此需要对 a 打上 Placement 标记，lastPlacedIndex 维持不变。

此时 lastPlacedIndex 仍然等于 2。

然后处理节点 b，b.index = 2。

b 的 oldIndex 为 1，此时 oldIndex < lastPlacedIndex，需要对 b 打上 Placement 标记，将 lastPlacedIndex 维持不变。

此时 lastPlacedIndex 仍然等于 2。

然后处理节点 d，b.index = 3。

d 的 oldIndex 为 3，此时 oldIndex > lastPlacedIndex，无需对 d 做移动，将 lastPlacedIndex 赋值为 3。

此时 lastPlacedIndex = 3。

然后处理节点 e，e.index = 4。

由于 e 是新建节点，所以 e 的 oldIndex 为 0，此时 oldIndex < lastPlacedIndex，因此需要对 e 打上 Placement 标记，lastPlacedIndex 维持不变。

因此最终需要变动位置的节点是 a b e。

这里可以看到其实最高效的改动是移动 c 和 e，但是 React 的 diff 逻辑选择了固定住 c，移动 a b，因此我们平时写代码的时候尽量避免把节点从后面提到前面的操作。

为 newChildren 里的所有 element 都生成了 Fiber 并连接好之后，返回第一个 child ，至此生成子节点的步骤就完成了。

completeUnitOfWork

在核心流程里我们说到，当 beginWork 处理到叶子节点，返回 null 的时候就会调用 「completeUnitOfWork」 函数。

「completeUnitOfWork」 主要做的事情有两件：

处理当前节点

• “归”操作
• 处理当前节点

「completeUnitOfWork」 里主要调用了 「completeWork」 来处理当前节点，而在 completeWork 中则是使用了 switch...case... 来处理不同类型的节点，这里我们主要以最常见的 HostComponent 为例。分成首次渲染和非首次渲染两种情况讨论。

mount

当是首次渲染时，这里要做的事情主要是：

• 创建真实 DOM。
• 如果有子节点的话将子节点的真实 DOM 插入到刚刚创建的 DOM 中。
• 处理真实 DOM 的 props 等。

const currentHostContext = getHostContext(); 
// 为fiber创建对应DOM节点 
const instance = createInstance( 
    type, 
    newProps, 
    rootContainerInstance, 
    currentHostContext, 
    workInProgress, 
  ); 
// 将子孙DOM节点插入刚生成的DOM节点中 
appendAllChildren(instance, workInProgress, false, false); 
// DOM节点赋值给fiber.stateNode 
workInProgress.stateNode = instance; 
 
// 处理props 
if ( 
  finalizeInitialChildren( 
    instance, 
    type, 
    newProps, 
    rootContainerInstance, 
    currentHostContext, 
  ) 
) { 
  markUpdate(workInProgress); 
} 

update

当 update 时，Fiber 节点已经存在对应 DOM 节点，所以不需要生成 DOM 节点。需要做的主要是处理DOM 节点的 props，这里主要就是一些真实 DOM 的 onClick、onChange等回调函数的注册，style 等，这些处理完之后的 props 也会记录到 workInProgress.updateQueue 中，并在 commit 阶段更新到 DOM 节点上。

if (current !== null && workInProgress.stateNode != null) { 
  // update的情况 
  updateHostComponent( 
    current, 
    workInProgress, 
    type, 
    newProps, 
    rootContainerInstance, 
  ); 
} 

“归”

刚刚说到，当 「beginWork」 返回值为 null 的时候会进入 「completeUnitOfWork」 中，可是我们知道 beginWork 是深度优先的更新，也就意味着进入 「completeUnitOfWork」 之后必然还需要回到 beginWork 中继续处理其他的节点。

... 
const siblingFiber = completedWork.sibling; 
if (siblingFiber !== null) { 
  // If there is more work to do in this returnFiber, do that next. 
  workInProgress = siblingFiber; 
  return; 
} 
// Otherwise, return to the parent 
completedWork = returnFiber; 
// Update the next thing we're working on in case something throws. 
workInProgress = completedWork; 

可以看到，当处理完当前节点之后，React 会判断当前节点是否具有兄弟节点，如果有的话则将兄弟节点设置为当前的 workInProgress 回到主流程继续 「beginWork。」

而如果没有兄弟节点的话，就意味着同父节点下的所有子节点都已经处理完毕，则接下来就会处理他们的父节点。

大致流程就是：「beginWork」 执行到当前节点没有 child 的时候，进入 「completeUnitOfWork」 处理当前节点，处理完后如果当前节点有兄弟节点则回到 「beginWork」 继续处理兄弟节点，如果没有兄弟节点则继续在 「completeUnitOfWork」 处理当前节点的父节点，直到“归”到根结点上。

三、挂载过程(commitRoot)

effect list

render阶段的一个主要工作是收集需要执行的 DOM 操作，然后交给 commit阶段 来处理，而这些 DOM 操作的具体类型都会保存在 Fiber 节点的 effectTag 属性上。

部分 DOM 操作的类型：

// 插入 DOM 
export const Placement = /*                */ 0b00000000000010; 
// 更新 DOM 
export const Update = /*                   */ 0b00000000000100; 
// 插入并更新 DOM 
export const PlacementAndUpdate = /*       */ 0b00000000000110; 
// 删除 DOM 节点 
export const Deletion = /*                 */ 0b00000000001000; 

使用二进制来表示可以方便地用位运算给 effectTag 带上多个副作用(effect)，也可以方便地判断是否存在某个副作用。例如有个 fiber 节点 effectTag 是 PlacementAndUpdate (0b00000000000110)，可以通过按位与运算来判断是否存在Placement：

const effectTag = PlacementAndUpdate; 
console.log(effectTag & Placement !== 0); // => true 

在 commit阶段 可以像 render阶段 那样遍历所有 fiber 节点找出其中的 effectTag，但这样效率比较低，所以在 render阶段 的 completeUnitOfWork 中会把具有 effectTag 的 fiber 节点连接起来，形成 effectList 链表。例如我们有这样的代码：

function App() { 
  const [count, setCount] = useState(0); 
  return ( 
    <div onClick={() => setCount(count + 1)}> 
      <p>{count}</p> 
      <span>{count}</span> 
    </div> 
  ); 
}; 

我们在 performSyncWorkOnRoot 方法的末尾的 finishedWork 打个断点，然后点击 div 触发一次 setCount 更新：

当 react 执行到断点这个地方时，我们在控制台打印一下 finishedWork：

所以此时对应的 effectList是：

这里 span 和 p 节点有 effectTag 是因为 {count}，div 节点有 effectTag 是因为重新生成的 onClick 函数。

commit 阶段

render阶段结束后，会在performSyncWorkOnRoot()或finishConcurrentRender()中把 fiberRootNode 传给 commitRoot 方法，开启 commit阶段。

以performSyncWorkOnRoot为例：

function performSyncWorkOnRoot(root) { 
    // render阶段的入口函数 
    renderRootSync(root, lanes); 
    // ... 
    // commitRoot函数调用 
    const finishedWork = root.current.alternate; 
    root.finishedWork = finishedWork; 
    root.finishedLanes = lanes; 
    commitRoot(root); 
    // ...省略代码 
} 

commit阶段的一个主要工作就是遍历 effectList 并执行对应的 DOM 操作。commit阶段又分为三个子阶段：

• before mutation阶段
• mutation阶段
• layout阶段

下面来看看 commit阶段 具体发生了什么。

进入 commitRootImpl 方法时，会先判断 rootWithPendingPassiveEffects 是否为 null，如果不为 null 就会执行 flushPassiveEffects。

function commitRootImpl(root, renderPriorityLevel) { 
  do { 
    flushPassiveEffects(); 
  } while (rootWithPendingPassiveEffects !== null); 
 
  // ... 
} 

rootWithPendingPassiveEffects 中的PassiveEffect 是什么意思呢?我们知道如果一个 fiber 节点的 dom 节点需要被插入到页面中，那 fiber.effectTag 就会带上 Placement effect，类似的，如果一个 FunctionComponent 有 useEffect 需要被执行，那它就会带上 Passive effect。

所以这里的意思是进入 commitRoot 时先判断当前是否还有未执行的 useEffect，如果有，就执行它，也就是说在开启新一轮的 commit 阶段时会先等待上一轮的 useEffect 执行完。这其实在官方文档里也有一些说明：

接着会重置 render阶段使用到的一些全局变量：

function commitRootImpl(root, renderPriorityLevel) { 
  do { 
    flushPassiveEffects(); 
  } while (rootWithPendingPassiveEffects !== null); 
 
  // ... 
 
  if (root === workInProgressRoot) { 
    workInProgressRoot = null; 
    workInProgress = null; 
    workInProgressRootRenderLanes = NoLanes; 
  } 
   
  // ... 
} 

处理 effect list：

function commitRootImpl(root, renderPriorityLevel) { 
  // ... 
 
  let firstEffect; 
  if (finishedWork.effectTag > PerformedWork) { 
    if (finishedWork.lastEffect !== null) { 
      finishedWork.lastEffect.nextEffect = finishedWork; 
      firstEffect = finishedWork.firstEffect; 
    } else { 
      firstEffect = finishedWork; 
    } 
  } else { 
    firstEffect = finishedWork.firstEffect; 
  } 
   
  // ... 
} 

上面说过 render阶段已经把带有 effectTag 的 fiber 节点连接形成一条链表了，这里再次处理 effect list 是因为这条链表目前只有子节点，并没有挂载根节点。如果根节点也存在 effectTag，那么就需要把根节点拼接到链表的末尾，形成一条完整的 effect list：

同时上面的代码也会取出 firstEffect，也就是第一个需要被处理的 fiber 节点。接着判断如果存在 firstEffect，会将 firstEffect 赋值给 nextEffect，开始三个子阶段的工作。

function commitRootImpl(root, renderPriorityLevel) { 
  // ... 
 
  if (firstEffect !== null) { 
    nextEffect = firstEffect; 
     
    // beforeMutation 阶段： 
    // 执行 commitBeforeMutationEffects 
     
    // mutation 阶段： 
    // 执行 commitMutationEffects 
     
    // layout 阶段： 
    // 执行 commitLayoutEffects 
  } 
   
  // ... 
} 

执行 getSnapshotBeforeUpdate

在commitBeforeMutationEffects这个方法中会遍历带有 effectTag 的 fiber 节点，如果判断有 Snapshot effectTag 就会调用 ClassComponent 的 getSnapshotBeforeUpdate 生命周期方法：

function commitBeforeMutationEffects() { 
  while (nextEffect !== null) { 
    // ... 
     
    const effectTag = nextEffect.effectTag; 
    if ((effectTag & Snapshot) !== NoEffect) { 
      // ... 
      commitBeforeMutationEffectOnFiber(current, nextEffect); 
    } 
 
    // ... 
    nextEffect = nextEffect.nextEffect; 
  } 
} 

调度 useEffect

再看下 commitBeforeMutationEffects 的剩余部分：

function commitBeforeMutationEffects() { 
  while (nextEffect !== null) { 
    // ... 
     
    if ((effectTag & Passive) !== NoEffect) { 
      if (!rootDoesHavePassiveEffects) { 
        rootDoesHavePassiveEffects = true; 
        scheduleCallback(NormalSchedulerPriority, () => { 
          flushPassiveEffects(); 
          return null; 
        }); 
      } 
    } 
    nextEffect = nextEffect.nextEffect; 
  } 
} 

上面提到 flushPassiveEffects 用于执行 useEffect 的回调函数，而这里并不会立即执行它，而是把它放在 scheduleCallback 的回调当中，scheduleCallback 方法会以一个优先级异步执行它的回调函数。

所以这段代码的意思是，如果存在 Passive effect，则把 rootDoesHavePassiveEffects 置为 true，并且调度 flushPassiveEffects，而整个 commit阶段 是「同步执行」的，所以 useEffect 的回调函数其实会在 commit阶段「完成后」再异步执行。

这也跟官方文档说的对应上了：

总结

在 beforeMutation阶段 会：

• 执行getSnapshotBeforeUpdate生命周期方法
• 「调度」useEffect

mutation阶段

mutation阶段会执行 commitMutationEffects 方法：

function commitMutationEffects(root: FiberRoot, renderPriorityLevel) { 
  while (nextEffect !== null) { 
    const effectTag = nextEffect.effectTag; 
     
    // 如果有 ContentReset，会重置文本节点 
    if (effectTag & ContentReset) { 
      commitResetTextContent(nextEffect); 
    } 
     
    // 如果有 Ref，会执行 ref 相关的更新 
    if (effectTag & Ref) { 
      // ... 
    } 
 
    const primaryEffectTag = 
      effectTag & (Placement | Update | Deletion | Hydrating); 
    switch (primaryEffectTag) { 
      // 如果需要插入节点，会执行 commitPlacement 
      case Placement: { 
        commitPlacement(nextEffect); 
        nextEffect.effectTag &= ~Placement; 
        break; 
      } 
      // 如果需要更新节点，会执行 commitWork 
      case Update: { 
        const current = nextEffect.alternate; 
        commitWork(current, nextEffect); 
        break; 
      } 
      // 如果需要删除节点，会执行 commitDeletion 
      case Deletion: { 
        commitDeletion(root, nextEffect, renderPriorityLevel); 
        break; 
      } 
      // ... 
    } 
     
    // 取出下一个 fiber 节点，进入下一次循环 
    nextEffect = nextEffect.nextEffect; 
  } 
} 

在这个方法中会遍历带有 effectTag 的 fiber 节点，

• 如果有 ContentReset，会重置文本节点
• 如果有 Ref，会执行 ref 相关的操作
• 增删改
  • 如果需要插入节点，会执行 commitPlacement
  • 如果需要更新节点，会执行 commitWork
  • 如果需要删除节点，会执行 commitDeletion
  • ...

commitPlacement

在 commitPlacement 方法中，会先找到距离最近的 host 类型父节点和距离最近的 host 类型兄弟节点，然后根据 host 父 fiber 节点的类型取出对应的 DOM 节点，接着根据是否 container 来执行 insertOrAppendPlacementNodeIntoContainer 或 insertOrAppendPlacementNode。

function commitPlacement(finishedWork: Fiber): void { 
  // 找到 host 父 fiber 节点 
  const parentFiber = getHostParentFiber(finishedWork); 
 
  let parent; 
  let isContainer; 
  const parentStateNode = parentFiber.stateNode; 
   
  // 根据 host 父 fiber 节点的类型，取出对应的 DOM 节点 
  switch (parentFiber.tag) { 
    case HostComponent: 
      parent = parentStateNode; 
      isContainer = false; 
      break; 
    case HostRoot: 
      parent = parentStateNode.containerInfo; 
      isContainer = true; 
      break; 
    case HostPortal: 
      parent = parentStateNode.containerInfo; 
      isContainer = true; 
      break; 
    // ... 
  } 
  // ... 
  // 获取 host 兄弟节点 
  const before = getHostSibling(finishedWork); 
   
  // 根据是否 container 来决定执行哪个方法 
  if (isContainer) { 
    insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent); 
  } else { 
    insertOrAppendPlacementNode(finishedWork, before, parent); 
  } 
} 

为什么需要先找到 host 父 fiber 节点和 host 兄弟 fiber 节点?

我们知道在DOM中插入一个节点有两种方式：

• parentNode.appendChild(newNode)
• parentNode.insertBefore(newNode, referenceNode)

无论哪种方式都需要找到它的父 DOM 节点，而如果需要 insertBefore 则还需要找到它的兄弟 DOM 节点。

另外，为什么需要找 host 类型的父节点和兄弟节点呢?这是因为最近的父 「fiber」 节点不一定就是最近的父 「DOM」 节点，同理，最近的兄弟 「fiber」 节点不一样是最近的兄弟 「DOM」 节点。例如，我们的代码长这样：

function Item() { 
  return <p></p> 
} 
 
function App() { 
  return ( 
    <div> 
      <Item /> 
      <span></span> 
    </div> 
  ); 
} 

它对应的 fiber 树和 dom 树分别是：

可以看到， fiber 树和 don 树并不是一一对应的：

• p 的 fiber 节点的父节点是 Item，而 p 的 dom 节点的父节点是 div
• p 的 fiber 节点没有兄弟节点，而 p 的 dom 节点有个兄弟节点是 span

上面的insertOrAppendPlacementNodeIntoContainer 和 insertOrAppendPlacementNode做的事情差不多，都会判断是否有 before，如果有，则执行 insertBefore，没有则执行 appendChild：

function insertOrAppendPlacementNode( 
  node: Fiber, 
  before: ?Instance, 
  parent: Instance, 
): void { 
  // ... 
  if (before) { 
    insertBefore(parent, stateNode, before); 
  } else { 
    appendChild(parent, stateNode); 
  } 
  // ... 
} 

appendChild 和 insertBefore 都来自于 ReactFiberHostConfig。

这里的 ReactFiberHostConfig 在源码里其实只是一个空壳，最终需要被特定环境的 renderer 来填充，例如在我们平常使用 ReactDOM 时，ReactFiberHostConfig 会被 ReactDOM 的 ReactDOMHostConfig 来填充：

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

可以看到，其实最终就是执行 dom 节点的 appendChild 或 insertBefore 方法。

React 仓库其他 renderer 的 hostConfig：

BTW，umijs/hox(https://github.com/umijs/hox) 是一个基于 hooks 的全局状态管理工具，它跟其他基于 hooks 的状态管理工具很大的一个不同点是， hox 不需要我们手动挂载 就能直接使用 model：

// counterModel.js 
import { useState } from "react"; 
import { createModel } from "hox"; 
function useCounter() { 
  const [count, setCount] = useState(0); 
  const decrement = () => setCount(count - 1); 
  const increment = () => setCount(count + 1); 
  return { 
    count, 
    decrement, 
    increment 
  }; 
} 
export default createModel(useCounter); 
 
// index.jsx 
import useCounterModel from "./counterModel"; 
function App(props) { 
  const counter = useCounterModel(); 
  return ( 
    <div> 
      <p>{counter.count}</p> 
      <button onClick={counter.increment}>Increment</button> 
    </div> 
  ); 
} 

其实它是在调用 createModel 时把 hooks 的执行挂在了它自定义的一个 renderer 里，对应的 hostConfig 都是空函数，因为它并不需要执行真正的渲染，只是用来执行 hooks 而已：

import ReactReconciler from "react-reconciler"; 
import { ReactElement } from "react"; 
 
const hostConfig = { 
  now: Date.now, 
  getRootHostContext: () => ({}), 
  prepareForCommit: () => {}, 
  resetAfterCommit: () => {}, 
  getChildHostContext: () => ({}), 
  shouldSetTextContent: () => true, 
  createInstance: () => {}, 
  createTextInstance: () => {}, 
  appendInitialChild: () => {}, 
  appendChild: () => {}, 
  finalizeInitialChildren: () => {}, 
  supportsMutation: true, 
  appendChildToContainer: () => {}, 
  prepareUpdate: () => true, 
  commitUpdate: () => {}, 
  commitTextUpdate: () => {}, 
  removeChild: () => {} 
}; 
 
const reconciler = ReactReconciler(hostConfig as any); 
 
export function render(reactElement: ReactElement) { 
  const container = reconciler.createContainer(null, false, false); 
  return reconciler.updateContainer(reactElement, container, null, null); 
} 

commitWork

commitWork 用于更新节点。在这个方法中会根据 fiber 节点的类型进行不同的操作：

function commitWork(current: Fiber | null, finishedWork: Fiber): void { 
  switch (finishedWork.tag) { 
    case FunctionComponent: 
    case ForwardRef: 
    case MemoComponent: 
    case SimpleMemoComponent: 
    case Block: { 
      // ... 
      return; 
    } 
    case ClassComponent: { 
      return; 
    } 
    case HostComponent: { 
      // ... 
      return; 
    } 
    case HostText: { 
      // ... 
      return; 
    } 
    // case... 
  } 
} 

对于 FunctionComponent，更新时会执行 commitHookEffectListUnmount(``HookLayout | HookHasEffect, finishedWork)：

function commitHookEffectListUnmount(tag: number, finishedWork: Fiber) { 
  const updateQueue = finishedWork.updateQueue; 
  const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null; 
  if (lastEffect !== null) { 
    const firstEffect = lastEffect.next; 
    let effect = firstEffect; 
    do { 
      if ((effect.tag & tag) === tag) { 
        const destroy = effect.destroy; 
        effect.destroy = undefined; 
        if (destroy !== undefined) { 
          destroy(); 
        } 
      } 
      effect = effect.next; 
    } while (effect !== firstEffect); 
  } 
} 

里面会遍历 effect list，判断 effect.tag 是否存在参数传入的 tag 类型，在这个场景里被传入 tag 参数是 HookLayout，也就是 useLayoutEffect 对应的 effect tag。所以这里的意思是遍历 effect list，如果存在 useLayoutEffect 的 effect tag，则执行它的销毁函数(即 useLayoutEffect 的回调函数的返回值)。

如果 fiber 节点的类型是 HostComponent，也就是 dom 节点对应的 fiber 节点，更新时会执行 commitUpdate 方法：

function commitWork(current: Fiber | null, finishedWork: Fiber): void { 
  switch (finishedWork.tag) { 
    // ... 
    case HostComponent: { 
      const instance: Instance = finishedWork.stateNode; 
      if (instance != null) { 
        // ... 
        const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any); 
        // ... 
        if (updatePayload !== null) { 
          commitUpdate( 
            instance, 
            updatePayload, 
            type, 
            oldProps, 
            newProps, 
            finishedWork, 
          ); 
        } 
        if (enableDeprecatedFlareAPI) { 
          const prevListeners = oldProps.DEPRECATED_flareListeners; 
          const nextListeners = newProps.DEPRECATED_flareListeners; 
          if (prevListeners !== nextListeners) { 
            updateDeprecatedEventListeners(nextListeners, finishedWork, null); 
          } 
        } 
      } 
      return; 
    } 
    // ... 
  } 
} 

commitUpdate 方法接收的参数中有个 updatePayload，它来自于 fiber.updateQueue 属性，对于类型为 HostComponent 的 fiber 节点来说，它的 updateQueue 属性是一个数组，表示这个 dom 节点的属性变更，例如一个 dom 节点在某次更新中它的 a 属性需要从 react 更新为 vue，b 属性需要从 byte 更新为 dance，那这个 dom 节点的 fiber 节点的 updateQueue 就长这样 ['a', 'vue', 'b', 'dance']，也就是说第 i 项是属性 key，第 i + 1 项是属性 value。

export function commitUpdate( 
  domElement: Instance, 
  updatePayload: Array<mixed>, 
  type: string, 
  oldProps: Props, 
  newProps: Props, 
  internalInstanceHandle: Object, 
): void { 
  // ... 
  updateProperties(domElement, updatePayload, type, oldProps, newProps); 
} 

它最终会调用 updateDOMProperties 来更新 dom 属性：

function updateDOMProperties( 
  domElement: Element, 
  updatePayload: Array<any>, 
  wasCustomComponentTag: boolean, 
  isCustomComponentTag: boolean, 
): void { 
  for (let i = 0; i < updatePayload.length; i += 2) { 
    const propKey = updatePayload[i]; 
    const propValue = updatePayload[i + 1]; 
    if (propKey === STYLE) { 
      setValueForStyles(domElement, propValue); 
    } else if (propKey === DANGEROUSLY_SET_INNER_HTML) { 
      setInnerHTML(domElement, propValue); 
    } else if (propKey === CHILDREN) { 
      setTextContent(domElement, propValue); 
    } else { 
      setValueForProperty(domElement, propKey, propValue, isCustomComponentTag); 
    } 
  } 
} 

这里的 i 和 i + 1 就对应着上面提到的 updateQueue 的数据结构，第 i 项是属性 key，第 i + 1 项是属性 value。

commitDeletion

commitDeletion 用于执行删除操作：

function commitDeletion( 
  finishedRoot: FiberRoot, 
  current: Fiber, 
  renderPriorityLevel: ReactPriorityLevel, 
): void { 
  // ... 
  unmountHostComponents(finishedRoot, current, renderPriorityLevel); 
  // ... 
} 

在 unmountHostComponents 中核心是遍历节点调用 commitUnmount 方法。在这个方法中会根据 fiber 节点的类型做不同的处理。

对于 FunctionComponent，会注册它的 useEffect 销毁函数，其实就是把这个 effect 推进 pendingPassiveHookEffectsUnmount 这个数组中，便于「后续」取出来执行销毁函数。

function commitUnmount( 
  finishedRoot: FiberRoot, 
  current: Fiber, 
  renderPriorityLevel: ReactPriorityLevel, 
): void { 
  switch (current.tag) { 
    case FunctionComponent: { 
      // ... 
      enqueuePendingPassiveHookEffectUnmount(current, effect); 
      // ... 
      return; 
    } 
  } 
} 

对于 ClassComponent，会执行它的 componentWillUnmount 方法：

function commitUnmount( 
  finishedRoot: FiberRoot, 
  current: Fiber, 
  renderPriorityLevel: ReactPriorityLevel, 
): void { 
  switch (current.tag) { 
    case ClassComponent: { 
      const instance = current.stateNode; 
      if (typeof instance.componentWillUnmount === 'function') { 
        safelyCallComponentWillUnmount(current, instance); 
      } 
      return; 
    } 
  } 
} 

layout阶段

layout阶段 会执行 commitLayoutEffects 方法，里面核心是执行commitLifeCycles方法。在这个方法中会根据 fiber 节点的类型执行不同的处理。

function commitLifeCycles( 
  finishedRoot: FiberRoot, 
  current: Fiber | null, 
  finishedWork: Fiber, 
  committedLanes: Lanes, 
): void { 
  switch (finishedWork.tag) { 
    case FunctionComponent: { 
      commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork); 
      schedulePassiveEffects(finishedWork); 
      return; 
    } 
  } 
} 

对于 FunctionComponent，会把 HookLayout 这个 tag 类型传给 commitHookEffectListMount 方法，也就是说这里会执行 useLayoutEffect 的回调函数。

接着会执行 schedulePassiveEffects 方法：

function schedulePassiveEffects(finishedWork: Fiber) { 
  const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any); 
  const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null; 
  if (lastEffect !== null) { 
    const firstEffect = lastEffect.next; 
    let effect = firstEffect; 
    do { 
      const {next, tag} = effect; 
      if ( 
        (tag & HookPassive) !== NoHookEffect && 
        (tag & HookHasEffect) !== NoHookEffect 
      ) { 
        enqueuePendingPassiveHookEffectUnmount(finishedWork, effect); 
        enqueuePendingPassiveHookEffectMount(finishedWork, effect); 
      } 
      effect = next; 
    } while (effect !== firstEffect); 
  } 
} 

在这里会分别注册 useEffect 销毁函数和回调函数，其实也就是把 effect 分别推进 pendingPassiveHookEffectsUnmount 和 pendingPassiveHookEffectsMount 这两个数组中，用于「后续」取出来执行。

对于 ClassComponent，如果 current 为空，也就是这个节点是首次 render，则会执行它的 componentDidMount 生命周期方法，否则会执行 componentDidUpdate 方法：

function commitLifeCycles( 
  finishedRoot: FiberRoot, 
  current: Fiber | null, 
  finishedWork: Fiber, 
  committedLanes: Lanes, 
): void { 
  switch (finishedWork.tag) { 
    case ClassComponent: { 
      const instance = finishedWork.stateNode; 
      if (finishedWork.effectTag & Update) { 
        if (current === null) { 
          instance.componentDidMount(); 
        } else { 
          instance.componentDidUpdate( 
            prevProps, 
            prevState, 
            instance.__reactInternalSnapshotBeforeUpdate, 
          ); 
        } 
      } 
      return; 
    } 
  } 
} 

commit 阶段总结

• 等待执行完上一轮渲染的 useEffect
• 重置一些全局变量(如：workInProgressRoot)
• 更新副作用列表 effect list。根节点的副作用列表是不包括自身的，如果根节点有副作用, 则需要把根节点添加到副作用列表的末尾
• 渲染
  • 执行 componentDidMount、componentDidUpdate
  • 执行 useLayoutEffect 的回调函数
  • 注册 useEffect 的回调函数和销毁函数，等 commit 阶段结束后再异步执行
  • 执行 DOM 增删改
  • 执行 useLayoutEffect 的销毁函数
  • 执行 getSnapshotBeforeUpdate
  • 调度 useEffect
  • beforeMutation
  • mutation
  • 切换当前 fiber 树(root.current = finishedWork)，使得 fiberRoot 的 current 指向的是当前页面展示的 fiber 树。
  • layout