Fiber 概念

export type Fiber = {
  /** ⬇️作为静态数据结构的属性 */

  // FiberNode 组件类型 -> ReactWorkTags.js 如FunctionComponent, ClassComponent, HostComponent
  tag: WorkTag
  // unique key
  key: null | string
  // 约等于 type
  elementType: any
  // 异步加载的组件解析后的类型
  // FunctionComponent=function , ClassComponent = Class, HostComponent = div
  type: any
  // Node储存空间，通过 stateNode 绑定如 FiberNode 对应的 Dom、FiberRoot、ReactComponent 实例
  // DOM 组件对应 DOM 节点实例
  // ClassComponent 对应 Class 实例
  // FunctionComponent 没有实例，所以 stateNode 值为 null
  // state 更新了或 props 更新了均会更新到 stateNode 上
  stateNode: any

  /** ⬇️用于连接其他Fiber节点形成Fiber树 */

  // fiber 的 parent
  return: Fiber | null
  // fiber 的第一个子节点
  child: Fiber | null
  // fiber 的下一个兄弟节点
  sibling: Fiber | null
  index: number
  // fiber 的 ref
  ref: null | (((handle: mixed) => void) & { _stringRef: ?string }) | RefObject

  /** 动态工作单元 */
  // 即将到来的新 props，即 nextProps
  pendingProps: any
  // 上一次渲染完成后的 props，即当前的 props
  memoizedProps: any
  // fiber 对应的组件产生的 Update 会存在队列里
  updateQueue: UpdateQueue<any> | null
  // 上一次渲染处理之后的 state
  memoizedState: any
  // 一个列表，存储该Fiber依赖的contexts，events
  dependencies: Dependencies | null
  // mode有 ConcurrentMode 和 StrictMode
  mode: TypeOfMode // constant -> TypeOfMode

  /** Effect */
  flags: Flags
  subtreeFlags: Flags
  // diff 阶段标记的需要删除的节点
  deletions: Array<Fiber> | null
  // 单链表 用来快速查找下一个 effect
  nextEffect: Fiber | null
  // 第一个和最后一个 effect，
  firstEffect: Fiber | null
  lastEffect: Fiber | null
  // 调度优先级
  lanes: Lanes
  childLanes: Lanes
  // 在 fiber 树更新的过程中，都会有一个跟其对应的 fiber 镜像
  // 我们称他为`current <==> workInProgress`
  // 在渲染完成之后他们会交换位置
  alternate: Fiber | null
}