• 【React源码】(十)fiber 树构造(对比更新)

    fiber 树构造(对比更新)

    在前文fiber 树构造(初次创建)一文的介绍中, 演示了fiber树构造循环中逐步构造fiber树的过程. 由于是初次创建, 所以在构造过程中, 所有节点都是新建, 并没有复用旧节点.

    本节讨论对比更新这种情况(在Legacy模式下进行分析). 在阅读本节之前, 最好对fiber 树构造(初次创建)有一些了解, 其中有很多相似逻辑不再重复叙述, 本节重点突出对比更新与初次创建的不同之处.

    本节示例代码如下(codesandbox 地址):

     

    1. import React from 'react';
    2.  
    3. class App extends React.Component {
    4.  
    5. state = {
    6.  
    7. list: ['A', 'B', 'C'],
    8.  
    9. };
    10.  
    11. onChange = () => {
    12.  
    13. this.setState({ list: ['C', 'A', 'X'] });
    14.  
    15. };
    16.  
    17. componentDidMount() {
    18.  
    19. console.log(`App Mount`);
    20.  
    21. }
    22.  
    23. render() {
    24.  
    25. return (
    26.  
    27. <>
    28.  
    29. <Header />
    30.  
    31. <button onClick={this.onChange}>changebutton>
    32.  
    33. <div className="content">
    34.  
    35. {this.state.list.map(item => (
    36.  
    37. <p key={item}>{item}p>
    38.  
    39. ))}
    40.  
    41. div>
    42.  
    44.  
    45. );
    46.  
    47. }
    48.  
    49. }
    50.  
    51. class Header extends React.PureComponent {
    52.  
    53. render() {
    54.  
    55. return (
    56.  
    57. <>
    58.  
    59. <h1>titleh1>
    60.  
    61. <h2>title2h2>
    62.  
    64.  
    65. );
    66.  
    67. }
    68.  
    69. }
    70.  
    71. export default App;
     

    在初次渲染完成之后, 与fiber树相关的内存结构如下(后文以此图为基础, 演示对比更新过程):
     

     

     

    更新入口
     

    前文reconciler 运作流程中总结的 4 个阶段(从输入到输出), 其中承接输入的函数只有scheduleUpdateOnFiber(源码地址).在react-reconciler对外暴露的 api 函数中, 只要涉及到需要改变 fiber 的操作(无论是首次渲染或对比更新), 最后都会间接调用scheduleUpdateOnFiber, scheduleUpdateOnFiber函数是输入链路中的必经之路.
     

    3 种更新方式
     

    如要主动发起更新, 有 3 种常见方式:
     

    1. Class组件中调用setState.
    2. Function组件中调用hook对象暴露出的dispatchAction.
    3. 在container节点上重复调用render(官网示例)
     

    下面列出这 3 种更新方式的源码:
     

    setState
     

    在Component对象的原型上挂载有setState(源码链接):
     

     

     

    1. ​
    2. ​
    3. Component.prototype.setState = function(partialState, callback) {
    4.  
    5. this.updater.enqueueSetState(this, partialState, callback, 'setState');
    6.  
    7. };
    8.  
    9. 在fiber 树构造(初次创建)中的beginWork阶段, class 类型的组件初始化完成之后, this.updater对象如下(源码链接):
    10.  
    11.  
    12. const classComponentUpdater = {
    13.  
    14. isMounted,
    15.  
    16. enqueueSetState(inst, payload, callback) {
    17.  
    18. // 1. 获取class实例对应的fiber节点
    19.  
    20. const fiber = getInstance(inst);
    21.  
    22. // 2. 创建update对象
    23.  
    24. const eventTime = requestEventTime();
    25.  
    26. const lane = requestUpdateLane(fiber); // 确定当前update对象的优先级
    27.  
    28. const update = createUpdate(eventTime, lane);
    29.  
    30. update.payload = payload;
    31.  
    32. if (callback !== undefined && callback !== null) {
    33.  
    34. update.callback = callback;
    35.  
    36. }
    37.  
    38. // 3. 将update对象添加到当前Fiber节点的updateQueue队列当中
    39.  
    40. enqueueUpdate(fiber, update);
    41.  
    42. // 4. 进入reconciler运作流程中的`输入`环节
    43.  
    44. scheduleUpdateOnFiber(fiber, lane, eventTime); // 传入的lane是update优先级
    45.  
    46. },
    47.  
    48. };
    49.  
    50. dispatchAction
    51.  
    52. ​Component.prototype.setState = function(partialState, callback) {
    53.  
    54. this.updater.enqueueSetState(this, partialState, callback, 'setState');
    55.  
    56. };
    57.  
    58. 在fiber 树构造(初次创建)中的beginWork阶段, class 类型的组件初始化完成之后, this.updater对象如下(源码链接):
    59.  
    60.  
    61. const classComponentUpdater = {
    62.  
    63. isMounted,
    64.  
    65. enqueueSetState(inst, payload, callback) {
    66.  
    67. // 1. 获取class实例对应的fiber节点
    68.  
    69. const fiber = getInstance(inst);
    70.  
    71. // 2. 创建update对象
    72.  
    73. const eventTime = requestEventTime();
    74.  
    75. const lane = requestUpdateLane(fiber); // 确定当前update对象的优先级
    76.  
    77. const update = createUpdate(eventTime, lane);
    78.  
    79. update.payload = payload;
    80.  
    81. if (callback !== undefined && callback !== null) {
    82.  
    83. update.callback = callback;
    84.  
    85. }
    86.  
    87. // 3. 将update对象添加到当前Fiber节点的updateQueue队列当中
    88.  
    89. enqueueUpdate(fiber, update);
    90.  
    91. // 4. 进入reconciler运作流程中的`输入`环节
    92.  
    93. scheduleUpdateOnFiber(fiber, lane, eventTime); // 传入的lane是update优先级
    94.  
    95. },
    96.  
    97. };
    98.  
    99. dispatchAction
    100.  
    101. ​
     

     
     

     
 
    此处只是为了对比dispatchAction和setState. 有关hook原理的深入分析, 在hook 原理章节中详细讨论.
     

     

    在function类型组件中, 如果使用hook(useState), 则可以通过hook api暴露出的dispatchAction(源码链接)来更新
     

     

    1. ​
    2. function dispatchAction(
    3.  
    4. fiber: Fiber,
    5.  
    6. queue: UpdateQueue,
    7.  
    8. action: A,
    9.  
    10. ) {
    11.  
    12. // 1. 创建update对象
    13.  
    14. const eventTime = requestEventTime();
    15.  
    16. const lane = requestUpdateLane(fiber); // 确定当前update对象的优先级
    17.  
    18. const update: Update = {
    19.  
    20. lane,
    21.  
    22. action,
    23.  
    24. eagerReducer: null,
    25.  
    26. eagerState: null,
    27.  
    28. next: (null: any),
    29.  
    30. };
    31.  
    32. // 2. 将update对象添加到当前Hook对象的updateQueue队列当中
    33.  
    34. const pending = queue.pending;
    35.  
    36. if (pending === null) {
    37.  
    38. update.next = update;
    39.  
    40. } else {
    41.  
    42. update.next = pending.next;
    43.  
    44. pending.next = update;
    45.  
    46. }
    47.  
    48. queue.pending = update;
    49.  
    50. // 3. 请求调度, 进入reconciler运作流程中的`输入`环节.
    51.  
    52. scheduleUpdateOnFiber(fiber, lane, eventTime); // 传入的lane是update优先级
    53.  
    54. }
    55.  
    56. 重复调用 render
    57.  
    58.  
    59. import ReactDOM from 'react-dom';
    60.  
    61. function tick() {
    62.  
    63. const element = (
    64.  
    65. <div>
    66.  
    67. <h1>Hello, world!h1>
    68.  
    69. <h2>It is {new Date().toLocaleTimeString()}.h2>
    70.  
    71. div>
    72.  
    73. );
    74.  
    75. ReactDOM.render(element, document.getElementById('root'));
    76.  
    77. }
    78.  
    79. setInterval(tick, 1000);
    80.  
    81. 对于重复render, 在React 应用的启动过程中已有说明, 调用路径包含updateContainer-->scheduleUpdateOnFiber
    82.  
    83.  
    84. 构造阶段
    85. 逻辑来到scheduleUpdateOnFiber函数:
    86.  
    87.  
    88. // ...省略部分代码
    89.  
    90. export function scheduleUpdateOnFiber(
    91.  
    92. fiber: Fiber, // fiber表示被更新的节点
    93.  
    94. lane: Lane, // lane表示update优先级
    95.  
    96. eventTime: number,
    97.  
    98. ) {
    99.  
    100. const root = markUpdateLaneFromFiberToRoot(fiber, lane);
    101.  
    102. if (lane === SyncLane) {
    103.  
    104. if (
    105.  
    106. (executionContext & LegacyUnbatchedContext) !== NoContext &&
    107.  
    108. (executionContext & (RenderContext | CommitContext)) === NoContext
    109.  
    110. ) {
    111.  
    112. // 初次渲染
    113.  
    114. performSyncWorkOnRoot(root);
    115.  
    116. } else {
    117.  
    118. // 对比更新
    119.  
    120. ensureRootIsScheduled(root, eventTime);
    121.  
    122. }
    123.  
    124. }
    125.  
    126. mostRecentlyUpdatedRoot = root;
    127.  
    128. }
    129.  
    130. ​
     

    对比更新与初次渲染的不同点:
     

    1. markUpdateLaneFromFiberToRoot函数, 只在对比更新阶段才发挥出它的作用, 它找出了fiber树中受到本次update影响的所有节点, 并设置这些节点的fiber.lanes或fiber.childLanes(在legacy模式下为SyncLane)以备fiber树构造阶段使用.
     

     

    1. function markUpdateLaneFromFiberToRoot(
    2.  
    3. sourceFiber: Fiber, // sourceFiber表示被更新的节点
    4.  
    5. lane: Lane, // lane表示update优先级
    6.  
    7. ): FiberRoot | null {
    8.  
    9. // 1. 将update优先级设置到sourceFiber.lanes
    10.  
    11. sourceFiber.lanes = mergeLanes(sourceFiber.lanes, lane);
    12.  
    13. let alternate = sourceFiber.alternate;
    14.  
    15. if (alternate !== null) {
    16.  
    17. // 同时设置sourceFiber.alternate的优先级
    18.  
    19. alternate.lanes = mergeLanes(alternate.lanes, lane);
    20.  
    21. }
    22.  
    23. // 2. 从sourceFiber开始, 向上遍历所有节点, 直到HostRoot. 设置沿途所有节点(包括alternate)的childLanes
    24.  
    25. let node = sourceFiber;
    26.  
    27. let parent = sourceFiber.return;
    28.  
    29. while (parent !== null) {
    30.  
    31. parent.childLanes = mergeLanes(parent.childLanes, lane);
    32.  
    33. alternate = parent.alternate;
    34.  
    35. if (alternate !== null) {
    36.  
    37. alternate.childLanes = mergeLanes(alternate.childLanes, lane);
    38.  
    39. }
    40.  
    41. node = parent;
    42.  
    43. parent = parent.return;
    44.  
    45. }
    46.  
    47. if (node.tag === HostRoot) {
    48.  
    49. const root: FiberRoot = node.stateNode;
    50.  
    51. return root;
    52.  
    53. } else {
    54.  
    55. return null;
    56.  
    57. }
    58.  
    59. }
     

    markUpdateLaneFromFiberToRoot
     

    下图表示了markUpdateLaneFromFiberToRoot的具体作用:
     

    • 以sourceFiber为起点, 设置起点的fiber.lanes
    • 从起点开始, 直到HostRootFiber, 设置父路径上所有节点(也包括fiber.alternate)的fiber.childLanes.
    • 通过设置fiber.lanes和fiber.childLanes就可以辅助判断子树是否需要更新(在下文循环构造中详细说明).
     

     

    1. 对比更新没有直接调用performSyncWorkOnRoot, 而是通过调度中心来处理, 由于本示例是在Legacy模式下进行, 最后会同步执行performSyncWorkOnRoot.(详细原理可以参考React 调度原理(scheduler)). 所以其调用链路performSyncWorkOnRoot--->renderRootSync--->workLoopSync与初次构造中的一致.
     

    在renderRootSync中:
     

     

    1. function renderRootSync(root: FiberRoot, lanes: Lanes) {
    2.  
    3. const prevExecutionContext = executionContext;
    4.  
    5. executionContext |= RenderContext;
    6.  
    7. // 如果fiberRoot变动, 或者update.lane变动, 都会刷新栈帧, 丢弃上一次渲染进度
    8.  
    9. if (workInProgressRoot !== root || workInProgressRootRenderLanes !== lanes) {
    10.  
    11. // 刷新栈帧, legacy模式下都会进入
    12.  
    13. prepareFreshStack(root, lanes);
    14.  
    15. }
    16.  
    17. do {
    18.  
    19. try {
    20.  
    21. workLoopSync();
    22.  
    23. break;
    24.  
    25. } catch (thrownValue) {
    26.  
    27. handleError(root, thrownValue);
    28.  
    29. }
    30.  
    31. } while (true);
    32.  
    33. executionContext = prevExecutionContext;
    34.  
    35. // 重置全局变量, 表明render结束
    36.  
    37. workInProgressRoot = null;
    38.  
    39. workInProgressRootRenderLanes = NoLanes;
    40.  
    41. return workInProgressRootExitStatus;
    42.  
    43. }
     

    进入循环构造(workLoopSync)前, 会刷新栈帧(调用prepareFreshStack)(参考fiber 树构造(基础准备)中栈帧管理).
     

    此时的内存结构如下:
     

     

    注意:
     

    • fiberRoot.current指向与当前页面对应的fiber树, workInProgress指向正在构造的fiber树.
    • 刷新栈帧会调用createWorkInProgress(), 使得workInProgress.flags和workInProgress.effects都已经被重置. 且workInProgress.child = current.child. 所以在进入循环构造之前, HostRootFiber与HostRootFiber.alternate共用一个child(这里是fiber()).
     

    循环构造
     

    回顾一下fiber 树构造(初次创建)中的介绍. 整个fiber树构造是一个深度优先遍历(可参考React 算法之深度优先遍历), 其中有 2 个重要的变量workInProgress和current(可参考fiber 树构造(基础准备)中介绍的双缓冲技术):
     

    • workInProgress和current都视为指针
    • workInProgress指向当前正在构造的fiber节点
    • current = workInProgress.alternate(即fiber.alternate), 指向当前页面正在使用的fiber节点.
     

    在深度优先遍历中, 每个fiber节点都会经历 2 个阶段:
     

    1. 探寻阶段 beginWork
    2. 回溯阶段 completeWork
     

    这 2 个阶段共同完成了每一个fiber节点的创建(或更新), 所有fiber节点则构成了fiber树.
     

     

    1. function workLoopSync() {
    2.  
    3. while (workInProgress !== null) {
    4.  
    5. performUnitOfWork(workInProgress);
    6.  
    7. }
    8.  
    9. }
    10.  
    11. // ... 省略部分无关代码
    12.  
    13. function performUnitOfWork(unitOfWork: Fiber): void {
    14.  
    15. // unitOfWork就是被传入的workInProgress
    16.  
    17. const current = unitOfWork.alternate;
    18.  
    19. let next;
    20.  
    21. next = beginWork(current, unitOfWork, subtreeRenderLanes);
    22.  
    23. unitOfWork.memoizedProps = unitOfWork.pendingProps;
    24.  
    25. if (next === null) {
    26.  
    27. // 如果没有派生出新的节点, 则进入completeWork阶段, 传入的是当前unitOfWork
    28.  
    29. completeUnitOfWork(unitOfWork);
    30.  
    31. } else {
    32.  
    33. workInProgress = next;
    34.  
    35. }
    36.  
    37. }
     

    注意: 在对比更新过程中current = unitOfWork.alternate;不为null, 后续的调用逻辑中会大量使用此处传入的current.
     

    探寻阶段 beginWork
     

    beginWork(current, unitOfWork, subtreeRenderLanes)(源码地址).
     

     

    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. // 进入对比
    16.  
    17. const oldProps = current.memoizedProps;
    18.  
    19. const newProps = workInProgress.pendingProps;
    20.  
    21. if (
    22.  
    23. oldProps !== newProps ||
    24.  
    25. hasLegacyContextChanged() ||
    26.  
    27. (__DEV__ ? workInProgress.type !== current.type : false)
    28.  
    29. ) {
    30.  
    31. didReceiveUpdate = true;
    32.  
    33. } else if (!includesSomeLane(renderLanes, updateLanes)) {
    34.  
    35. // 当前渲染优先级renderLanes不包括fiber.lanes, 表明当前fiber节点无需更新
    36.  
    37. didReceiveUpdate = false;
    38.  
    39. switch (
    40.  
    41. workInProgress.tag
    42.  
    43. // switch 语句中包括 context相关逻辑, 本节暂不讨论(不影响分析fiber树构造)
    44.  
    45. ) {
    46.  
    47. }
    48.  
    49. // 当前fiber节点无需更新, 调用bailoutOnAlreadyFinishedWork循环检测子节点是否需要更新
    50.  
    51. return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
    52.  
    53. }
    54.  
    55. }
    56.  
    57. // 余下逻辑与初次创建共用
    58.  
    59. // 1. 设置workInProgress优先级为NoLanes(最高优先级)
    60.  
    61. workInProgress.lanes = NoLanes;
    62.  
    63. // 2. 根据workInProgress节点的类型, 用不同的方法派生出子节点
    64.  
    65. switch (
    66.  
    67. workInProgress.tag // 只列出部分case
    68.  
    69. ) {
    70.  
    71. case ClassComponent: {
    72.  
    73. const Component = workInProgress.type;
    74.  
    75. const unresolvedProps = workInProgress.pendingProps;
    76.  
    77. const resolvedProps =
    78.  
    79. workInProgress.elementType === Component
    80.  
    81. ? unresolvedProps
    82.  
    83. : resolveDefaultProps(Component, unresolvedProps);
    84.  
    85. return updateClassComponent(
    86.  
    87. current,
    88.  
    89. workInProgress,
    90.  
    91. Component,
    92.  
    93. resolvedProps,
    94.  
    95. renderLanes,
    96.  
    97. );
    98.  
    99. }
    100.  
    101. case HostRoot:
    102.  
    103. return updateHostRoot(current, workInProgress, renderLanes);
    104.  
    105. case HostComponent:
    106.  
    107. return updateHostComponent(current, workInProgress, renderLanes);
    108.  
    109. case HostText:
    110.  
    111. return updateHostText(current, workInProgress);
    112.  
    113. case Fragment:
    114.  
    115. return updateFragment(current, workInProgress, renderLanes);
    116.  
    117. }
    118.  
    119. }
     

    bailout逻辑 {#bailout}
     

     
 
    bail out英文短语翻译为解救, 纾困, 在源码中, bailout用于判断子树节点是否完全复用, 如果可以复用, 则会略过 fiber 树构造.
     

     

    与初次创建不同, 在对比更新过程中, 如果是老节点, 那么current !== null, 需要进行对比, 然后决定是否复用老节点及其子树(即bailout逻辑).
     

    1. !includesSomeLane(renderLanes, updateLanes)这个判断分支, 包含了渲染优先级和update优先级的比较(详情可以回顾fiber 树构造(基础准备)中优先级相关解读), 如果当前节点无需更新, 则会进入bailout逻辑.
    2. 最后会调用bailoutOnAlreadyFinishedWork: 
  
      • 如果同时满足!includesSomeLane(renderLanes, workInProgress.childLanes), 表明该 fiber 节点及其子树都无需更新, 可直接进入回溯阶段(completeUnitOfWork)
      • 如果不满足!includesSomeLane(renderLanes, workInProgress.childLanes), 意味着子节点需要更新, clone并返回子节点.
     

     

    1. // 省略部分无关代码
    2.  
    3. function bailoutOnAlreadyFinishedWork(
    5. current: Fiber | null,
    7. workInProgress: Fiber,
    9. renderLanes: Lanes,
    11. ): Fiber | null {
    12.  
    13. if (!includesSomeLane(renderLanes, workInProgress.childLanes)) {
    14.  
    15. // 渲染优先级不包括 workInProgress.childLanes, 表明子节点也无需更新. 返回null, 直接进入回溯阶段.
    16.  
    17. return null;
    18.  
    19. } else {
    20.  
    21. // 本fiber虽然不用更新, 但是子节点需要更新. clone并返回子节点
    22.  
    23. cloneChildFibers(current, workInProgress);
    24.  
    25. return workInProgress.child;
    26.  
    27. }
    28.  
    29. }
     

    注意: cloneChildFibers内部调用createWorkInProgress, 在构造fiber节点时会优先复用workInProgress.alternate(不开辟新的内存空间), 否则才会创建新的fiber对象.
     

    updateXXX函数
     

    updateXXX函数(如: updateHostRoot, updateClassComponent 等)的主干逻辑与初次构造过程完全一致, 总的目的是为了向下生成子节点, 并在这个过程中调用reconcileChildren调和函数, 只要fiber节点有副作用, 就会把特殊操作设置到fiber.flags(如:节点ref,class组件的生命周期,function组件的hook,节点删除等).
     

    对比更新过程的不同之处:
     

    1. bailoutOnAlreadyFinishedWork 
  
      • 对比更新时如果遇到当前节点无需更新(如: class类型的节点且shouldComponentUpdate返回false), 会再次进入bailout逻辑.
    2. reconcileChildren调和函数 
  
      • 调和函数是updateXXX函数中的一项重要逻辑, 它的作用是向下生成子节点, 并设置fiber.flags.
      • 初次创建时fiber节点没有比较对象, 所以在向下生成子节点的时候没有任何多余的逻辑, 只管创建就行.
      • 对比更新时需要把ReactElement对象与旧fiber对象进行比较, 来判断是否需要复用旧fiber对象.
     

    注: 本节的重点是fiber树构造, 在对比更新过程中reconcileChildren()函数实现的diff算法十分重要, 但是它只是处于算法层面, 对于diff算法的实现,在React 算法之调和算法中单独分析.
     

    本节只需要先了解调和函数目的:
     

    1. 给新增,移动,和删除节点设置fiber.flags(新增,移动: Placement, 删除: Deletion)
    2. 如果是需要删除的fiber, 除了自身打上Deletion之外, 还要将其添加到父节点的effects链表中(正常副作用队列的处理是在completeWork函数, 但是该节点(被删除)会脱离fiber树, 不会再进入completeWork阶段, 所以在beginWork阶段提前加入副作用队列).
     

    回溯阶段 completeWork
     

    completeUnitOfWork(unitOfWork)函数(源码地址)在初次创建和对比更新逻辑一致, 都是处理beginWork 阶段已经创建出来的 fiber 节点, 最后创建(更新)DOM 对象, 并上移副作用队列.
     

    在这里我们重点关注completeWork函数中, current !== null的情况:
     

     

    1. // ...省略无关代码
    2.  
    3. function completeWork(
    5. current: Fiber | null,
    7. workInProgress: Fiber,
    9. renderLanes: Lanes,
    11. ): Fiber | null {
    12.  
    13. const newProps = workInProgress.pendingProps;
    14.  
    15. switch (workInProgress.tag) {
    16.  
    17. case HostComponent: {
    18.  
    19. // 非文本节点
    20.  
    21. popHostContext(workInProgress);
    22.  
    23. const rootContainerInstance = getRootHostContainer();
    24.  
    25. const type = workInProgress.type;
    26.  
    27. if (current !== null && workInProgress.stateNode != null) {
    28.  
    29. // 处理改动
    30.  
    31. updateHostComponent(
    32.  
    33. current,
    34.  
    35. workInProgress,
    36.  
    37. type,
    38.  
    39. newProps,
    40.  
    41. rootContainerInstance,
    42.  
    43. );
    44.  
    45. if (current.ref !== workInProgress.ref) {
    46.  
    47. markRef(workInProgress);
    48.  
    49. }
    50.  
    51. } else {
    52.  
    53. // ...省略无关代码
    54.  
    55. }
    56.  
    57. return null;
    58.  
    59. }
    60.  
    61. case HostText: {
    62.  
    63. // 文本节点
    64.  
    65. const newText = newProps;
    66.  
    67. if (current && workInProgress.stateNode != null) {
    68.  
    69. const oldText = current.memoizedProps;
    70.  
    71. // 处理改动
    72.  
    73. updateHostText(current, workInProgress, oldText, newText);
    74.  
    75. } else {
    76.  
    77. // ...省略无关代码
    78.  
    79. }
    80.  
    81. return null;
    82.  
    83. }
    84.  
    85. }
    86.  
    87. }
    88.  
    89.  
    90. updateHostComponent = function(
    92. current: Fiber,
    94. workInProgress: Fiber,
    96. type: Type,
    98. newProps: Props,
    100. rootContainerInstance: Container,
    102. ) {
    103.  
    104. const oldProps = current.memoizedProps;
    105.  
    106. if (oldProps === newProps) {
    107.  
    108. return;
    109.  
    110. }
    111.  
    112. const instance: Instance = workInProgress.stateNode;
    113.  
    114. const currentHostContext = getHostContext();
    115.  
    116. const updatePayload = prepareUpdate(
    117.  
    118. instance,
    119.  
    120. type,
    121.  
    122. oldProps,
    123.  
    124. newProps,
    125.  
    126. rootContainerInstance,
    127.  
    128. currentHostContext,
    129.  
    130. );
    131.  
    132. workInProgress.updateQueue = (updatePayload: any);
    133.  
    134. // 如果有属性变动, 设置fiber.flags |= Update, 等待`commit`阶段的处理
    135.  
    136. if (updatePayload) {
    137.  
    138. markUpdate(workInProgress);
    139.  
    140. }
    141.  
    142. };
    143.  
    144. updateHostText = function(
    146. current: Fiber,
    148. workInProgress: Fiber,
    150. oldText: string,
    152. newText: string,
    154. ) {
    155.  
    156. // 如果有属性变动, 设置fiber.flags |= Update, 等待`commit`阶段的处理
    157.  
    158. if (oldText !== newText) {
    159.  
    160. markUpdate(workInProgress);
    161.  
    162. }
    163.  
    164. };
     

    可以看到在更新过程中, 如果 DOM 属性有变化, 不会再次新建 DOM 对象, 而是设置fiber.flags |= Update, 等待commit阶段处理(源码链接).
     

    过程图解
     

    针对本节的示例代码, 将整个fiber树构造过程表示出来:
     

    构造前:
     

    在上文已经说明, 进入循环构造前会调用prepareFreshStack刷新栈帧, 在进入fiber树构造循环之前, 保持这这个初始化状态:
     

     

    performUnitOfWork第 1 次调用(只执行beginWork):
     

    • 执行前: workInProgress指向HostRootFiber.alternate对象, 此时current = workInProgress.alternate指向当前页面对应的fiber树.
    • 执行过程: 
  
      • 因为current !== null且当前节点fiber.lanes不在渲染优先级范围内, 故进入bailoutOnAlreadyFinishedWork逻辑
      • 又因为fiber.childLanes处于渲染优先级范围内, 证明child节点需要更新, 克隆workInProgress.child节点.
      • clone之后, 新fiber节点会丢弃旧fiber上的标志位(flags)和副作用(effects), 其他属性会继续保留.
    • 执行后: 返回被clone的下级节点fiber(), 移动workInProgress指向子节点fiber()
     

     

    performUnitOfWork第 2 次调用(只执行beginWork):
     

    • 执行前: workInProgress指向fiber()节点, 且current = workInProgress.alternate有值
    • 执行过程: 
  
      • 当前节点fiber.lanes处于渲染优先级范围内, 会进入updateClassComponent()函数
      • 在updateClassComponent()函数中, 调用reconcileChildren()生成下级子节点.
    • 执行后: 返回下级节点fiber(
      ), 移动workInProgress指向子节点fiber(
      ) 
       
     

     

    performUnitOfWork第 3 次调用(执行beginWork和completeUnitOfWork):
     

    • beginWork执行前: workInProgress指向fiber(
      ), 且current = workInProgress.alternate有值
    • beginWork执行过程: 
  
      • 当前节点fiber.lanes处于渲染优先级范围内, 会进入updateClassComponent()函数
      • 在updateClassComponent()函数中, 由于此组件是PureComponent, shouldComponentUpdate判定为false,故进入bailoutOnAlreadyFinishedWork逻辑.
      • 又因为fiber.childLanes不在渲染优先级范围内, 证明child节点也不需要更新
    • beginWork执行后: 因为完全满足bailout逻辑, 返回null. 所以进入completeUnitOfWork(unitOfWork)函数, 传入的参数unitOfWork实际上就是workInProgress(此时指向fiber(
      )) 
       
     

     
     

     

    • completeUnitOfWork执行前: workInProgress指向fiber(
      )
    • completeUnitOfWork执行过程: 以fiber(
      )为起点, 向上回溯
     

    completeUnitOfWork第 1 次循环:
     

    1. 执行completeWork函数: class类型的组件无需处理.
    2. 上移副作用队列: 由于本节点fiber(header)没有副作用(fiber.flags = 0), 所以执行之后副作用队列没有实质变化(目前为空).
    3. 向上回溯: 由于还有兄弟节点, 把workInProgress指向下一个兄弟节点fiber(button), 退出completeUnitOfWork.
     

     

     
     

     

    performUnitOfWork第 4 次调用(执行beginWork和completeUnitOfWork):
     

    •  
      beginWork执行过程: 调用updateHostComponent
       
  
      • 本示例中button的子节点是一个直接文本节点,设置nextChildren = null(源码注释的解释是不用在开辟内存去创建一个文本节点, 同时还能减少向下遍历).
      • 由于nextChildren = null, 经过reconcileChildren阶段处理后, 返回值也是null
    •  
      beginWork执行后: 由于下级节点为null, 所以进入completeUnitOfWork(unitOfWork)函数, 传入的参数unitOfWork实际上就是workInProgress(此时指向fiber(button)节点)
       
    •  
      completeUnitOfWork执行过程: 以fiber(button)为起点, 向上回溯
       
     

    completeUnitOfWork第 1 次循环:
     

    1. 执行completeWork函数 
  
      • 因为fiber(button).stateNode != null, 所以无需再次创建 DOM 对象. 只需要进一步调用updateHostComponent()记录 DOM 属性改动情况
      • 在updateHostComponent()函数中, 又因为oldProps === newProps, 所以无需记录改动情况, 直接返回
    2. 上移副作用队列: 由于本节点fiber(button)没有副作用(fiber.flags = 0), 所以执行之后副作用队列没有实质变化(目前为空).
    3. 向上回溯: 由于还有兄弟节点, 把workInProgress指向下一个兄弟节点fiber(div), 退出completeUnitOfWork.
     

     

    performUnitOfWork第 5 次调用(执行beginWork):
     

    • 执行前: workInProgress指向fiber(div)节点, 且current = workInProgress.alternate有值
    • 执行过程: 
  
      • 在updateHostComponent()函数中, 调用reconcileChildren()生成下级子节点.
      • 需要注意的是, 下级子节点是一个可迭代数组, 会把fiber.child.sibling一起构造出来, 同时根据需要设置fiber.flags. 在本例中, 下级节点有被删除的情况, 被删除的节点会被添加到父节点的副作用队列中(具体实现方式请参考React 算法之调和算法).
    • 执行后: 返回下级节点fiber(p), 移动workInProgress指向子节点fiber(p) 
       
     

     

    performUnitOfWork第 6 次调用(执行beginWork和completeUnitOfWork):
     

    •  
      beginWork执行过程: 与第 4 次调用中构建fiber(button)的逻辑完全一致, 因为都是直接文本节点, reconcileChildren()返回的下级子节点为 null.
       
    •  
      beginWork执行后: 由于下级节点为null, 所以进入completeUnitOfWork(unitOfWork)函数
       
    •  
      completeUnitOfWork执行过程: 以fiber(p)为起点, 向上回溯
       
     

    completeUnitOfWork第 1 次循环:
     

    1. 执行completeWork函数 
  
      • 因为fiber(p).stateNode != null, 所以无需再次创建 DOM 对象. 在updateHostComponent()函数中, 又因为节点属性没有变动, 所以无需打标记
    2. 上移副作用队列: 本节点fiber(p)没有副作用(fiber.flags = 0).
    3. 向上回溯: 由于还有兄弟节点, 把workInProgress指向下一个兄弟节点fiber(p), 退出completeUnitOfWork. 
       
     

     

    performUnitOfWork第 7 次调用(执行beginWork和completeUnitOfWork):
     

    •  
      beginWork执行过程: 与第 4 次调用中构建fiber(button)的逻辑完全一致, 因为都是直接文本节点, reconcileChildren()返回的下级子节点为 null.
       
    •  
      beginWork执行后: 由于下级节点为null, 所以进入completeUnitOfWork(unitOfWork)函数
       
    •  
      completeUnitOfWork执行过程: 以fiber(p)为起点, 向上回溯
       
     

    completeUnitOfWork第 1 次循环:
     

    1.  
      执行completeWork函数:
       
  
      • 因为fiber(p).stateNode != null, 所以无需再次创建 DOM 对象. 在updateHostComponent()函数中, 又因为节点属性没有变动, 所以无需打标记
    2.  
      上移副作用队列: 本节点fiber(p)有副作用(fiber.flags = Placement), 需要将其添加到父节点的副作用队列之后.
       
    3.  
      向上回溯: 由于还有兄弟节点, 把workInProgress指向下一个兄弟节点fiber(p), 退出completeUnitOfWork.
       
       
     

     

    performUnitOfWork第 8 次调用(执行beginWork和completeUnitOfWork):
     

    •  
      beginWork执行过程: 本节点fiber(p)是一个新增节点, 其current === null, 会进入updateHostComponent()函数. 因为是直接文本节点, reconcileChildren()返回的下级子节点为 null.
       
    •  
      beginWork执行后: 由于下级节点为null, 所以进入completeUnitOfWork(unitOfWork)函数
       
    •  
      completeUnitOfWork执行过程: 以fiber(p)为起点, 向上回溯
       
     

    completeUnitOfWork第 1 次循环:
     

    1. 执行completeWork函数: 由于本节点是一个新增节点,且fiber(p).stateNode === null, 所以创建fiber(p)节点对应的DOM实例, 挂载到fiber.stateNode之上.
    2. 上移副作用队列: 本节点fiber(p)有副作用(fiber.flags = Placement), 需要将其添加到父节点的副作用队列之后.
    3. 向上回溯: 由于没有兄弟节点, 把workInProgress指针指向父节点fiber(div).
     

     

    completeUnitOfWork第 2 次循环:
     

    1. 执行completeWork函数: 由于div组件没有属性变动, 故updateHostComponent()没有设置副作用标记
    2. 上移副作用队列: 本节点fiber(div)的副作用队列添加到父节点的副作用队列之后.
    3. 向上回溯: 由于没有兄弟节点, 把workInProgress指针指向父节点fiber()
     

    completeUnitOfWork第 3 次循环:
     

    1. 执行completeWork函数: class 类型的节点无需处理
    2. 上移副作用队列: 本节点fiber()的副作用队列添加到父节点的副作用队列之后.
    3. 向上回溯: 由于没有兄弟节点, 把workInProgress指针指向父节点fiber(HostRootFiber)
     

    completeUnitOfWork第 4 次循环:
     

    1. 执行completeWork函数: HostRoot类型的节点无需处理
    2. 向上回溯: 由于父节点为空, 无需进入处理副作用队列的逻辑. 最后设置workInProgress=null, 并退出completeUnitOfWork
    3. 重置fiber.childLanes
     

    到此整个fiber树构造循环(对比更新)已经执行完毕, 拥有一棵新的fiber树, 并且在fiber树的根节点上挂载了副作用队列. renderRootSync函数退出之前, 会重置workInProgressRoot = null, 表明没有正在进行中的render. 且把最新的fiber树挂载到fiberRoot.finishedWork上. 这时整个 fiber 树的内存结构如下(注意fiberRoot.finishedWork和fiberRoot.current指针,在commitRoot阶段会进行处理):
     

     

     

    无论是初次构造或者是对比更新, 当fiber树构造完成之后, 余下的逻辑几乎一致, 在fiber 树渲染中继续讨论.
     

    总结
     

    本节演示了更新阶段fiber树构造(对比更新)的全部过程, 跟踪了创建过程中内存引用的变化情况. 与初次构造最大的不同在于fiber节点是否可以复用, 其中bailout逻辑是fiber子树能否复用的判断依据.
    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
MySQL查询进阶——从函数到表连接的使用你还记得吗                            
    
ABB机器人欧拉角与四元数的相互转化以及旋转矩阵的求法                            
    
ATV71驱动同步电机调试技巧                            
    
Docker Compose命令讲解+文件编写                            
    
（操作系统开发）从实模式----＞保护模式----＞IA-32e模式（ 64位模式)                            
    
SpringBoot 40 个常用注解：让生产力爆表！（荣耀典藏版）                            
    
超低延时4K级可定制化专业视觉计算平台                            
    
Java开发学习(二十五)----使用PostMan完成不同类型参数传递                            
    
电路布线问题动态规划详解（做题思路）                            
    
Spring的ioc的扫描器与bean的作用域与生命周期                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/weixin_44828588/article/details/126501047
                
    •