FiberNode数据结构注释

function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
  // 作为静态数据结构的属性
  this.tag = tag;  // Fiber对应的逐渐类型，如Function/Class/Host... Component, 其中HostComponent指DOM节点对应的Fiber节点
  this.key = key; // 常用的key属性
  this.elementType = null; // 大部分情况同type，某些情况不同，比如FunctionComponent使用React.memo包裹时，elementType和type不同
  this.type = null; // 对于 FunctionComponent，指函数本身，对于ClassComponent，指class，对于HostComponent，指DOM节点tagName
  this.stateNode = null; // 对于HostComponent来说，指对应的真实DOM节点

  // 用于连接其他Fiber节点形成Fiber树
  this.return = null; // 指向父级Fiber节点
  this.child = null; // 指向子Fiber节点
  this.sibling = null; // 指向右边第一个兄弟Fiber节点
  this.index = 0; // 对于同级的Fiber节点，代表他们插入DOM的位置索引

  this.ref = null; // 常用的ref属性

  // 以下所有的，作为动态的工作单元的属性
  // 其中带有effect表示与副作用相关，对于hostComponent它的副作用包括DOM节点的增删查改，对于FC,副作用表示我们用了useEffect或者useLayoutEffect这两个hook
  this.pendingProps = pendingProps;
  this.memoizedProps = null;
  this.updateQueue = null;
  this.memoizedState = null;
  this.dependencies = null;

  this.mode = mode;

  this.effectTag = NoEffect;
  this.nextEffect = null;

  this.firstEffect = null;
  this.lastEffect = null;

  // 调度优先级相关
  this.lanes = NoLanes;
  this.childLanes = NoLanes;

  // 关系到Fiber架构的工作方式，指向该fiber在另一次更新时对应的fiber
  this.alternate = null;
}