FiberNode

‍
json
// FiberNode
{
  // Instance
  // 看 react-reconciler\src\ReactWorkTags.js
  // 类型 WorkTag
  // 如  HostRoot = 3 根节点的FiberNode 类型
  //    HostComponent = 5 组件根节点类型
  "tag": 3, // WorkTag

  // 写在 jsx 组件上的 key 属性
  "key": null,
  // createElement的第一个参数，ReactElement 上的 type
  "elementType": null,
  // 暂时可认为与 elementType 基本一致
  "type": null,
  // fiber 节点对应的 DOM 节点
  // 如 createRoot的时候 此属性保存的是根节点的FiberRootNode对象
  "stateNode": null,

  // Fiber
  // 指向父节点
  "return": null,
  // 指向第一个子节点
  "child": null,
  // 指向兄弟节点
  "sibling": null,
  // 一般如果没有兄弟节点的话是 0 当某个父节点下的子节点是数组类型的时候会给每个子节点一个 index
  "index": 0,

  // 保存 ref 属性对象
  "ref": null,

  // 新的 props 对象
  "pendingProps": null,
  // 现有的 props 对象
  "memoizedProps": null,
  // 保存更新对象的队列
  // 在 initializeUpdateQueue 初始化更新对象
  "updateQueue": {
    "baseState": null,
    "firstBaseUpdate": null,
    "lastBaseUpdate": null,
    "shared": {
      // 带处理的 Update对象
      // const update: Update<*> =  {
      //   eventTime,
      //   lane,

      //   tag: UpdateState,
      //   payload: null,
      //   callback: null,
          // 如果处理的时候发现pending有值 那么就将原来的 pengding.next === update.next
          // 这样就形成了 pengding.next.next这样的 update 链表
      //   next: null, 
      //  
      // }
      "pending": null,
      "lanes": 1,
      "hiddenCallbacks": null
    },
    "callbacks": null
  },
  // 现有的 state 对象
  "memoizedState": null,
  // 依赖对象
  "dependencies": null,

  // 渲染方式
  // React 18 默认是 `ConcurrentMode`: 0b000001
  // packages/react-reconciler/src/ReactTypeOfMode.js 文件中定义
  "mode": 1,

  // Effects
  // effect 的 Flag，表明当前的 effect 是`替换`/ `更新` / `删除` 等操作
  // packages/react-reconciler/src/ReactFiberFlags.js
  "flags": null,
  // 子树的 Flag 合集
  "subtreeFlags": null,
  // 需要删除的 fiber 节点
  "deletions": null,

  // 更新渲染调度优先级相关
  // packages/react-reconciler/src/ReactFiberLane.old.js 文件中定义
  "lanes": null,
  "childLanes": null,

  // current 树和 workInprogress 树之间的相互引用
  // current 树就是当前的 Fiber 树
  // workInprogress 树 就是正在更新的 Fiber 树
  // 后续讲到组件更新会详细讲到
  "alternate": null
}
‍
FiberNode ​

FiberNode
