React 源码 - ReactDOM.render 中注意的点

概述

本文主要记录一下 React 渲染过程中需要注意的点

注意

1. ReactDOM 模式

   • legacy 模式
   • blocking 模式
   • concurrent 模式

2. 两棵树

   
   
   两棵树

3. lane => 更新优先级

4. flags => 掩码

5. 渲染阶段
   a. render 阶段
   b. commit 阶段

6. render phase
   DFS => Depth-First-Search

   performUnitOfWork => update WorkInProgress
   beginWork => 返回 child + bailoutOnAlreadyFinishedWork
   completeUnitWork
   completeWork
   

7. completeUnitOfWork
   循环调用 completeWork
   跳出循环在于 sibling，如果有 sibling 则 return

8. completeWork
   return null

9. commit phase
   分为以下阶段
   a. Before Mutation 前 Phase
   b. Before Mutation Phase
   c. Mutation Phase
   d. Layout Phase
   e. After Layout Phase

10. Before Mutation Phase
    执行 commitBeforeMutationEffects 函数 [循环遍历 Effect List]
    => 读取 host tree 状态 + call getSnapshotBeforeUpdate

11. Mutation Phase
    执行 commitMutationEffects 函数 [循环遍历 Effect List] => 执行 DOM 操作
    a. reset Text
    b. 更新 ref(flags & Ref === true) => commitDetachRef
    c. 根据 flags 分别处理

    • Update => commitWork
      条件 finishedWork.tag
      === FunctionComponent => commitHookEffectListUnmount => 递归调度 effect destroy 函数
      === HostComponent => commitUpdate => updateFiberProps + updateProperties[在 DOM 节点应用 diff]

    • Deletion => commitDeletion

      1. 递归地删除节点
      2. 清除 ref
      3. 调用 componentWillUnmount
      4. 调度 destroy 函数

    • Placement => commitPlacement

      1. 获取父级 DOM 节点
      2. 获取 Fiber 节点的 DOM 兄弟节点
      3. 若 parentFiber.tag === HostRoot | HostPortal => insetOrAppendPlacementNodeIntoContainer
      4. 若 parentFiber.tag !== HostRoot | HostPortal => insetOrAppendPlacementNode

12. Layout Phase
    执行 commitLayoutEffects 函数 [循环遍历 Effect List] => DOM 渲染完成后，触发生命周期钩子 + Hooks 可以访问到 DOM
    a. nextEffect.flags & (Update | Callback) => commitLayoutEffectOnFiber === commitLifeCycles => 调用声明周期函数 + Hook 相关
    b. nextEffect.flags & Ref => commitAttachRef => 赋值 Ref

13. 源码中的 ReactFiberHostConfig.js 文件 === ReactDOMHostConfig.js 文件