• 【React 源码】(八)fiber 树构造(基础准备)

    fiber 树构造(基础准备)

    在 React 运行时中, fiber树构造位于react-reconciler包.

    在正式解读fiber树构造之前, 再次回顾一下reconciler 运作流程的 4 个阶段:

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

    fiber树构造处于上述第 3 个阶段, 可以通过不同的视角来理解fiber树构造在React运行时中所处的位置:

    • 从scheduler调度中心的角度来看, 它是任务队列taskQueue中的一个具体的任务回调(task.callback).
    • 从React 工作循环的角度来看, 它属于fiber树构造循环.

    由于fiber 树构造源码量比较大, 本系列根据React运行的内存状态, 分为 2 种情况来说明:

    1. 初次创建: 在React应用首次启动时, 界面还没有渲染, 此时并不会进入对比过程, 相当于直接构造一棵全新的树.
    2. 对比更新: React应用启动后, 界面已经渲染. 如果再次发生更新, 创建新fiber之前需要和旧fiber进行对比. 最后构造的 fiber 树有可能是全新的, 也可能是部分更新的.

    无论是初次创建还是对比更新, 基础概念都是通用的, 本节将介绍这些基础知识, 为正式进入fiber树构造做准备.

    ReactElement, Fiber, DOM 三者的关系

    在React 应用中的高频对象一文中, 已经介绍了ReactElement和Fiber对象的数据结构. 这里我们梳理出ReactElement, Fiber, DOM这 3 种对象的关系

    1. ReactElement 对象(type 定义在shared 包中)

      • 所有采用jsx语法书写的节点, 都会被编译器转换, 最终会以React.createElement(...)的方式, 创建出来一个与之对应的ReactElement对象

    2. fiber 对象(type 类型的定义在ReactInternalTypes.js中)

      • fiber对象是通过ReactElement对象进行创建的, 多个fiber对象构成了一棵fiber树, fiber树是构造DOM树的数据模型, fiber树的任何改动, 最后都体现到DOM树.

    3. DOM 对象: 文档对象模型

      • DOM将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合, 也就是常说的DOM树.
      • JavaScript可以访问和操作存储在 DOM 中的内容, 也就是操作DOM对象, 进而触发 UI 渲染.

    它们之间的关系反映了我们书写的 JSX 代码到 DOM 节点的转换过程:

    注意:

    • 开发人员能够控制的是JSX, 也就是ReactElement对象.
    • fiber树是通过ReactElement生成的, 如果脱离了ReactElement,fiber树也无从谈起. 所以是ReactElement树(不是严格的树结构, 为了方便也称为树)驱动fiber树.
    • fiber树是DOM树的数据模型, fiber树驱动DOM树

    开发人员通过编程只能控制ReactElement树的结构, ReactElement树驱动fiber树, fiber树再驱动DOM树, 最后展现到页面上. 所以fiber树的构造过程, 实际上就是ReactElement对象到fiber对象的转换过程.

    全局变量

    从React 工作循环的角度来看, 整个构造过程被包裹在fiber树构造循环中(对应源码位于ReactFiberWorkLoop.js).

    在React运行时, ReactFiberWorkLoop.js闭包中的全局变量会随着fiber树构造循环的进行而变化, 现在查看其中重要的全局变量(源码链接):

    1.  
    2. // 当前React的执行栈(执行上下文)
    3.  
    4. let executionContext: ExecutionContext = NoContext;
    5.  
    6. // 当前root节点
    7.  
    8. let workInProgressRoot: FiberRoot | null = null;
    9.  
    10. // 正在处理中的fiber节点
    11.  
    12. let workInProgress: Fiber | null = null;
    13.  
    14. // 正在渲染的车道(复数)
    15.  
    16. let workInProgressRootRenderLanes: Lanes = NoLanes;
    17.  
    18. // 包含所有子节点的优先级, 是workInProgressRootRenderLanes的超集
    19.  
    20. // 大多数情况下: 在工作循环整体层面会使用workInProgressRootRenderLanes, 在begin/complete阶段层面会使用 subtreeRenderLanes
    21.  
    22. let subtreeRenderLanes: Lanes = NoLanes;
    23.  
    24. // 一个栈结构: 专门存储当前节点的 subtreeRenderLanes
    25.  
    26. const subtreeRenderLanesCursor: StackCursor<Lanes> = createCursor(NoLanes);
    27.  
    28. // fiber构造完后, root节点的状态: completed, errored, suspended等
    29.  
    30. let workInProgressRootExitStatus: RootExitStatus = RootIncomplete;
    31.  
    32. // 重大错误
    33.  
    34. let workInProgressRootFatalError: mixed = null;
    35.  
    36. // 整个render期间所使用到的所有lanes
    37.  
    38. let workInProgressRootIncludedLanes: Lanes = NoLanes;
    39.  
    40. // 在render期间被跳过(由于优先级不够)的lanes: 只包括未处理的updates, 不包括被复用的fiber节点
    41.  
    42. let workInProgressRootSkippedLanes: Lanes = NoLanes;
    43.  
    44. // 在render期间被修改过的lanes
    45.  
    46. let workInProgressRootUpdatedLanes: Lanes = NoLanes;
    47.  
    48. // 防止无限循环和嵌套更新
    49.  
    50. const NESTED_UPDATE_LIMIT = 50;
    51.  
    52. let nestedUpdateCount: number = 0;
    53.  
    54. let rootWithNestedUpdates: FiberRoot | null = null;
    55.  
    56. const NESTED_PASSIVE_UPDATE_LIMIT = 50;
    57.  
    58. let nestedPassiveUpdateCount: number = 0;
    59.  
    60. // 发起更新的时间
    61.  
    62. let currentEventTime: number = NoTimestamp;
    63.  
    64. let currentEventWipLanes: Lanes = NoLanes;
    65.  
    66. let currentEventPendingLanes: Lanes = NoLanes;

    在源码中, 大部分变量都带有英文注释(读者可自行查阅), 此处只列举了fiber树构造循环中最核心的变量

    执行上下文

    在全局变量中有executionContext, 代表渲染期间的执行栈(或叫做执行上下文), 它也是一个二进制表示的变量, 通过位运算进行操作(参考React 算法之位运算). 在源码中一共定义了 8 种执行栈:

    1. type ExecutionContext = number;
    2.  
    3. export const NoContext = /* */ 0b0000000;
    4.  
    5. const BatchedContext = /* */ 0b0000001;
    6.  
    7. const EventContext = /* */ 0b0000010;
    8.  
    9. const DiscreteEventContext = /* */ 0b0000100;
    10.  
    11. const LegacyUnbatchedContext = /* */ 0b0001000;
    12.  
    13. const RenderContext = /* */ 0b0010000;
    14.  
    15. const CommitContext = /* */ 0b0100000;

    上文回顾了reconciler 运作流程的 4 个阶段, 这 4 个阶段只是一个整体划分. 如果具体到每一次更新, 是有差异的. 比如说: Legacy模式下的首次更新, 不会经过调度中心(第 2 阶段),而是直接进入fiber树构造(第 3 阶段).

    事实上正是executionContext在操控reconciler 运作流程(源码体现在scheduleUpdateOnFiber 函数).

    1. export function scheduleUpdateOnFiber(
    3. fiber: Fiber,
    5. lane: Lane,
    7. eventTime: number,
    9. ) {
    10.  
    11. if (lane === SyncLane) {
    12.  
    13. // legacy或blocking模式
    14.  
    15. if (
    16.  
    17. (executionContext & LegacyUnbatchedContext) !== NoContext &&
    18.  
    19. (executionContext & (RenderContext | CommitContext)) === NoContext
    20.  
    21. ) {
    22.  
    23. performSyncWorkOnRoot(root);
    24.  
    25. } else {
    26.  
    27. // 后续的更新
    28.  
    29. // 进入第2阶段, 注册调度任务
    30.  
    31. ensureRootIsScheduled(root, eventTime);
    32.  
    33. if (executionContext === NoContext) {
    34.  
    35. // 如果执行上下文为空, 会取消调度任务, 手动执行回调
    36.  
    37. // 进入第3阶段, 进行fiber树构造
    38.  
    39. flushSyncCallbackQueue();
    40.  
    41. }
    42.  
    43. }
    44.  
    45. } else {
    46.  
    47. // concurrent模式
    48.  
    49. // 无论是否初次更新, 都正常进入第2阶段, 注册调度任务
    50.  
    51. ensureRootIsScheduled(root, eventTime);
    52.  
    53. }
    54.  
    55. }

    在 render 过程中, 每一个阶段都会改变executionContext(render 之前, 会设置executionContext |= RenderContext; commit 之前, 会设置executionContext |= CommitContext), 假设在render过程中再次发起更新(如在UNSAFE_componentWillReceiveProps生命周期中调用setState)则可通过executionContext来判断当前的render状态.

    双缓冲技术(double buffering)

    在全局变量中有workInProgress, 还有不少以workInProgress来命名的变量. workInProgress的应用实际上就是React的双缓冲技术(double buffering).

    在上文我们梳理了ReactElement, Fiber, DOM三者的关系, fiber树的构造过程, 就是把ReactElement转换成fiber树的过程. 在这个过程中, 内存里会同时存在 2 棵fiber树:

    • 其一: 代表当前界面的fiber树(已经被展示出来, 挂载到fiberRoot.current上). 如果是初次构造(初始化渲染), 页面还没有渲染, 此时界面对应的 fiber 树为空(fiberRoot.current = null).
    • 其二: 正在构造的fiber树(即将展示出来, 挂载到HostRootFiber.alternate上, 正在构造的节点称为workInProgress). 当构造完成之后, 重新渲染页面, 最后切换fiberRoot.current = workInProgress, 使得fiberRoot.current重新指向代表当前界面的fiber树.

    此处涉及到 2 个全局对象fiberRoot和HostRootFiber, 在React 应用的启动过程中有详细的说明.

    用图来表述double buffering的概念如下:

    1. 构造过程中, fiberRoot.current指向当前界面对应的fiber树.

    1. 构造完成并渲染, 切换fiberRoot.current指针, 使其继续指向当前界面对应的fiber树(原来代表界面的 fiber 树, 变成了内存中).

    优先级 {#lanes}

    在全局变量中有不少变量都以 Lanes 命名(如workInProgressRootRenderLanes,subtreeRenderLanes其作用见上文注释), 它们都与优先级相关.

    在前文React 中的优先级管理中, 我们介绍了React中有 3 套优先级体系, 并了解了它们之间的关联. 现在fiber树构造过程中, 将要深入分析车道模型Lane的具体应用.

    在整个react-reconciler包中, Lane的应用可以分为 3 个方面:

    update优先级(update.lane) {#update-lane}

    在React 应用中的高频对象一文中, 介绍过update对象, 它是一个环形链表. 对于单个update对象来讲, update.lane代表它的优先级, 称之为update优先级.

    观察其构造函数(源码链接),其优先级是由外界传入.

     

    1. ​
    2. export function createUpdate(eventTime: number, lane: Lane): Update<*> {
    3.  
    4. const update: Update<*> = {
    5.  
    6. eventTime,
    7.  
    8. lane,
    9.  
    10. tag: UpdateState,
    11.  
    12. payload: null,
    13.  
    14. callback: null,
    15.  
    16. next: null,
    17.  
    18. };
    19.  
    20. return update;
    21.  
    22. }
    23.  
    24. 在React体系中, 有 2 种情况会创建update对象:
    25.  
    26. 应用初始化: 在react-reconciler包中的updateContainer函数中(源码)
    27.  
    28.  
    29.  
    30.  
    31.  
    32.  
    33.  
    34.  
    35.  
    36.  
    37.  
    38.  
    39.  
    40.  
    41.  
    42.  
    43. 发起组件更新: 假设在 class 组件中调用setState(源码)
    44.  
    45. const classComponentUpdater = {
    46.  
    47. isMounted,
    48.  
    49. enqueueSetState(inst, payload, callback) {
    50.  
    51. const fiber = getInstance(inst);
    52.  
    53. const eventTime = requestEventTime(); // 根据当前时间, 创建一个update优先级
    54.  
    55. const lane = requestUpdateLane(fiber); // lane被用于创建update对象
    56.  
    57. const update = createUpdate(eventTime, lane);
    58.  
    59. update.payload = payload;
    60.  
    61. enqueueUpdate(fiber, update);
    62.  
    63. scheduleUpdateOnFiber(fiber, lane, eventTime);
    64.  
    65. },
    66.  
    67. };
    68.  
    69. ​
     

    可以看到, 无论是应用初始化或者发起组件更新, 创建update.lane的逻辑都是一样的, 都是根据当前时间, 创建一个 update 优先级.
     

    requestUpdateLane:
     

     

    1. export function requestUpdateLane(fiber: Fiber): Lane {
    2.  
    3. // Special cases
    4.  
    5. const mode = fiber.mode;
    6.  
    7. if ((mode & BlockingMode) === NoMode) {
    8.  
    9. // legacy 模式
    10.  
    11. return (SyncLane: Lane);
    12.  
    13. } else if ((mode & ConcurrentMode) === NoMode) {
    14.  
    15. // blocking模式
    16.  
    17. return getCurrentPriorityLevel() === ImmediateSchedulerPriority
    18.  
    19. ? (SyncLane: Lane)
    20.  
    21. : (SyncBatchedLane: Lane);
    22.  
    23. }
    24.  
    25. // concurrent模式
    26.  
    27. if (currentEventWipLanes === NoLanes) {
    28.  
    29. currentEventWipLanes = workInProgressRootIncludedLanes;
    30.  
    31. }
    32.  
    33. const isTransition = requestCurrentTransition() !== NoTransition;
    34.  
    35. if (isTransition) {
    36.  
    37. // 特殊情况, 处于suspense过程中
    38.  
    39. if (currentEventPendingLanes !== NoLanes) {
    40.  
    41. currentEventPendingLanes =
    42.  
    43. mostRecentlyUpdatedRoot !== null
    44.  
    45. ? mostRecentlyUpdatedRoot.pendingLanes
    46.  
    47. : NoLanes;
    48.  
    49. }
    50.  
    51. return findTransitionLane(currentEventWipLanes, currentEventPendingLanes);
    52.  
    53. }
    54.  
    55. // 正常情况, 获取调度优先级
    56.  
    57. const schedulerPriority = getCurrentPriorityLevel();
    58.  
    59. let lane;
    60.  
    61. if (
    62.  
    63. (executionContext & DiscreteEventContext) !== NoContext &&
    64.  
    65. schedulerPriority === UserBlockingSchedulerPriority
    66.  
    67. ) {
    68.  
    69. // executionContext 存在输入事件. 且调度优先级是用户阻塞性质
    70.  
    71. lane = findUpdateLane(InputDiscreteLanePriority, currentEventWipLanes);
    72.  
    73. } else {
    74.  
    75. // 调度优先级转换为车道模型
    76.  
    77. const schedulerLanePriority = schedulerPriorityToLanePriority(
    78.  
    79. schedulerPriority,
    80.  
    81. );
    82.  
    83. lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
    84.  
    85. }
    86.  
    87. return lane;
    88.  
    89. }
     

    可以看到requestUpdateLane的作用是返回一个合适的 update 优先级.
     

    1. legacy 模式: 返回SyncLane
    2. blocking 模式: 返回SyncLane
    3. concurrent 模式: 
  
      • 正常情况下, 根据当前的调度优先级来生成一个lane.
      • 特殊情况下(处于 suspense 过程中), 会优先选择TransitionLanes通道中的空闲通道(如果所有TransitionLanes通道都被占用, 就取最高优先级. 源码).
     

    最后通过scheduleUpdateOnFiber(current, lane, eventTime);函数, 把update.lane正式带入到了输入阶段.
     

    scheduleUpdateOnFiber是输入阶段的必经函数, 在本系列的文章中已经多次提到, 此处以update.lane的视角分析:
     

     

    1. export function scheduleUpdateOnFiber(
    3. fiber: Fiber,
    5. lane: Lane,
    7. eventTime: number,
    9. ) {
    10.  
    11. if (lane === SyncLane) {
    12.  
    13. // legacy或blocking模式
    14.  
    15. if (
    16.  
    17. (executionContext & LegacyUnbatchedContext) !== NoContext &&
    18.  
    19. (executionContext & (RenderContext | CommitContext)) === NoContext
    20.  
    21. ) {
    22.  
    23. performSyncWorkOnRoot(root);
    24.  
    25. } else {
    26.  
    27. ensureRootIsScheduled(root, eventTime); // 注册回调任务
    28.  
    29. if (executionContext === NoContext) {
    30.  
    31. flushSyncCallbackQueue(); // 取消schedule调度 ,主动刷新回调队列,
    32.  
    33. }
    34.  
    35. }
    36.  
    37. } else {
    38.  
    39. // concurrent模式
    40.  
    41. ensureRootIsScheduled(root, eventTime);
    42.  
    43. }
    44.  
    45. }
     

    当lane === SyncLane也就是 legacy 或 blocking 模式中, 注册完回调任务之后(ensureRootIsScheduled(root, eventTime)), 如果执行上下文为空, 会取消 schedule 调度, 主动刷新回调队列flushSyncCallbackQueue().
     

    这里包含了一个热点问题(setState到底是同步还是异步)的标准答案:
     

    • 如果逻辑进入flushSyncCallbackQueue(executionContext === NoContext), 则会主动取消调度, 并刷新回调, 立即进入fiber树构造过程. 当执行setState下一行代码时, fiber树已经重新渲染了, 故setState体现为同步.
    • 正常情况下, 不会取消schedule调度. 由于schedule调度是通过MessageChannel触发(宏任务), 故体现为异步.
     

    渲染优先级(renderLanes)
     

    这是一个全局概念, 每一次render之前, 首先要确定本次render的优先级. 具体对应到源码如下:
     

     

    1. ​
    2. // ...省略无关代码
    3.  
    4. function performSyncWorkOnRoot(root) {
    5.  
    6. let lanes;
    7.  
    8. let exitStatus;
    9.  
    10. // 获取本次`render`的优先级
    11.  
    12. lanes = getNextLanes(root, lanes);
    13.  
    14. exitStatus = renderRootSync(root, lanes);
    15.  
    16. }
    17.  
    18. // ...省略无关代码
    19.  
    20. function performConcurrentWorkOnRoot(root) {
    21.  
    22. // 获取本次`render`的优先级
    23.  
    24. let lanes = getNextLanes(
    25.  
    26. root,
    27.  
    28. root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,
    29.  
    30. );
    31.  
    32. if (lanes === NoLanes) {
    33.  
    34. return null;
    35.  
    36. }
    37.  
    38. let exitStatus = renderRootConcurrent(root, lanes);
    39.  
    40. }
    41.  
    42. 可以看到, 无论是Legacy还是Concurrent模式, 在正式render之前, 都会调用getNextLanes获取一个优先级(源码链接).
    43.  
    44.  
    45. // ...省略部分代码
    46.  
    47. export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
    48.  
    49. // 1. check是否有等待中的lanes
    50.  
    51. const pendingLanes = root.pendingLanes;
    52.  
    53. if (pendingLanes === NoLanes) {
    54.  
    55. return_highestLanePriority = NoLanePriority;
    56.  
    57. return NoLanes;
    58.  
    59. }
    60.  
    61. let nextLanes = NoLanes;
    62.  
    63. let nextLanePriority = NoLanePriority;
    64.  
    65. const expiredLanes = root.expiredLanes;
    66.  
    67. const suspendedLanes = root.suspendedLanes;
    68.  
    69. const pingedLanes = root.pingedLanes;
    70.  
    71. // 2. check是否有已过期的lanes
    72.  
    73. if (expiredLanes !== NoLanes) {
    74.  
    75. nextLanes = expiredLanes;
    76.  
    77. nextLanePriority = return_highestLanePriority = SyncLanePriority;
    78.  
    79. } else {
    80.  
    81. const nonIdlePendingLanes = pendingLanes & NonIdleLanes;
    82.  
    83. if (nonIdlePendingLanes !== NoLanes) {
    84.  
    85. // 非Idle任务 ...
    86.  
    87. } else {
    88.  
    89. // Idle任务 ...
    90.  
    91. }
    92.  
    93. }
    94.  
    95. if (nextLanes === NoLanes) {
    96.  
    97. return NoLanes;
    98.  
    99. }
    100.  
    101. return nextLanes;
    102.  
    103. }
    104.  
    105. ​
     

    getNextLanes会根据fiberRoot对象上的属性(expiredLanes, suspendedLanes, pingedLanes等), 确定出当前最紧急的lanes.
     

    此处返回的lanes会作为全局渲染的优先级, 用于fiber树构造过程中. 针对fiber对象或update对象, 只要它们的优先级(如: fiber.lanes和update.lane)比渲染优先级低, 都将会被忽略.
     

    fiber优先级(fiber.lanes)
     

    在React 应用中的高频对象一文中, 介绍过fiber对象的数据结构. 其中有 2 个属性与优先级相关:
     

    1. fiber.lanes: 代表本节点的优先级
    2. fiber.childLanes: 代表子节点的优先级 从FiberNode的构造函数中可以看出, fiber.lanes和fiber.childLanes的初始值都为NoLanes, 在fiber树构造过程中, 使用全局的渲染优先级(renderLanes)和fiber.lanes判断fiber节点是否更新(源码地址). 
  
      • 如果全局的渲染优先级renderLanes不包括fiber.lanes, 证明该fiber节点没有更新, 可以复用.
      • 如果不能复用, 进入创建阶段.
     

     

    1. function beginWork(
    3. current: Fiber | null,
    5. workInProgress: Fiber,
    7. renderLanes: Lanes,
    9. ): Fiber | null {
    10.  
    11. const updateLanes = workInProgress.lanes;
    12.  
    13. if (current !== null) {
    14.  
    15. const oldProps = current.memoizedProps;
    16.  
    17. const newProps = workInProgress.pendingProps;
    18.  
    19. if (
    20.  
    21. oldProps !== newProps ||
    22.  
    23. hasLegacyContextChanged() ||
    24.  
    25. // Force a re-render if the implementation changed due to hot reload:
    26.  
    27. (__DEV__ ? workInProgress.type !== current.type : false)
    28.  
    29. ) {
    30.  
    31. didReceiveUpdate = true;
    32.  
    33. } else if (!includesSomeLane(renderLanes, updateLanes)) {
    34.  
    35. didReceiveUpdate = false;
    36.  
    37. // 本`fiber`节点的没有更新, 可以复用, 进入bailout逻辑
    38.  
    39. return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
    40.  
    41. }
    42.  
    43. }
    44.  
    45. // 不能复用, 创建新的fiber节点
    46.  
    47. workInProgress.lanes = NoLanes; // 重置优先级为 NoLanes
    48.  
    49. switch (workInProgress.tag) {
    50.  
    51. case ClassComponent: {
    52.  
    53. const Component = workInProgress.type;
    54.  
    55. const unresolvedProps = workInProgress.pendingProps;
    56.  
    57. const resolvedProps =
    58.  
    59. workInProgress.elementType === Component
    60.  
    61. ? unresolvedProps
    62.  
    63. : resolveDefaultProps(Component, unresolvedProps);
    64.  
    65. return updateClassComponent(
    66.  
    67. current,
    68.  
    69. workInProgress,
    70.  
    71. Component,
    72.  
    73. resolvedProps,
    74.  
    75. // 正常情况下渲染优先级会被用于fiber树的构造过程
    76.  
    77. renderLanes,
    78.  
    79. );
    80.  
    81. }
    82.  
    83. }
    84.  
    85. }
     

    栈帧管理
     

    在React源码中, 每一次执行fiber树构造(也就是调用performSyncWorkOnRoot或者performConcurrentWorkOnRoot函数)的过程, 都需要一些全局变量来保存状态. 在上文中已经介绍最核心的全局变量.
     

    如果从单个变量来看, 它们就是一个个的全局变量. 如果将这些全局变量组合起来, 它们代表了当前fiber树构造的活动记录. 通过这一组全局变量, 可以还原fiber树构造过程(比如时间切片的实现过程(参考React 调度原理), fiber树构造过程被打断之后需要还原进度, 全靠这一组全局变量). 所以每次fiber树构造是一个独立的过程, 需要独立的一组全局变量, 在React内部把这一个独立的过程封装为一个栈帧stack(简单来说就是每次构造都需要独立的空间. 对于栈帧的深入理解, 请读者自行参考其他资料).
     

    所以在进行fiber树构造之前, 如果不需要恢复上一次构造进度, 都会刷新栈帧(源码在prepareFreshStack 函数)
     

     

    1. function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
    2.  
    3. const prevExecutionContext = executionContext;
    4.  
    5. executionContext |= RenderContext;
    6.  
    7. const prevDispatcher = pushDispatcher();
    8.  
    9. // 如果fiberRoot变动, 或者update.lane变动, 都会刷新栈帧, 丢弃上一次渲染进度
    10.  
    11. if (workInProgressRoot !== root || workInProgressRootRenderLanes !== lanes) {
    12.  
    13. resetRenderTimer();
    14.  
    15. // 刷新栈帧
    16.  
    17. prepareFreshStack(root, lanes);
    18.  
    19. startWorkOnPendingInteractions(root, lanes);
    20.  
    21. }
    22.  
    23. }
    24.  
    25. /**
    27. 刷新栈帧: 重置 FiberRoot上的全局属性 和 `fiber树构造`循环过程中的全局变量
    29. */
    30.  
    31. function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
    32.  
    33. // 重置FiberRoot对象上的属性
    34.  
    35. root.finishedWork = null;
    36.  
    37. root.finishedLanes = NoLanes;
    38.  
    39. const timeoutHandle = root.timeoutHandle;
    40.  
    41. if (timeoutHandle !== noTimeout) {
    42.  
    43. root.timeoutHandle = noTimeout;
    44.  
    45. cancelTimeout(timeoutHandle);
    46.  
    47. }
    48.  
    49. if (workInProgress !== null) {
    50.  
    51. let interruptedWork = workInProgress.return;
    52.  
    53. while (interruptedWork !== null) {
    54.  
    55. unwindInterruptedWork(interruptedWork);
    56.  
    57. interruptedWork = interruptedWork.return;
    58.  
    59. }
    60.  
    61. }
    62.  
    63. // 重置全局变量
    64.  
    65. workInProgressRoot = root;
    66.  
    67. workInProgress = createWorkInProgress(root.current, null); // 给HostRootFiber对象创建一个alternate, 并将其设置成全局 workInProgress
    68.  
    69. workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;
    70.  
    71. workInProgressRootExitStatus = RootIncomplete;
    72.  
    73. workInProgressRootFatalError = null;
    74.  
    75. workInProgressRootSkippedLanes = NoLanes;
    76.  
    77. workInProgressRootUpdatedLanes = NoLanes;
    78.  
    79. workInProgressRootPingedLanes = NoLanes;
    80.  
    81. }
     

    注意其中的createWorkInProgress(root.current, null), 其参数root.current即HostRootFiber, 作用是给HostRootFiber创建一个alternate副本.workInProgress指针指向这个副本(即workInProgress = HostRootFiber.alternate), 在上文double buffering中分析过, HostRootFiber.alternate是正在构造的fiber树的根节点.
     

    总结
     

    本节是fiber树构造的准备篇, 首先在宏观上从不同的视角(任务调度循环, fiber树构造循环)介绍了fiber树构造在React体系中所处的位置, 然后深入react-reconciler包分析fiber树构造过程中需要使用到的全局变量, 并解读了双缓冲技术和优先级(车道模型)的使用, 最后解释栈帧管理的实现细节. 有了这些基础知识, fiber树构造的具体实现过程会更加简单清晰.
     

     
 
     
  
     
  
     
   
     
    
     
    
     
     
     
     
     
    
     
   
     
  
     
 
     

    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
Java8的SerializedLambda详解                            
    
Java 8 Time API                            
    
基于POI的可快速定制Excel导出脚本设想                            
    
【毕业设计】基于大数据的招聘职业爬取与分析可视化                            
    
Metabase学习教程：提问-6                            
    
基于模板匹配算法的交通标志识别（MATLAB源码）                            
    
前向星(Forward Star)                            
    
时序预测 | MATLAB实现贝叶斯优化CNN-BiLSTM时间序列预测(股票价格预测)                            
    
国外问卷调查赚钱靠谱吗？                            
    
CLIP改进工作串讲（上）                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/weixin_44828588/article/details/126500528
                
    •