关于 react 的 fiberRoot 和 fiber结构

fiberRoot

// 在 react 应用渲染的初段就会创建，用以描述整个应用的执行
{
    current: uninitializedFiber,  // rootFiber fiber树的根
    containerInfo: containerInfo, // html模板中的根div
    pendingChildren: null,
    // 过期时间，调度相关
    earliestPendingTime: NoWork,
    latestPendingTime: NoWork,
    earliestSuspendedTime: NoWork,
    latestSuspendedTime: NoWork,
    latestPingedTime: NoWork,
  
    pendingCommitExpirationTime: NoWork,
    finishedWork: null,
    timeoutHandle: noTimeout,
    context: null,
    pendingContext: null,
    hydrate,
    nextExpirationTimeToWorkOn: NoWork,
    expirationTime: NoWork,
    firstBatch: null,
    nextScheduledRoot: null,
}

fiber

// react 的每个组件都对应一个fiber对象，上面记录了很多关于这个组件的状态，副作用，是否使用context等信息
{
    this.tag = tag;  // 组件tag
    this.key = key;  // diff
    this.elementType = null;
    this.type = null; // 组件的值
    this.stateNode = null; // fiberRoot
  
    // Fiber 链条（react的渲染其实就是在遍历这课fiber树）
    this.return = null;
    this.child = null;
    this.sibling = null;
    this.index = 0;
    
    this.ref = null;
    // 新旧 props state
    this.pendingProps = pendingProps;
    this.memoizedProps = null;
    // setState useState 批量更新的关键
    this.updateQueue = null;
    this.memoizedState = null;
    // 当前组件是否使用过祖先的context，提升更新的性能
    this.firstContextDependency = null;
  
    this.mode = mode;
  
    // Effects 副作用，useEffect
    this.effectTag = NoEffect;
    this.nextEffect = null;
  
    this.firstEffect = null;
    this.lastEffect = null;
  
    // 组件更新的过期时间，和调度相关
    this.expirationTime = NoWork;
    this.childExpirationTime = NoWork;
  
    this.alternate = null;
}