• 【react 源码】（九）fiber 树构造(初次创建) 难 难 难

    fiber 树构造(初次创建)

    本节的内容完全建立在前文fiber 树构造(基础准备)中介绍的基础知识之上, 其中总结了fiber 树构造的 2 种情况:

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

    本节只讨论初次创建这种情况, 为了控制篇幅(本节直击核心源码, 不再介绍基础知识, 可参照fiber 树构造(基础准备))并突出fiber 树构造过程, 后文会在Legacy模式下进行分析(因为只讨论fiber树构造原理, Concurrent模式与Legacy没有区别).

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

     

    1. class App extends React.Component {
    2.  
    3. componentDidMount() {
    4.  
    5. console.log(`App Mount`);
    6.  
    7. console.log(`App 组件对应的fiber节点: `, this._reactInternals);
    8.  
    9. }
    10.  
    11. render() {
    12.  
    13. return (
    14.  
    15. <div className="app">
    16.  
    17. <header>headerheader>
    18.  
    19. <Content />
    20.  
    21. div>
    22.  
    23. );
    24.  
    25. }
    26.  
    27. }
    28.  
    29. class Content extends React.Component {
    30.  
    31. componentDidMount() {
    32.  
    33. console.log(`Content Mount`);
    34.  
    35. console.log(`Content 组件对应的fiber节点: `, this._reactInternals);
    36.  
    37. }
    38.  
    39. render() {
    40.  
    41. return (
    42.  
    43. <React.Fragment>
    44.  
    45. <p>1p>
    46.  
    47. <p>2p>
    48.  
    49. React.Fragment>
    50.  
    51. );
    52.  
    53. }
    54.  
    55. }
    56.  
    57. export default App;
     

    启动阶段
     

    在前文React 应用的启动过程中分析了 3 种启动模式的差异, 在进入react-reconciler包之前(调用updateContainer之前), 内存状态图如下:
     

     

    根据这个结构, 可以在控制台中打出当前页面对应的fiber树(用于观察其结构):
     

     

    document.getElementById('root')._reactRootContainer._internalRoot.current;
     

    然后进入react-reconciler包调用updateContainer 函数:
     

     

    1. // ... 省略了部分代码
    2.  
    3. export function updateContainer(
    5. element: ReactNodeList,
    7. container: OpaqueRoot,
    9. parentComponent: ?React$Component,
    11. callback: ?Function,
    13. ): Lane {
    14.  
    15. // 获取当前时间戳
    16.  
    17. const current = container.current;
    18.  
    19. const eventTime = requestEventTime();
    20.  
    21. // 1. 创建一个优先级变量(车道模型)
    22.  
    23. const lane = requestUpdateLane(current);
    24.  
    25. // 2. 根据车道优先级, 创建update对象, 并加入fiber.updateQueue.pending队列
    26.  
    27. const update = createUpdate(eventTime, lane);
    28.  
    29. update.payload = { element };
    30.  
    31. callback = callback === undefined ? null : callback;
    32.  
    33. if (callback !== null) {
    34.  
    35. update.callback = callback;
    36.  
    37. }
    38.  
    39. enqueueUpdate(current, update);
    40.  
    41. // 3. 进入reconciler运作流程中的`输入`环节
    42.  
    43. scheduleUpdateOnFiber(current, lane, eventTime);
    44.  
    45. return lane;
    46.  
    47. }
     

    由于update对象的创建, 此时的内存结构如下:
     

     

    注意: 最初的ReactElement对象被挂载到HostRootFiber.updateQueue.shared.pending.payload.element中, 后文fiber树构造过程中会再次变动.
     

    构造阶段
     

    为了突出构造过程,排除干扰,先把内存状态图中的FiberRoot和HostRootFiber单独提出来(后文在此基础上添加):
     

     

    在scheduleUpdateOnFiber 函数中:
     

     

    1. // ...省略部分代码
    2.  
    3. export function scheduleUpdateOnFiber(
    5. fiber: Fiber,
    7. lane: Lane,
    9. eventTime: number,
    11. ) {
    12.  
    13. // 标记优先级
    14.  
    15. const root = markUpdateLaneFromFiberToRoot(fiber, lane);
    16.  
    17. if (lane === SyncLane) {
    18.  
    19. if (
    20.  
    21. (executionContext & LegacyUnbatchedContext) !== NoContext &&
    22.  
    23. (executionContext & (RenderContext | CommitContext)) === NoContext
    24.  
    25. ) {
    26.  
    27. // 首次渲染, 直接进行`fiber构造`
    28.  
    29. performSyncWorkOnRoot(root);
    30.  
    31. }
    32.  
    33. // ...
    34.  
    35. }
    36.  
    37. }
     

    可以看到, 在Legacy模式下且首次渲染时, 有 2 个函数markUpdateLaneFromFiberToRoot和performSyncWorkOnRoot.
     

    其中markUpdateLaneFromFiberToRoot(fiber, lane)函数在fiber树构造(对比更新)中才会发挥作用, 因为在初次创建时并没有与当前页面所对应的fiber树, 所以核心代码并没有执行, 最后直接返回了FiberRoot对象.
     

    performSyncWorkOnRoot看起来源码很多, 初次创建中真正用到的就 2 个函数:
     

     

    1. function performSyncWorkOnRoot(root) {
    2.  
    3. let lanes;
    4.  
    5. let exitStatus;
    6.  
    7. if (
    8.  
    9. root === workInProgressRoot &&
    10.  
    11. includesSomeLane(root.expiredLanes, workInProgressRootRenderLanes)
    12.  
    13. ) {
    14.  
    15. // 初次构造时(因为root=fiberRoot, workInProgressRoot=null), 所以不会进入
    16.  
    17. } else {
    18.  
    19. // 1. 获取本次render的优先级, 初次构造返回 NoLanes
    20.  
    21. lanes = getNextLanes(root, NoLanes);
    22.  
    23. // 2. 从root节点开始, 至上而下更新
    24.  
    25. exitStatus = renderRootSync(root, lanes);
    26.  
    27. }
    28.  
    29. // 将最新的fiber树挂载到root.finishedWork节点上
    30.  
    31. const finishedWork: Fiber = (root.current.alternate: any);
    32.  
    33. root.finishedWork = finishedWork;
    34.  
    35. root.finishedLanes = lanes;
    36.  
    37. // 进入commit阶段
    38.  
    39. commitRoot(root);
    40.  
    41. // ...后面的内容本节不讨论
    42.  
    43. }
     

    其中getNextLanes返回本次 render 的渲染优先级(详见fiber 树构造(基础准备)中优先级相关小节)
     

    renderRootSync
     

     

     

    在renderRootSync中, 在执行fiber树构造前(workLoopSync)会先刷新栈帧prepareFreshStack(参考fiber 树构造(基础准备)).在这里创建了HostRootFiber.alternate, 重置全局变量workInProgress和workInProgressRoot等.
     

     

    循环构造
     

    逻辑来到workLoopSync, 虽然本节在Legacy模式下进行讨论, 此处还是对比一下workLoopConcurrent
     

     

    1. function workLoopSync() {
    2.  
    3. while (workInProgress !== null) {
    4.  
    5. performUnitOfWork(workInProgress);
    6.  
    7. }
    8.  
    9. }
    10.  
    11. function workLoopConcurrent() {
    12.  
    13. // Perform work until Scheduler asks us to yield
    14.  
    15. while (workInProgress !== null && !shouldYield()) {
    16.  
    17. performUnitOfWork(workInProgress);
    18.  
    19. }
    20.  
    21. }
     

    可以看到workLoopConcurrent相比于Sync, 会多一个停顿机制, 这个机制实现了时间切片和可中断渲染(参考React 调度原理)
     

    结合performUnitOfWork函数(源码地址)
     

     

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

    可以明显的看出, 整个fiber树构造是一个深度优先遍历(可参考React 算法之深度优先遍历), 其中有 2 个重要的变量workInProgress和current(可参考前文fiber 树构造(基础准备)中介绍的双缓冲技术):
     

    • workInProgress和current都视为指针
    • workInProgress指向当前正在构造的fiber节点
    • current = workInProgress.alternate(即fiber.alternate), 指向当前页面正在使用的fiber节点. 初次构造时, 页面还未渲染, 此时current = null.
     

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

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

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

    探寻阶段 beginWork
     

    beginWork(current, unitOfWork, subtreeRenderLanes)(源码地址)针对所有的 Fiber 类型, 其中的每一个 case 处理一种 Fiber 类型. updateXXX函数(如: updateHostRoot, updateClassComponent 等)的主要逻辑:
     

    1. 根据 ReactElement对象创建所有的fiber节点, 最终构造出fiber树形结构(设置return和sibling指针)
    2. 设置fiber.flags(二进制形式变量, 用来标记 fiber节点 的增,删,改状态, 等待completeWork阶段处理)
    3. 设置fiber.stateNode局部状态(如Class类型节点: fiber.stateNode=new Class())
     

     

    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. // update逻辑, 首次render不会进入
    16.  
    17. } else {
    18.  
    19. didReceiveUpdate = false;
    20.  
    21. }
    22.  
    23. // 1. 设置workInProgress优先级为NoLanes(最高优先级)
    24.  
    25. workInProgress.lanes = NoLanes;
    26.  
    27. // 2. 根据workInProgress节点的类型, 用不同的方法派生出子节点
    28.  
    29. switch (
    30.  
    31. workInProgress.tag // 只保留了本例使用到的case
    32.  
    33. ) {
    34.  
    35. case ClassComponent: {
    36.  
    37. const Component = workInProgress.type;
    38.  
    39. const unresolvedProps = workInProgress.pendingProps;
    40.  
    41. const resolvedProps =
    42.  
    43. workInProgress.elementType === Component
    44.  
    45. ? unresolvedProps
    46.  
    47. : resolveDefaultProps(Component, unresolvedProps);
    48.  
    49. return updateClassComponent(
    50.  
    51. current,
    52.  
    53. workInProgress,
    54.  
    55. Component,
    56.  
    57. resolvedProps,
    58.  
    59. renderLanes,
    60.  
    61. );
    62.  
    63. }
    64.  
    65. case HostRoot:
    66.  
    67. return updateHostRoot(current, workInProgress, renderLanes);
    68.  
    69. case HostComponent:
    70.  
    71. return updateHostComponent(current, workInProgress, renderLanes);
    72.  
    73. case HostText:
    74.  
    75. return updateHostText(current, workInProgress);
    76.  
    77. case Fragment:
    78.  
    79. return updateFragment(current, workInProgress, renderLanes);
    80.  
    81. }
    82.  
    83. }
     

    updateXXX函数(如: updateHostRoot, updateClassComponent 等)虽然 case 较多, 但是主要逻辑可以概括为 3 个步骤:
     

    1. 根据fiber.pendingProps, fiber.updateQueue等输入数据状态, 计算fiber.memoizedState作为输出状态
    2. 获取下级ReactElement对象 
  
      1. class 类型的 fiber 节点 
    
        • 构建React.Component实例
        • 把新实例挂载到fiber.stateNode上
        • 执行render之前的生命周期函数
        • 执行render方法, 获取下级reactElement
        • 根据实际情况, 设置fiber.flags
      2. function 类型的 fiber 节点 
    
        • 执行 function, 获取下级reactElement
        • 根据实际情况, 设置fiber.flags
      3. HostComponent 类型(如: div, span, button 等)的 fiber 节点 
    
        • pendingProps.children作为下级reactElement
        • 如果下级节点是文本节点,则设置下级节点为 null. 准备进入completeUnitOfWork阶段
        • 根据实际情况, 设置fiber.flags
      4. 其他类型...
    3. 根据ReactElement对象, 调用reconcileChildren生成Fiber子节点(只生成次级子节点) 
  
      • 根据实际情况, 设置fiber.flags
     

    不同的updateXXX函数处理的fiber节点类型不同, 总的目的是为了向下生成子节点. 在这个过程中把一些需要持久化的数据挂载到fiber节点上(如fiber.stateNode,fiber.memoizedState等); 把fiber节点的特殊操作设置到fiber.flags(如:节点ref,class组件的生命周期,function组件的hook,节点删除等).
     

    这里列出updateHostRoot, updateHostComponent的代码, 对于其他常用 case 的分析(如class类型, function类型), 在状态组件章节中进行探讨.
     

    fiber树的根节点是HostRootFiber节点, 所以第一次进入beginWork会调用updateHostRoot(current, workInProgress, renderLanes)
     

    1.  
    2. // 省略与本节无关代码
    3.  
    4. function updateHostRoot(current, workInProgress, renderLanes) {
    5.  
    6. // 1. 状态计算, 更新整合到 workInProgress.memoizedState中来
    7.  
    8. const updateQueue = workInProgress.updateQueue;
    9.  
    10. const nextProps = workInProgress.pendingProps;
    11.  
    12. const prevState = workInProgress.memoizedState;
    13.  
    14. const prevChildren = prevState !== null ? prevState.element : null;
    15.  
    16. cloneUpdateQueue(current, workInProgress);
    17.  
    18. // 遍历updateQueue.shared.pending, 提取有足够优先级的update对象, 计算出最终的状态 workInProgress.memoizedState
    19.  
    20. processUpdateQueue(workInProgress, nextProps, null, renderLanes);
    21.  
    22. const nextState = workInProgress.memoizedState;
    23.  
    24. // 2. 获取下级`ReactElement`对象
    25.  
    26. const nextChildren = nextState.element;
    27.  
    28. const root: FiberRoot = workInProgress.stateNode;
    29.  
    30. if (root.hydrate && enterHydrationState(workInProgress)) {
    31.  
    32. // ...服务端渲染相关, 此处省略
    33.  
    34. } else {
    35.  
    36. // 3. 根据`ReactElement`对象, 调用`reconcileChildren`生成`Fiber`子节点(只生成`次级子节点`)
    37.  
    38. reconcileChildren(current, workInProgress, nextChildren, renderLanes);
    39.  
    40. }
    41.  
    42. return workInProgress.child;
    43.  
    44. }
     

    普通 DOM 标签类型的节点(如div,span,p),会进入updateHostComponent:
     

     

    1. // ...省略部分无关代码
    2.  
    3. function updateHostComponent(
    5. current: Fiber | null,
    7. workInProgress: Fiber,
    9. renderLanes: Lanes,
    11. ) {
    12.  
    13. // 1. 状态计算, 由于HostComponent是无状态组件, 所以只需要收集 nextProps即可, 它没有 memoizedState
    14.  
    15. const type = workInProgress.type;
    16.  
    17. const nextProps = workInProgress.pendingProps;
    18.  
    19. const prevProps = current !== null ? current.memoizedProps : null;
    20.  
    21. // 2. 获取下级`ReactElement`对象
    22.  
    23. let nextChildren = nextProps.children;
    24.  
    25. const isDirectTextChild = shouldSetTextContent(type, nextProps);
    26.  
    27. if (isDirectTextChild) {
    28.  
    29. // 如果子节点只有一个文本节点, 不用再创建一个HostText类型的fiber
    30.  
    31. nextChildren = null;
    32.  
    33. } else if (prevProps !== null && shouldSetTextContent(type, prevProps)) {
    34.  
    35. // 特殊操作需要设置fiber.flags
    36.  
    37. workInProgress.flags |= ContentReset;
    38.  
    39. }
    40.  
    41. // 特殊操作需要设置fiber.flags
    42.  
    43. markRef(current, workInProgress);
    44.  
    45. // 3. 根据`ReactElement`对象, 调用`reconcileChildren`生成`Fiber`子节点(只生成`次级子节点`)
    46.  
    47. reconcileChildren(current, workInProgress, nextChildren, renderLanes);
    48.  
    49. return workInProgress.child;
    50.  
    51. }
     

    回溯阶段 completeWork
     

    completeUnitOfWork(unitOfWork)(源码地址), 处理 beginWork 阶段已经创建出来的 fiber 节点, 核心逻辑:
     

    1. 调用completeWork 
  
      • 给fiber节点(tag=HostComponent, HostText)创建 DOM 实例, 设置fiber.stateNode局部状态(如tag=HostComponent, HostText节点: fiber.stateNode 指向这个 DOM 实例).
      • 为 DOM 节点设置属性, 绑定事件(这里先说明有这个步骤, 详细的事件处理流程, 在合成事件原理中详细说明).
      • 设置fiber.flags标记
    2. 把当前 fiber 对象的副作用队列(firstEffect和lastEffect)添加到父节点的副作用队列之后, 更新父节点的firstEffect和lastEffect指针.
    3. 识别beginWork阶段设置的fiber.flags, 判断当前 fiber 是否有副作用(增,删,改), 如果有, 需要将当前 fiber 加入到父节点的effects队列, 等待commit阶段处理.
     

     

    1. ​
    2. function completeUnitOfWork(unitOfWork: Fiber): void {
    3.  
    4. let completedWork = unitOfWork;
    5.  
    6. // 外层循环控制并移动指针(`workInProgress`,`completedWork`等)
    7.  
    8. do {
    9.  
    10. const current = completedWork.alternate;
    11.  
    12. const returnFiber = completedWork.return;
    13.  
    14. if ((completedWork.flags & Incomplete) === NoFlags) {
    15.  
    16. let next;
    17.  
    18. // 1. 处理Fiber节点, 会调用渲染器(调用react-dom包, 关联Fiber节点和dom对象, 绑定事件等)
    19.  
    20. next = completeWork(current, completedWork, subtreeRenderLanes); // 处理单个节点
    21.  
    22. if (next !== null) {
    23.  
    24. // 如果派生出其他的子节点, 则回到`beginWork`阶段进行处理
    25.  
    26. workInProgress = next;
    27.  
    28. return;
    29.  
    30. }
    31.  
    32. // 重置子节点的优先级
    33.  
    34. resetChildLanes(completedWork);
    35.  
    36. if (
    37.  
    38. returnFiber !== null &&
    39.  
    40. (returnFiber.flags & Incomplete) === NoFlags
    41.  
    42. ) {
    43.  
    44. // 2. 收集当前Fiber节点以及其子树的副作用effects
    45.  
    46. // 2.1 把子节点的副作用队列添加到父节点上
    47.  
    48. if (returnFiber.firstEffect === null) {
    49.  
    50. returnFiber.firstEffect = completedWork.firstEffect;
    51.  
    52. }
    53.  
    54. if (completedWork.lastEffect !== null) {
    55.  
    56. if (returnFiber.lastEffect !== null) {
    57.  
    58. returnFiber.lastEffect.nextEffect = completedWork.firstEffect;
    59.  
    60. }
    61.  
    62. returnFiber.lastEffect = completedWork.lastEffect;
    63.  
    64. }
    65.  
    66. // 2.2 如果当前fiber节点有副作用, 将其添加到子节点的副作用队列之后.
    67.  
    68. const flags = completedWork.flags;
    69.  
    70. if (flags > PerformedWork) {
    71.  
    72. // PerformedWork是提供给 React DevTools读取的, 所以略过PerformedWork
    73.  
    74. if (returnFiber.lastEffect !== null) {
    75.  
    76. returnFiber.lastEffect.nextEffect = completedWork;
    77.  
    78. } else {
    79.  
    80. returnFiber.firstEffect = completedWork;
    81.  
    82. }
    83.  
    84. returnFiber.lastEffect = completedWork;
    85.  
    86. }
    87.  
    88. }
    89.  
    90. } else {
    91.  
    92. // 异常处理, 本节不讨论
    93.  
    94. }
    95.  
    96. const siblingFiber = completedWork.sibling;
    97.  
    98. if (siblingFiber !== null) {
    99.  
    100. // 如果有兄弟节点, 返回之后再次进入`beginWork`阶段
    101.  
    102. workInProgress = siblingFiber;
    103.  
    104. return;
    105.  
    106. }
    107.  
    108. // 移动指针, 指向下一个节点
    109.  
    110. completedWork = returnFiber;
    111.  
    112. workInProgress = completedWork;
    113.  
    114. } while (completedWork !== null);
    115.  
    116. // 已回溯到根节点, 设置workInProgressRootExitStatus = RootCompleted
    117.  
    118. if (workInProgressRootExitStatus === RootIncomplete) {
    119.  
    120. workInProgressRootExitStatus = RootCompleted;
    121.  
    122. }
    123.  
    124. }
    125.  
    126. 接下来分析fiber处理函数completeWork
    127.  
    128.  
    129. function completeWork(
    131. current: Fiber | null,
    133. workInProgress: Fiber,
    135. renderLanes: Lanes,
    137. ): Fiber | null {
    138.  
    139. const newProps = workInProgress.pendingProps;
    140.  
    141. switch (workInProgress.tag) {
    142.  
    143. case ClassComponent: {
    144.  
    145. // Class类型不做处理
    146.  
    147. return null;
    148.  
    149. }
    150.  
    151. case HostRoot: {
    152.  
    153. const fiberRoot = (workInProgress.stateNode: FiberRoot);
    154.  
    155. if (fiberRoot.pendingContext) {
    156.  
    157. fiberRoot.context = fiberRoot.pendingContext;
    158.  
    159. fiberRoot.pendingContext = null;
    160.  
    161. }
    162.  
    163. if (current === null || current.child === null) {
    164.  
    165. // 设置fiber.flags标记
    166.  
    167. workInProgress.flags |= Snapshot;
    168.  
    169. }
    170.  
    171. return null;
    172.  
    173. }
    174.  
    175. case HostComponent: {
    176.  
    177. popHostContext(workInProgress);
    178.  
    179. const rootContainerInstance = getRootHostContainer();
    180.  
    181. const type = workInProgress.type;
    182.  
    183. if (current !== null && workInProgress.stateNode != null) {
    184.  
    185. // update逻辑, 初次render不会进入
    186.  
    187. } else {
    188.  
    189. const currentHostContext = getHostContext();
    190.  
    191. // 1. 创建DOM对象
    192.  
    193. const instance = createInstance(
    194.  
    195. type,
    196.  
    197. newProps,
    198.  
    199. rootContainerInstance,
    200.  
    201. currentHostContext,
    202.  
    203. workInProgress,
    204.  
    205. );
    206.  
    207. // 2. 把子树中的DOM对象append到本节点的DOM对象之后
    208.  
    209. appendAllChildren(instance, workInProgress, false, false);
    210.  
    211. // 设置stateNode属性, 指向DOM对象
    212.  
    213. workInProgress.stateNode = instance;
    214.  
    215. if (
    216.  
    217. // 3. 设置DOM对象的属性, 绑定事件等
    218.  
    219. finalizeInitialChildren(
    220.  
    221. instance,
    222.  
    223. type,
    224.  
    225. newProps,
    226.  
    227. rootContainerInstance,
    228.  
    229. currentHostContext,
    230.  
    231. )
    232.  
    233. ) {
    234.  
    235. // 设置fiber.flags标记(Update)
    236.  
    237. markUpdate(workInProgress);
    238.  
    239. }
    240.  
    241. if (workInProgress.ref !== null) {
    242.  
    243. // 设置fiber.flags标记(Ref)
    244.  
    245. markRef(workInProgress);
    246.  
    247. }
    248.  
    249. return null;
    250.  
    251. }
    252.  
    253. }
    254.  
    255. }
    256.  
    257. ​
     

    可以看到在满足条件的时候也会设置fiber.flags, 所以设置fiber.flags并非只在beginWork阶段.
     

    过程图解
     

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

    构造前:
     

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

     

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

    • 执行前: workInProgress指针指向HostRootFiber.alternate对象, 此时current = workInProgress.alternate指向fiberRoot.current是非空的(初次构造, 只在根节点时, current非空).
    • 执行过程: 调用updateHostRoot 
  
    • 执行后: 返回下级节点fiber(), 移动workInProgress指针指向子节点fiber()
     

     

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

    • 执行前: workInProgress指针指向fiber()节点, 此时current = null
    • 执行过程: 调用updateClassComponent 
  
      • 本示例中, class 实例存在生命周期函数componentDidMount, 所以会设置fiber()节点workInProgress.flags |= Update
      • 另外也会为了React DevTools能够识别状态组件的执行进度, 会设置workInProgress.flags |= PerformedWork(在commit阶段会排除这个flag, 此处只是列出workInProgress.flags的设置场景, 不讨论React DevTools)
      • 需要注意classInstance.render()在本步骤执行后, 虽然返回了render方法中所有的ReactElement对象, 但是随后reconcileChildren只构造次级子节点
      • 在reconcileChildren阶段, 向下构造次级子节点div
    • 执行后: 返回下级节点fiber(div), 移动workInProgress指针指向子节点fiber(div)
     

     

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

    • 执行前: workInProgress指针指向fiber(div)节点, 此时current = null
    • 执行过程: 调用updateHostComponent 
  
      • 在reconcileChildren阶段, 向下构造次级子节点(本示例中, div有 2 个次级子节点)
    • 执行后: 返回下级节点fiber(header), 移动workInProgress指针指向子节点fiber(header)
     

     

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

    • beginWork执行前: workInProgress指针指向fiber(header)节点, 此时current = null
    • beginWork执行过程: 调用updateHostComponent 
  
      • 本示例中header的子节点是一个直接文本节点,设置nextChildren = null(直接文本节点并不会被当成具体的fiber节点进行处理, 而是在宿主环境(父组件)中通过属性进行设置. 所以无需创建HostText类型的fiber节点, 同时节省了向下遍历开销.).
      • 由于nextChildren = null, 经过reconcileChildren阶段处理后, 返回值也是null
    • beginWork执行后: 由于下级节点为null, 所以进入completeUnitOfWork(unitOfWork)函数, 传入的参数unitOfWork实际上就是workInProgress(此时指向fiber(header)节点)
     

     

    正在上传…重新上传取消
     

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

    第 1 次循环:
     

    1. 执行completeWork函数 
  
      • 创建fiber(header)节点对应的DOM实例, 并append子节点的DOM实例
      • 设置DOM属性, 绑定事件等(本示例中, 节点fiber(header)没有事件绑定)
    2. 上移副作用队列: 由于本节点fiber(header)没有副作用(fiber.flags = 0), 所以执行之后副作用队列没有实质变化(目前为空).
    3. 向上回溯: 由于还有兄弟节点, 把workInProgress指针指向下一个兄弟节点fiber(), 退出completeUnitOfWork.
     

     

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

    • 执行前:workInProgress指针指向fiber()节点.
    • 执行过程: 这是一个class类型的节点, 与第 2 次调用逻辑一致.
    • 执行后: 返回下级节点fiber(p), 移动workInProgress指针指向子节点fiber(p)
     

     

    performUnitOfWork第 6 次调用(执行beginWork和completeUnitOfWork):与第 4 次调用中创建fiber(header)节点的逻辑一致. 先后会执行beginWork和completeUnitOfWork, 最后构造 DOM 实例, 并将把workInProgress指针指向下一个兄弟节点fiber(p).
     

     

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

    • beginWork执行过程: 与上次调用中创建fiber(p)节点的逻辑一致
    • completeUnitOfWork执行过程: 以fiber(p)为起点, 向上回溯
     

    第 1 次循环:
     

    1. 执行completeWork函数: 创建fiber(p)节点对应的DOM实例, 并append子树节点的DOM实例
    2. 上移副作用队列: 由于本节点fiber(p)没有副作用, 所以执行之后副作用队列没有实质变化(目前为空).
    3. 向上回溯: 由于没有兄弟节点, 把workInProgress指针指向父节点fiber()
     

     

    第 2 次循环:
     

    1. 执行completeWork函数: class 类型的节点不做处理
    2. 上移副作用队列: 
  
      • 本节点fiber()的flags标志位有改动(completedWork.flags > PerformedWork), 将本节点添加到父节点(fiber(div))的副作用队列之后(firstEffect和lastEffect属性分别指向副作用队列的首部和尾部).
    3. 向上回溯: 把workInProgress指针指向父节点fiber(div)
     

     

    第 3 次循环:
     

    1. 执行completeWork函数: 创建fiber(div)节点对应的DOM实例, 并append子树节点的DOM实例
    2. 上移副作用队列: 
  
      • 本节点fiber(div)的副作用队列不为空, 将其拼接到父节点fiber的副作用队列后面.
    3. 向上回溯: 把workInProgress指针指向父节点fiber()
     

     

    第 4 次循环:
     

    1. 执行completeWork函数: class 类型的节点不做处理
    2. 上移副作用队列: 
  
      • 本节点fiber()的副作用队列不为空, 将其拼接到父节点fiber(HostRootFiber)的副作用队列上.
      • 本节点fiber()的flags标志位有改动(completedWork.flags > PerformedWork), 将本节点添加到父节点fiber(HostRootFiber)的副作用队列之后.
      • 最后队列的顺序是子节点在前, 本节点在后
    3. 向上回溯: 把workInProgress指针指向父节点fiber(HostRootFiber)
     

     

    第 5 次循环:
     

    1. 执行completeWork函数: 对于HostRoot类型的节点, 初次构造时设置workInProgress.flags |= Snapshot
    2. 向上回溯: 由于父节点为空, 无需进入处理副作用队列的逻辑. 最后设置workInProgress=null, 并退出completeUnitOfWork
     

     

    正在上传…重新上传取消
     

    到此整个fiber树构造循环已经执行完毕, 拥有一棵完整的fiber树, 并且在fiber树的根节点上挂载了副作用队列, 副作用队列的顺序是层级越深子节点越靠前.
     

    renderRootSync函数退出之前, 会重置workInProgressRoot = null, 表明没有正在进行中的render. 且把最新的fiber树挂载到fiberRoot.finishedWork上. 这时整个 fiber 树的内存结构如下(注意fiberRoot.finishedWork和fiberRoot.current指针,在commitRoot阶段会进行处理):
     

     

    总结
     

    本节演示了初次创建fiber树的全部过程, 跟踪了创建过程中内存引用的变化情况. fiber树构造循环负责构造新的fiber树, 构造过程中同时标记fiber.flags, 最终把所有被标记的fiber节点收集到一个副作用队列中, 这个副作用队列被挂载到根节点上(HostRootFiber.alternate.firstEffect). 此时的fiber树和与之对应的DOM节点都还在内存当中, 等待commitRoot阶段进行渲染.
     

    github地址paiDaXing-web (MXM553341082) · GitHub
     

    求start
    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
实现动态表单的一种思路                            
    
Mybatis-Plus知识点总结(下)                            
    
QT画图板                            
    
HTTP 请求中的请求方法有哪些常见的类型？                            
    
【vue】element强制刷新el-carousel的dom：                            
    
【摸鱼系列】如何用Python做一个有趣的Loading彩蛋游戏~                            
    
微信小程序-上拉加载和下拉刷新                            
    
redis基础操作                            
    
开发自己的Prometheus Exporter、实现自定义指标                            
    
用Rust手把手编写一个Proxy(代理), 动工                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/weixin_44828588/article/details/126500630
                
    •