• 【React源码】(十一)fiber 树渲染

    fiber 树渲染

    在正式分析fiber树渲染之前, 再次回顾一下reconciler 运作流程的 4 个阶段:

    1. 输入阶段: 衔接react-dom包, 承接fiber更新请求(参考React 应用的启动过程).
    2. 注册调度任务: 与调度中心(scheduler包)交互, 注册调度任务task, 等待任务回调(参考React 调度原理(scheduler)).
    3. 执行任务回调: 在内存中构造出fiber树和DOM对象(参考fiber 树构造(初次创建)和 fiber 树构造(对比更新)).
    4. 输出: 与渲染器(react-dom)交互, 渲染DOM节点.

    本节分析其中的第 4 阶段(输出), fiber树渲染处于reconciler 运作流程这一流水线的最后一环, 或者说前面的步骤都是为了最后一步服务, 所以其重要性不言而喻.

    前文已经介绍了fiber树构造, 现在分析fiber树渲染过程, 这个过程, 实际上是对fiber树的进一步处理.

    fiber 树特点

    通过前文fiber树构造的解读, 可以总结出fiber树的基本特点:

    • 无论是首次构造或者是对比更新, 最终都会在内存中生成一棵用于渲染页面的fiber树(即fiberRoot.finishedWork).
    • 这棵将要被渲染的fiber树有 2 个特点:
      1. 副作用队列挂载在根节点上(具体来讲是finishedWork.firstEffect)
      2. 代表最新页面的DOM对象挂载在fiber树中首个HostComponent类型的节点上(具体来讲DOM对象是挂载在fiber.stateNode属性上)

    这里再次回顾前文使用过的 2 棵 fiber 树, 可以验证上述特点:

    1. 初次构造

    1. 对比更新

    commitRoot

    整个渲染逻辑都在commitRoot 函数中:

    1.  
    2. function commitRoot(root) {
    3.  
    4. const renderPriorityLevel = getCurrentPriorityLevel();
    5.  
    6. runWithPriority(
    7.  
    8. ImmediateSchedulerPriority,
    9.  
    10. commitRootImpl.bind(null, root, renderPriorityLevel),
    11.  
    12. );
    13.  
    14. return null;
    15.  
    16. }

    在commitRoot中同时使用到了渲染优先级和调度优先级, 有关优先级的讨论, 在前文已经做出了说明(参考React 中的优先级管理和fiber 树构造(基础准备)#优先级), 本节不再赘述. 最后的实现是通过commitRootImpl函数:

     

    1. // ... 省略部分无关代码
    2.  
    3. function commitRootImpl(root, renderPriorityLevel) {
    4.  
    5. // ============ 渲染前: 准备 ============
    6.  
    7. const finishedWork = root.finishedWork;
    8.  
    9. const lanes = root.finishedLanes;
    10.  
    11. // 清空FiberRoot对象上的属性
    12.  
    13. root.finishedWork = null;
    14.  
    15. root.finishedLanes = NoLanes;
    16.  
    17. root.callbackNode = null;
    18.  
    19. if (root === workInProgressRoot) {
    20.  
    21. // 重置全局变量
    22.  
    23. workInProgressRoot = null;
    24.  
    25. workInProgress = null;
    26.  
    27. workInProgressRootRenderLanes = NoLanes;
    28.  
    29. }
    30.  
    31. // 再次更新副作用队列
    32.  
    33. let firstEffect;
    34.  
    35. if (finishedWork.flags > PerformedWork) {
    36.  
    37. // 默认情况下fiber节点的副作用队列是不包括自身的
    38.  
    39. // 如果根节点有副作用, 则将根节点添加到副作用队列的末尾
    40.  
    41. if (finishedWork.lastEffect !== null) {
    42.  
    43. finishedWork.lastEffect.nextEffect = finishedWork;
    44.  
    45. firstEffect = finishedWork.firstEffect;
    46.  
    47. } else {
    48.  
    49. firstEffect = finishedWork;
    50.  
    51. }
    52.  
    53. } else {
    54.  
    55. firstEffect = finishedWork.firstEffect;
    56.  
    57. }
    58.  
    59. // ============ 渲染 ============
    60.  
    61. let firstEffect = finishedWork.firstEffect;
    62.  
    63. if (firstEffect !== null) {
    64.  
    65. const prevExecutionContext = executionContext;
    66.  
    67. executionContext |= CommitContext;
    68.  
    69. // 阶段1: dom突变之前
    70.  
    71. nextEffect = firstEffect;
    72.  
    73. do {
    74.  
    75. commitBeforeMutationEffects();
    76.  
    77. } while (nextEffect !== null);
    78.  
    79. // 阶段2: dom突变, 界面发生改变
    80.  
    81. nextEffect = firstEffect;
    82.  
    83. do {
    84.  
    85. commitMutationEffects(root, renderPriorityLevel);
    86.  
    87. } while (nextEffect !== null);
    88.  
    89. // 恢复界面状态
    90.  
    91. resetAfterCommit(root.containerInfo);
    92.  
    93. // 切换current指针
    94.  
    95. root.current = finishedWork;
    96.  
    97. // 阶段3: layout阶段, 调用生命周期componentDidUpdate和回调函数等
    98.  
    99. nextEffect = firstEffect;
    100.  
    101. do {
    102.  
    103. commitLayoutEffects(root, lanes);
    104.  
    105. } while (nextEffect !== null);
    106.  
    107. nextEffect = null;
    108.  
    109. executionContext = prevExecutionContext;
    110.  
    111. }
    112.  
    113. // ============ 渲染后: 重置与清理 ============
    114.  
    115. if (rootDoesHavePassiveEffects) {
    116.  
    117. // 有被动作用(使用useEffect), 保存一些全局变量
    118.  
    119. } else {
    120.  
    121. // 分解副作用队列链表, 辅助垃圾回收
    122.  
    123. // 如果有被动作用(使用useEffect), 会把分解操作放在flushPassiveEffects函数中
    124.  
    125. nextEffect = firstEffect;
    126.  
    127. while (nextEffect !== null) {
    128.  
    129. const nextNextEffect = nextEffect.nextEffect;
    130.  
    131. nextEffect.nextEffect = null;
    132.  
    133. if (nextEffect.flags & Deletion) {
    134.  
    135. detachFiberAfterEffects(nextEffect);
    136.  
    137. }
    138.  
    139. nextEffect = nextNextEffect;
    140.  
    141. }
    142.  
    143. }
    144.  
    145. // 重置一些全局变量(省略这部分代码)...
    146.  
    147. // 下面代码用于检测是否有新的更新任务
    148.  
    149. // 比如在componentDidMount函数中, 再次调用setState()
    150.  
    151. // 1. 检测常规(异步)任务, 如果有则会发起异步调度(调度中心`scheduler`只能异步调用)
    152.  
    153. ensureRootIsScheduled(root, now());
    154.  
    155. // 2. 检测同步任务, 如果有则主动调用flushSyncCallbackQueue(无需再次等待scheduler调度), 再次进入fiber树构造循环
    156.  
    157. flushSyncCallbackQueue();
    158.  
    159. return null;
    160.  
    161. }
     

    commitRootImpl函数中, 可以根据是否调用渲染, 把整个commitRootImpl分为 3 段(分别是渲染前, 渲染, 渲染后).
     

    渲染前
     

    为接下来正式渲染, 做一些准备工作. 主要包括:
     

    1. 设置全局状态(如: 更新fiberRoot上的属性)
    2. 重置全局变量(如: workInProgressRoot, workInProgress等)
    3. 再次更新副作用队列: 只针对根节点fiberRoot.finishedWork 
  
      • 默认情况下根节点的副作用队列是不包括自身的, 如果根节点有副作用, 则将根节点添加到副作用队列的末尾
      • 注意只是延长了副作用队列, 但是fiberRoot.lastEffect指针并没有改变. 比如首次构造时, 根节点拥有Snapshot标记:
     

     

    渲染
     

    commitRootImpl函数中, 渲染阶段的主要逻辑是处理副作用队列, 将最新的 DOM 节点(已经在内存中, 只是还没渲染)渲染到界面上.
     

    整个渲染过程被分为 3 个函数分布实现:
     

    1. commitBeforeMutationEffects 
  
      • dom 变更之前, 处理副作用队列中带有Snapshot,Passive标记的fiber节点.
    2. commitMutationEffects 
  
      • dom 变更, 界面得到更新. 处理副作用队列中带有Placement, Update, Deletion, Hydrating标记的fiber节点.
    3. commitLayoutEffects 
  
      • dom 变更后, 处理副作用队列中带有Update | Callback标记的fiber节点.
     

    通过上述源码分析, 可以把commitRootImpl的职责概括为 2 个方面:
     

    1. 处理副作用队列. (步骤 1,2,3 都会处理, 只是处理节点的标识fiber.flags不同).
    2. 调用渲染器, 输出最终结果. (在步骤 2: commitMutationEffects中执行).
     

    所以commitRootImpl是处理fiberRoot.finishedWork这棵即将被渲染的fiber树, 理论上无需关心这棵fiber树是如何产生的(可以是首次构造产生, 也可以是对比更新产生). 为了清晰简便, 在下文的所有图示都使用初次创建的fiber树结构来进行演示.
     

    这 3 个函数处理的对象是副作用队列和DOM对象.
     

    所以无论fiber树结构有多么复杂, 到了commitRoot阶段, 实际起作用的只有 2 个节点:
     

    • 副作用队列所在节点: 根节点, 即HostRootFiber节点.
    • DOM对象所在节点: 从上至下首个HostComponent类型的fiber节点, 此节点 fiber.stateNode实际上指向最新的 DOM 树.
     

    下图为了清晰, 省略了一些无关引用, 只留下commitRoot阶段实际会用到的fiber节点:
     

     

    commitBeforeMutationEffects
     

    第一阶段: dom 变更之前, 处理副作用队列中带有Snapshot,Passive标记的fiber节点.
     

    1.  
    2. // ... 省略部分无关代码
    3.  
    4. function commitBeforeMutationEffects() {
    5.  
    6. while (nextEffect !== null) {
    7.  
    8. const current = nextEffect.alternate;
    9.  
    10. const flags = nextEffect.flags;
    11.  
    12. // 处理`Snapshot`标记
    13.  
    14. if ((flags & Snapshot) !== NoFlags) {
    15.  
    16. commitBeforeMutationEffectOnFiber(current, nextEffect);
    17.  
    18. }
    19.  
    20. // 处理`Passive`标记
    21.  
    22. if ((flags & Passive) !== NoFlags) {
    23.  
    24. // Passive标记只在使用了hook, useEffect会出现. 所以此处是针对hook对象的处理
    25.  
    26. if (!rootDoesHavePassiveEffects) {
    27.  
    28. rootDoesHavePassiveEffects = true;
    29.  
    30. scheduleCallback(NormalSchedulerPriority, () => {
    31.  
    32. flushPassiveEffects();
    33.  
    34. return null;
    35.  
    36. });
    37.  
    38. }
    39.  
    40. }
    41.  
    42. nextEffect = nextEffect.nextEffect;
    43.  
    44. }
    45.  
    46. }
     

    注意：commitBeforeMutationEffectOnFiber实际上对应了commitBeforeMutationLifeCycles函数，在导入时进行了重命名
     

    1. 处理Snapshot标记
     

     

    1. function commitBeforeMutationLifeCycles(
    3. current: Fiber | null,
    5. finishedWork: Fiber,
    7. ): void {
    8.  
    9. switch (finishedWork.tag) {
    10.  
    11. case FunctionComponent:
    12.  
    13. case ForwardRef:
    14.  
    15. case SimpleMemoComponent:
    16.  
    17. case Block: {
    18.  
    19. return;
    20.  
    21. }
    22.  
    23. case ClassComponent: {
    24.  
    25. if (finishedWork.flags & Snapshot) {
    26.  
    27. if (current !== null) {
    28.  
    29. const prevProps = current.memoizedProps;
    30.  
    31. const prevState = current.memoizedState;
    32.  
    33. const instance = finishedWork.stateNode;
    34.  
    35. const snapshot = instance.getSnapshotBeforeUpdate(
    36.  
    37. finishedWork.elementType === finishedWork.type
    38.  
    39. ? prevProps
    40.  
    41. : resolveDefaultProps(finishedWork.type, prevProps),
    42.  
    43. prevState,
    44.  
    45. );
    46.  
    47. instance.__reactInternalSnapshotBeforeUpdate = snapshot;
    48.  
    49. }
    50.  
    51. }
    52.  
    53. return;
    54.  
    55. }
    56.  
    57. case HostRoot: {
    58.  
    59. if (supportsMutation) {
    60.  
    61. if (finishedWork.flags & Snapshot) {
    62.  
    63. const root = finishedWork.stateNode;
    64.  
    65. clearContainer(root.containerInfo);
    66.  
    67. }
    68.  
    69. }
    70.  
    71. return;
    72.  
    73. }
    74.  
    75. case HostComponent:
    76.  
    77. case HostText:
    78.  
    79. case HostPortal:
    80.  
    81. case IncompleteClassComponent:
    82.  
    83. return;
    84.  
    85. }
    86.  
    87. }
     

    从源码中可以看到, 与Snapshot标记相关的类型只有ClassComponent和HostRoot.
     

    • 对于ClassComponent类型节点, 调用了instance.getSnapshotBeforeUpdate生命周期函数
    • 对于HostRoot类型节点, 调用clearContainer清空了容器节点(即div#root这个 dom 节点).
     

    1. 处理Passive标记
     

    Passive标记只会在使用了hook对象的function类型的节点上存在, 后续的执行过程在hook原理章节中详细说明. 此处我们需要了解在commitRoot的第一个阶段, 为了处理hook对象(如useEffect), 通过scheduleCallback单独注册了一个调度任务task, 等待调度中心scheduler处理.
     

    注意: 通过调度中心scheduler调度的任务task均是通过MessageChannel触发, 都是异步执行(可参考React 调度原理(scheduler)).
     

    小测试:
     

    1.  
    2. // 以下示例代码中的输出顺序为 1, 3, 4, 2
    3.  
    4. function Test() {
    5.  
    6. console.log(1);
    7.  
    8. useEffect(() => {
    9.  
    10. console.log(2);
    11.  
    12. });
    13.  
    14. console.log(3);
    15.  
    16. Promise.resolve(() => {
    17.  
    18. console.log(4);
    19.  
    20. });
    21.  
    22. return <div>testdiv>;
    23.  
    24. }
     

    commitMutationEffects
     

    第二阶段: dom 变更, 界面得到更新. 处理副作用队列中带有ContentReset, Ref, Placement, Update, Deletion, Hydrating标记的fiber节点.
     

     

    1. // ...省略部分无关代码
    2.  
    3. function commitMutationEffects(
    5. root: FiberRoot,
    7. renderPriorityLevel: ReactPriorityLevel,
    9. ) {
    10.  
    11. // 处理Ref
    12.  
    13. if (flags & Ref) {
    14.  
    15. const current = nextEffect.alternate;
    16.  
    17. if (current !== null) {
    18.  
    19. // 先清空ref, 在commitRoot的第三阶段(dom变更后), 再重新赋值
    20.  
    21. commitDetachRef(current);
    22.  
    23. }
    24.  
    25. }
    26.  
    27. // 处理DOM突变
    28.  
    29. while (nextEffect !== null) {
    30.  
    31. const flags = nextEffect.flags;
    32.  
    33. const primaryFlags = flags & (Placement | Update | Deletion | Hydrating);
    34.  
    35. switch (primaryFlags) {
    36.  
    37. case Placement: {
    38.  
    39. // 新增节点
    40.  
    41. commitPlacement(nextEffect);
    42.  
    43. nextEffect.flags &= ~Placement; // 注意Placement标记会被清除
    44.  
    45. break;
    46.  
    47. }
    48.  
    49. case PlacementAndUpdate: {
    50.  
    51. // Placement
    52.  
    53. commitPlacement(nextEffect);
    54.  
    55. nextEffect.flags &= ~Placement;
    56.  
    57. // Update
    58.  
    59. const current = nextEffect.alternate;
    60.  
    61. commitWork(current, nextEffect);
    62.  
    63. break;
    64.  
    65. }
    66.  
    67. case Update: {
    68.  
    69. // 更新节点
    70.  
    71. const current = nextEffect.alternate;
    72.  
    73. commitWork(current, nextEffect);
    74.  
    75. break;
    76.  
    77. }
    78.  
    79. case Deletion: {
    80.  
    81. // 删除节点
    82.  
    83. commitDeletion(root, nextEffect, renderPriorityLevel);
    84.  
    85. break;
    86.  
    87. }
    88.  
    89. }
    90.  
    91. nextEffect = nextEffect.nextEffect;
    92.  
    93. }
    94.  
    95. }
     

    处理 DOM 突变:
     

    1. 新增: 函数调用栈 commitPlacement -> insertOrAppendPlacementNode -> appendChild
    2. 更新: 函数调用栈 commitWork -> commitUpdate
    3. 删除: 函数调用栈 commitDeletion -> removeChild
     

    最终会调用appendChild, commitUpdate, removeChild这些react-dom包中的函数. 它们是HostConfig协议(源码在 ReactDOMHostConfig.js 中)中规定的标准函数, 在渲染器react-dom包中进行实现. 这些函数就是直接操作 DOM, 所以执行之后, 界面也会得到更新.
     

    注意: commitMutationEffects执行之后, 在commitRootImpl函数中切换当前fiber树(root.current = finishedWork),保证fiberRoot.current指向代表当前界面的fiber树.
     

     

    commitLayoutEffects
     

    第三阶段: dom 变更后, 处理副作用队列中带有Update, Callback, Ref标记的fiber节点.
     

     

    1. // ...省略部分无关代码
    2.  
    3. function commitLayoutEffects(root: FiberRoot, committedLanes: Lanes) {
    4.  
    5. while (nextEffect !== null) {
    6.  
    7. const flags = nextEffect.flags;
    8.  
    9. // 处理 Update和Callback标记
    10.  
    11. if (flags & (Update | Callback)) {
    12.  
    13. const current = nextEffect.alternate;
    14.  
    15. commitLayoutEffectOnFiber(root, current, nextEffect, committedLanes);
    16.  
    17. }
    18.  
    19. if (flags & Ref) {
    20.  
    21. // 重新设置ref
    22.  
    23. commitAttachRef(nextEffect);
    24.  
    25. }
    26.  
    27. nextEffect = nextEffect.nextEffect;
    28.  
    29. }
    30.  
    31. }
    32.  
    33. 核心逻辑都在commitLayoutEffectOnFiber->commitLifeCycles函数中.
    34.  
    35.  
    36. // ...省略部分无关代码
    37.  
    38. function commitLifeCycles(
    40. finishedRoot: FiberRoot,
    42. current: Fiber | null,
    44. finishedWork: Fiber,
    46. committedLanes: Lanes,
    48. ): void {
    49.  
    50. switch (finishedWork.tag) {
    51.  
    52. case ClassComponent: {
    53.  
    54. const instance = finishedWork.stateNode;
    55.  
    56. if (finishedWork.flags & Update) {
    57.  
    58. if (current === null) {
    59.  
    60. // 初次渲染: 调用 componentDidMount
    61.  
    62. instance.componentDidMount();
    63.  
    64. } else {
    65.  
    66. const prevProps =
    67.  
    68. finishedWork.elementType === finishedWork.type
    69.  
    70. ? current.memoizedProps
    71.  
    72. : resolveDefaultProps(finishedWork.type, current.memoizedProps);
    73.  
    74. const prevState = current.memoizedState;
    75.  
    76. // 更新阶段: 调用 componentDidUpdate
    77.  
    78. instance.componentDidUpdate(
    79.  
    80. prevProps,
    81.  
    82. prevState,
    83.  
    84. instance.__reactInternalSnapshotBeforeUpdate,
    85.  
    86. );
    87.  
    88. }
    89.  
    90. }
    91.  
    92. const updateQueue: UpdateQueue<
    93.  
    94. *,
    95.  
    96. > | null = (finishedWork.updateQueue: any);
    97.  
    98. if (updateQueue !== null) {
    99.  
    100. // 处理update回调函数 如: this.setState({}, callback)
    101.  
    102. commitUpdateQueue(finishedWork, updateQueue, instance);
    103.  
    104. }
    105.  
    106. return;
    107.  
    108. }
    109.  
    110. case HostComponent: {
    111.  
    112. const instance: Instance = finishedWork.stateNode;
    113.  
    114. if (current === null && finishedWork.flags & Update) {
    115.  
    116. const type = finishedWork.type;
    117.  
    118. const props = finishedWork.memoizedProps;
    119.  
    120. // 设置focus等原生状态
    121.  
    122. commitMount(instance, type, props, finishedWork);
    123.  
    124. }
    125.  
    126. return;
    127.  
    128. }
    129.  
    130. }
    131.  
    132. }
     

    在commitLifeCycles函数中:
     

    • 对于ClassComponent节点, 调用生命周期函数componentDidMount或componentDidUpdate, 调用update.callback回调函数.
    • 对于HostComponent节点, 如有Update标记, 需要设置一些原生状态(如: focus等)
     

    渲染后
     

    执行完上述步骤之后, 本次渲染任务就已经完成了. 在渲染完成后, 需要做一些重置和清理工作:
     

    1.  
      清除副作用队列
       
  
      • 由于副作用队列是一个链表, 由于单个fiber对象的引用关系, 无法被gc回收.
      • 将链表全部拆开, 当fiber对象不再使用的时候, 可以被gc回收.
     

     

    1. 检测更新 
  
      • 在整个渲染过程中, 有可能产生新的update(比如在componentDidMount函数中, 再次调用setState()).
      • 如果是常规(异步)任务, 不用特殊处理, 调用ensureRootIsScheduled确保任务已经注册到调度中心即可.
      • 如果是同步任务, 则主动调用flushSyncCallbackQueue(无需再次等待 scheduler 调度), 再次进入 fiber 树构造循环
     

     

    1. // 清除副作用队列
    2.  
    3. if (rootDoesHavePassiveEffects) {
    4.  
    5. // 有被动作用(使用useEffect), 保存一些全局变量
    6.  
    7. } else {
    8.  
    9. // 分解副作用队列链表, 辅助垃圾回收.
    10.  
    11. // 如果有被动作用(使用useEffect), 会把分解操作放在flushPassiveEffects函数中
    12.  
    13. nextEffect = firstEffect;
    14.  
    15. while (nextEffect !== null) {
    16.  
    17. const nextNextEffect = nextEffect.nextEffect;
    18.  
    19. nextEffect.nextEffect = null;
    20.  
    21. if (nextEffect.flags & Deletion) {
    22.  
    23. detachFiberAfterEffects(nextEffect);
    24.  
    25. }
    26.  
    27. nextEffect = nextNextEffect;
    28.  
    29. }
    30.  
    31. }
    32.  
    33. // 重置一些全局变量(省略这部分代码)...
    34.  
    35. // 下面代码用于检测是否有新的更新任务
    36.  
    37. // 比如在componentDidMount函数中, 再次调用setState()
    38.  
    39. // 1. 检测常规(异步)任务, 如果有则会发起异步调度(调度中心`scheduler`只能异步调用)
     

    ensureRootIsScheduled(root, now());
     

    // 2. 检测同步任务, 如果有则主动调用flushSyncCallbackQueue(无需再次等待scheduler调度), 再次进入fiber树构造循环
     

    flushSyncCallbackQueue();
     

    总结
     

    本节分析了fiber 树渲染的处理过程, 从宏观上看fiber 树渲染位于reconciler 运作流程中的输出阶段, 是整个reconciler 运作流程的链路中最后一环(从输入到输出). 本节根据源码, 具体从渲染前, 渲染, 渲染后三个方面分解了commitRootImpl函数. 其中最核心的渲染逻辑又分为了 3 个函数, 这 3 个函数共同处理了有副作用fiber节点, 并通过渲染器react-dom把最新的 DOM 对象渲染到界面上.
    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
Java.lang.Class类 isEnum()方法有什么功能呢？                            
    
PHP刷leetcode第一弹: 两数之和                            
    
Gitlab SSRF 漏洞复现 CVE-2021-22214                            
    
ZZ308 物联网应用与服务赛题第G套                            
    
2022年Java秋招面试必看的 | ZooKeeper面试题                            
    
JS创建一个数组（字面量）                            
    
代码随想录算法训练营第48天 | ● 198.打家劫舍 ● 213.打家劫舍II ● 337.打家劫舍III                            
    
2.22每日一题（含绝对值的定积分+极值+凹凸区间+单调区间）                            
    
MySQL FROM_UNIXTIME时间戳转换函数                            
    
供应化学试剂BHQ-1 氨基|BHQ-1 amine|1308657-79-5                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/weixin_44828588/article/details/126525335
                
    •