What is Fiber

function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
  // Instance
  // 作为静态数据结构的属性
  this.tag = tag; // 对应的组件类型FunctionComponent,ClassComponent,HooksComponent(DOM结点对应的Fiber结点)
  this.key = key; // 我们常用的元素key
  this.elementType = null; // 大部分情况下elementType与type相同，在某些情况下，比如FunctionComponent使用React.Memo包裹时，两者不同
  this.type = null; // 对于FunctionComponent是函数本身，对于ClassComponent是class，对于HooksComponent是DOM结点的TagName
  this.stateNode = null; // 对于HooksComponent是是它真实对应的DOM结点

  // Fiber
  // 用于连接其他Fiber节点形成Fiber树
  this.return = null;
  this.child = null;
  this.sibling = null;
  // 对于多个同级Fiber节点，代表他们插入DOM的位置索引
  this.index = 0;
  // 就是我们常用的ref属性
  this.ref = null;

  // 从这里往下，都是作为动态的工作单元的属性
  this.pendingProps = pendingProps;
  this.memoizedProps = null;
  this.updateQueue = null;
  this.memoizedState = null;
  this.dependencies = null;

  this.mode = mode;

  // Effects
  // 名称中带有Effect代表副作用相关，对于HostComponent副作用包括DOM节点的增删查改，
  // 对于FunctionComponent副作用代表了我们使用useEffect或者useLayoutEffect这两个hook
  this.effectTag = NoEffect;
  this.nextEffect = null;

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

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

  // 指向该fiber在另一次更新时对应的fiber
  this.alternate = null;
  ......
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

export type PriorityLevel = 0 | 1 | 2 | 3 | 4 | 5;

// TODO: Use symbols?
// 初始化时的无优先级
export const NoPriority = 0;

// 立刻执行的优先级，也就是同步的优先级，react中最高优的优先级
export const ImmediatePriority = 1;

// 由用户触发的更新，比如在点击事件回调onClick触发了this.setState,
//那么这个this.setState创建的Update就是此优先级
export const UserBlockingPriority = 2;

// 比如在应用中请求服务的数据，数据返回时更新状态，这里的更新就是此优先级
export const NormalPriority = 3;

// Suspense就是
export const LowPriority = 4;

// 空闲的优先级
export const IdlePriority = 5;