react源码5-什么是FiberRoot,Fiber,Update

FiberRoot是什么呢，在上一章ReactDom.render的文章里，在主流程里我们有看到这样一个函数createFiberRoot，这个函数主要功能就是返回一个FiberRoot对象。FiberRoot在react16以后的代码里是一个很重要的对象，所以这篇文章主要的目的就是把FiberRoot 、Fiber这个两对象的字段给解释一遍。

export function createFiberRoot(
  containerInfo: any,
  isConcurrent: boolean,
  hydrate: boolean,
): FiberRoot {
  // Cyclic construction. This cheats the type system right now because
  // stateNode is any.
  const uninitializedFiber = createHostRootFiber(isConcurrent); // fiber对象

  let root;
  if (enableSchedulerTracing) {
    root = ({
  // 当前对应的fiber对象
      current: uninitializedFiber,
  // root节点，render方法接收的第二个参数
      containerInfo: containerInfo,
//只有在持久更新里会用到，也就是不支持增量更新的平台，react-dom不会用到
      pendingChildren: null,
// 组件更新的时候用到的各个时间
      earliestPendingTime: NoWork,
      latestPendingTime: NoWork,
      earliestSuspendedTime: NoWork,
      latestSuspendedTime: NoWork,
      latestPingedTime: NoWork,
// 标记应用是否有错误
      didError: false,
// 正在等待任务提交的expirationTime
      pendingCommitExpirationTime: NoWork,
// 在一次更新过程中完成了更新的那个任务
      finishedWork: fiber || null,
// 任务被挂起的时候通过设置settimeout的返回内容
      timeoutHandle: noTimeout,
      context: null,
      pendingContext: null,
      hydrate,
// 当前要更新渲染的是哪个优先级的任务
      nextExpirationTimeToWorkOn: ExpirationTime,
      expirationTime: ExpirationTime,
      firstBatch: null,
      nextScheduledRoot: FiberRoot || null,

      interactionThreadID: unstable_getThreadID(),
      memoizedInteractions: new Set(),
      pendingInteractionMap: new Map(),
    }: FiberRoot);
  } else {
    root = ({
      current: uninitializedFiber,
      containerInfo: containerInfo,
      pendingChildren: null,

      earliestPendingTime: NoWork,
      latestPendingTime: NoWork,
      earliestSuspendedTime: NoWork,
      latestSuspendedTime: NoWork,
      latestPingedTime: NoWork,

      didError: false,

      pendingCommitExpirationTime: NoWork,
      finishedWork: null,
      timeoutHandle: noTimeout,
      context: null,
      pendingContext: null,
      hydrate,
      nextExpirationTimeToWorkOn: NoWork,
      expirationTime: NoWork,
      firstBatch: null,
      nextScheduledRoot: null,
    }: BaseFiberRootProperties);
  }

  uninitializedFiber.stateNode = root;

  // The reason for the way the Flow types are structured in this file,
  // Is to avoid needing :any casts everywhere interaction tracing fields are used.
  // Unfortunately that requires an :any cast for non-interaction tracing capable builds.
  // $FlowFixMe Remove this :any cast and replace it with something better.
  return ((root: any): FiberRoot);
}

什么是Fiber呢

1. 每个ReactElement都对应一个Fiber对象
2. 它会记录节点的各种状态，例如props，state都是挂载在Fiber上的，当Fiber更新后才会带动这些状态的更新，这样的实现方式也给hooks的实现带来了方便，毕竟function组件没有this对象
3. 串联整个应用形成树结构，在ReactElement中react通过props.children串联各个组件，但在Fiber里也有这样的功能。

function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
  // 标记不同的组件类型
  this.tag = tag;
// ReactElement里的key
  this.key = key;
// ReactElement.type，也就是我们调用createElement里的第一个参数
  this.elementType = null;
// 异步组件resolve之后的返回的内容，一般是function或者class
  this.type = null;
  this.stateNode = null;

  // Fiber，指向它节点树里的parent，用来处理完这个节点之后向上返回
  this.return = null;
// 单链表树结构，指向自己的第一个子节点
  this.child = null;
// 指向自己的兄弟节点，兄弟节点的return指向同一个父节点
  this.sibling = null;
  this.index = 0;

  this.ref = null;
// 新的变动带来的心props
  this.pendingProps = pendingProps;
// 上一次渲染完成的props
  this.memoizedProps = null;
// 该Fiber组件产生的update会放在这个队列中
  this.updateQueue = null;
  this.memoizedState = null;
// 一个列表，用来存放context
  this.firstContextDependency = null;

  this.mode = mode;

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

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

  this.expirationTime = NoWork;
  this.childExpirationTime = NoWork;

  this.alternate = null;

  if (enableProfilerTimer) {
    this.actualDuration = 0;
    this.actualStartTime = -1;
    this.selfBaseDuration = 0;
    this.treeBaseDuration = 0;
  }

  if (__DEV__) {
    this._debugID = debugCounter++;
    this._debugSource = null;
    this._debugOwner = null;
    this._debugIsCurrentlyTiming = false;
    if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') {
      Object.preventExtensions(this);
    }
  }
}

什么是Update呢

1. 用于记录组件状态的改变
2. 存放于UpdateUpdateQueue中
3. 多个Update可以同时存在

 function createUpdate(expirationTime: ExpirationTime): Update<*> {
  return {
    expirationTime: expirationTime,
// UpdateState = 0
// ReplaceState = 1
// ForceUpdate = 2  
// CaptureUpdate = 3
// 指定更新的类型 为上面几种
    tag: 0 | 1 | 2 | 3,
// 更新内容，比如setState的第一个参数
    payload: null,
    callback: null,
// 指向下一个更新
    next: null,
// 指向下一个side effect
    nextEffect: null,
  };
}

下面是UpdateQueue

  const queue: UpdateQueue = {
// 每次操作完更新之后的state
    baseState: currentQueue.baseState,
    firstUpdate: currentQueue.firstUpdate,
    lastUpdate: currentQueue.lastUpdate,

    // TODO: With resuming, if we bail out and resuse the child tree, we should
    // keep these effects.
    firstCapturedUpdate: null,
    lastCapturedUpdate: null,

    firstEffect: null,
    lastEffect: null,

    firstCapturedEffect: null,
    lastCapturedEffect: null,
  };