React源碼解析之FiberRoot

1、FiberRoot的含義與做用
（1）FiberRoot是整個React應用的起點
（2）FiberRoot包含應用掛載的目標節點（<div id='root'>root</div>）
（3）FiberRoot記錄整個React應用 更新過程當中的各類信息

2、與RootFiber的關係

FiberRoot.current = RootFiber
RootFiber.stateNode = FiberRoot
複製代碼

3、createFiberRoot()
做用：
初始化fiberRoot和rootFiber

源碼：

//初始化fiberRoot和rootFiber
export function createFiberRoot(
  containerInfo: any,
  tag: RootTag,
  hydrate: boolean,
): FiberRoot {
  //新建fiberRoot對象
  const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);

  // Cyclic construction. This cheats the type system right now because
  // stateNode is any.
  //初始化RootFiber
  const uninitializedFiber = createHostRootFiber(tag);
  //FiberRoot和RootFiber的關係
  //FiberRoot.current = RootFiber
  root.current = uninitializedFiber;
  //RootFiber.stateNode = FiberRoot
  uninitializedFiber.stateNode = root;

  return root;
}
複製代碼

解析：
主要乾了三件事：
（1）建立fiberRoot對象
（2）建立rootFiber對象，請看：React源碼解析之RootFiber
（3）各自之一key的value賦值給對方

4、FiberRootNode()
做用：
新建fiberRoot對象

源碼：

function FiberRootNode(containerInfo, tag, hydrate) {
  this.tag = tag;
  this.current = null;
  this.containerInfo = containerInfo;
  this.pendingChildren = null;
  this.pingCache = null;
  this.finishedExpirationTime = NoWork;
  this.finishedWork = null;
  this.timeoutHandle = noTimeout;
  this.context = null;
  this.pendingContext = null;
  this.hydrate = hydrate;
  this.firstBatch = null;
  this.callbackNode = null;
  this.callbackExpirationTime = NoWork;
  this.firstPendingTime = NoWork;
  this.lastPendingTime = NoWork;
  this.pingTime = NoWork;

  if (enableSchedulerTracing) {
    this.interactionThreadID = unstable_getThreadID();
    this.memoizedInteractions = new Set();
    this.pendingInteractionMap = new Map();
  }
}
複製代碼

因爲BaseFiberRootProperties中定義了fiberRoot的絕大多數屬性，因此咱們直接解析下BaseFiberRootProperties：

type BaseFiberRootProperties = {|
  // The type of root (legacy, batched, concurrent, etc.)
  tag: RootTag,

  // Any additional information from the host associated with this root.
  //root節點，也就是ReactDOM.render(<App />, document.getElementById('root'))的第二個參數
  containerInfo: any,
  // Used only by persistent updates.
  //只有在持久更新中才會用到，也就是不支持增量更新的平臺會用到，react-dom不會用到
  //也就是不更新某一塊地方，而是整個應用徹底更新
  pendingChildren: any,
  // The currently active root fiber. This is the mutable root of the tree.
  //當前應用root節點對應的Fiber對象，即Root Fiber
  //ReactElement會有一個樹結構，同時一個ReactElement對應一個Fiber對象，
  //因此Fiber也會有樹結構
  //current:Fiber對象 對應的是 root 節點，即整個應用根對象
  current: Fiber,

  pingCache:
    | WeakMap<Thenable, Set<ExpirationTime>>
    | Map<Thenable, Set<ExpirationTime>>
    | null,

  //任務有三種，優先級有高低：
  //（1）沒有提交的任務
  //（2）沒有提交的被掛起的任務
  //（3）沒有提交的可能被掛起的任務

  //當前更新對應的過時時間
  finishedExpirationTime: ExpirationTime,
  // A finished work-in-progress HostRoot that's ready to be committed.
  //已經完成任務的FiberRoot對象，若是你只有一個Root，那麼該對象就是這個Root對應的Fiber或null
  //在commit(提交)階段只會處理該值對應的任務
  finishedWork: Fiber | null,
  // Timeout handle returned by setTimeout. Used to cancel a pending timeout, if
  // it's superseded by a new one.
  // 在任務被掛起的時候，經過setTimeout設置的響應內容，
  // 而且清理以前掛起的任務 還沒觸發的timeout
  timeoutHandle: TimeoutHandle | NoTimeout,
  // Top context object, used by renderSubtreeIntoContainer
  //頂層context對象，只有主動調用renderSubtreeIntoContainer纔會生效
  context: Object | null,
  pendingContext: Object | null,
  // Determines if we should attempt to hydrate on the initial mount
  //用來判斷 第一次渲染 是否須要融合
  +hydrate: boolean,
  // List of top-level batches. This list indicates whether a commit should be
  // deferred. Also contains completion callbacks.
  // TODO: Lift this into the renderer
  firstBatch: Batch | null,
  // Node returned by Scheduler.scheduleCallback
  callbackNode: *,
  // Expiration of the callback associated with this root
  //跟root有關聯的回調函數的時間
  callbackExpirationTime: ExpirationTime,
  // The earliest pending expiration time that exists in the tree
  //存在root中，最舊的掛起時間
  //不肯定是否掛起的狀態（全部任務一開始均是該狀態）
  firstPendingTime: ExpirationTime,
  // The latest pending expiration time that exists in the tree
  //存在root中，最新的掛起時間
  //不肯定是否掛起的狀態（全部任務一開始均是該狀態）
  lastPendingTime: ExpirationTime,
  // The time at which a suspended component pinged the root to render again
  //掛起的組件通知root再次渲染的時間
  //經過一個promise被reslove而且能夠從新嘗試的優先級
  pingTime: ExpirationTime,
|};
複製代碼

解析：
熟悉它的屬性及做用，而且【留個印象】就好，大部分屬性在其餘文章中都有用到。

GitHub：
github.com/AttackXiaoJ…

---

（完）