FiberRoot contains the target node (

root

) on which the application is mounted. FiberRoot records the entire React application Update various information in the process

Ii. Relationship with RootFiber

FiberRoot.current = RootFiber

RootFiber.stateNode = FiberRoot

Copy the code

CreateFiberRoot () Initialize fiberRoot and rootFiber

Source:

Initialize fiberRoot and rootFiber

export function createFiberRoot(

  containerInfo: any,

  tag: RootTag,

  hydrate: boolean,

) :FiberRoot {

  // Create a fiberRoot object

  const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);



  // Cyclic construction. This cheats the type system right now because

  // stateNode is any.

  // Initialize RootFiber

  const uninitializedFiber = createHostRootFiber(tag);

  //FiberRoot and RootFiber relationship

  //FiberRoot.current = RootFiber

  root.current = uninitializedFiber;

  //RootFiber.stateNode = FiberRoot

  uninitializedFiber.stateNode = root;



  return root;

}

Copy the code

React (1) Create fiberRoot object (2) create FiberFiber object (3) Assign the value of each key to the other

4. FiberRootNode() Role: Create a fiberRoot object

Source:

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();

  }

}

Copy the code

Since most of the fiberRoot properties are defined in BaseFiberRootProperties, let’s parse BaseFiberRootProperties directly:

type BaseFiberRootProperties = {|

  // The type of root (legacy, batched, concurrent, etc.)

  tag: RootTag,



  // Any additional information from the host associated with this root.

  //root, the second argument to reactdom.render (
       , document.getelementByid ('root'))

  containerInfo: any,

  // Used only by persistent updates.

  // Only for persistent updates, i.e. for platforms that do not support incremental updates. React-dom is not used

  // Instead of updating a single area, the entire application is completely updated

  pendingChildren: any,

  // The currently active root fiber. This is the mutable root of the tree.

  // The Fiber object corresponding to the current root node is root Fiber

  //ReactElement has a tree structure, and a ReactElement corresponds to a Fiber object.

  // So Fiber also has a tree structure

  // The current:Fiber object corresponds to the root node, i.e. the entire application root object

  current: Fiber,



  pingCache:

    | WeakMap<Thenable, Set<ExpirationTime>>

    | Map<Thenable, Set<ExpirationTime>>

    | null.



  // There are three types of tasks, with higher or lower priorities:

  // (1) No submitted task

  // (2) No pending task submitted

  // (3) There are no submitted tasks that could be suspended



  // The expiration time of the current update

  finishedExpirationTime: ExpirationTime,

  // A finished work-in-progress HostRoot that's ready to be committed.

  If you have only one Root, that object is Fiber or null for that Root

  // Only the tasks corresponding to this value are processed during the COMMIT phase

  finishedWork: Fiber | null.

  // Timeout handle returned by setTimeout. Used to cancel a pending timeout, if

  // it's superseded by a new one.

  // Set the response content with setTimeout when the task is suspended,

  // And clear the timeout that has not been triggered by the previously suspended task

  timeoutHandle: TimeoutHandle | NoTimeout,

  // Top context object, used by renderSubtreeIntoContainer

  / / the top-level context object, only take the initiative to call renderSubtreeIntoContainer will only take effect

  context: Object | null.

  pendingContext: Object | null.

  // Determines if we should attempt to hydrate on the initial mount

  // it is used to determine whether fusion is needed for the first rendering

  +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

  // The time of the callback function associated with root

  callbackExpirationTime: ExpirationTime,

  // The earliest pending expiration time that exists in the tree

  // The oldest suspension time exists in root

  // Indeterminate pending state (all tasks start with this state)

  firstPendingTime: ExpirationTime,

  // The latest pending expiration time that exists in the tree

  // Stored in root, the latest suspension time

  // Indeterminate pending state (all tasks start with this state)

  lastPendingTime: ExpirationTime,

  // The time at which a suspended component pinged the root to render again

  // The suspended component notifies root when to render again

  // Priority is resloved through a promise and can be retried

  pingTime: ExpirationTime,

|};

Copy the code

3. Be familiar with its properties and functions, and leave an impression. Most of the properties are useful in other articles.

Making: github.com/AttackXiaoJ…

(after)