FiberNode

‍

// 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
}

‍## 节点信息

tag

标记了节点的类型，如 HostRoot、HostComponent、HostText、FunctionComponent、ClassComponent、Fragment、Portal、Suspense、ContextProvider、ForwardRef、MemoComponent 等。 具体可以看看 ReactWorkTags.js 文件

export type WorkTag =
  | 0
  | 1
  | 2
  | 3
  | 4
  | 5
  | 6
  | 7
  | 8
  | 9
  | 10
  | 11
  | 12
  | 13
  | 14
  | 15
  | 16
  | 17
  | 18
  | 19
  | 20
  | 21
  | 22
  | 23
  | 24
  | 25;

export const FunctionComponent = 0;
export const ClassComponent = 1;
export const IndeterminateComponent = 2; // Before we know whether it is function or class
export const HostRoot = 3; // Root of a host tree. Could be nested inside another node.
export const HostPortal = 4; // A subtree. Could be an entry point to a different renderer.
export const HostComponent = 5;
export const HostText = 6;
export const Fragment = 7;
export const Mode = 8;
export const ContextConsumer = 9;
export const ContextProvider = 10;
export const ForwardRef = 11;
export const Profiler = 12;
export const SuspenseComponent = 13;
export const MemoComponent = 14;
export const SimpleMemoComponent = 15;
export const LazyComponent = 16;
export const IncompleteClassComponent = 17;
export const DehydratedFragment = 18;
export const SuspenseListComponent = 19;
export const ScopeComponent = 21;
export const OffscreenComponent = 22;
export const LegacyHiddenComponent = 23;
export const CacheComponent = 24;
export const TracingMarkerComponent = 25;

注意

1. 对于我们常用的元素节点 div、span、p 等，其对应的 tag 都是 HostComponent，其具体属于什么元素节点是根据 elementType 来判断的。
2. 这个类型是在代码编译的时候，由 React.jsx 方法来生成的，具体可以看看 React.jsx 方法。

type

表示 Fiber 节点的类型，可以是字符串（对应原生 DOM 标签），也可以是函数/类（对应 React 组件）。

• <div /> 对应的 type 是 "div"。
• <MyComponent /> 对应的 type 是 MyComponent 函数/类。

stateNode

表示 Fiber 节点对应的真实 DOM 节点或组件实例。

• 对于 HostRoot 节点，stateNode 是 FiberRootNode。
• 对于 HostComponent 节点，stateNode 是对应的 DOM 节点。
• 对于 ClassComponent 节点，stateNode 是对应的组件实例 （instnce 对象）。
• 对于 FunctionComponent 节点，stateNode 是 null。
• 对于其他类型的节点，stateNode 是 null。

elementType

key