The first execution of reactdom.render creates fiberRootNode (fiberRoot in the source code) and rootFiber.

fiberRootNode

FiberRootNode is the root of the entire application and is bound to the _reactRootContainer property of the real DOM node. FiberRootNode does not change when reactDom.render is repeatedly called to an element.

//FiberRoot 
const rootFiber= new FiberNode();
const fiberRootNode={
        current: rootFiber,
        containerInfo: containerInfo,
        context: null.pendingContext: null.expirationTime: NoWork,
	.......
 }
rootFiber.stateNode=fiberRootNode
Copy the code

rootFiber

RootFiber is the root node of the component tree where
is located, and rootFiber is rebuilt each time it is re-rendered.

Diff algorithm also works on the rootFiber tree and the current virtual DOM tree.


// Instance
  this.tag = 3; // Different component types
  this.key = null; // react Element key
  this.elementType = null; React Element type
  this.type = null; 'function' or 'class' will return when the async component is resolved
  this.stateNode = null; // Local state related to the current Fiber (e.g. browser environment is DOM node)
  
// Fiber
  this.return = null; // Point to 'parent' in the Fiber tree to return up after processing the node
  this.child = null; // point to your first child node
  this.sibling = null; // Sibling returns refer to the same parent node
  
  this.index = 0;
  this.ref = null; // ref
  this.pendingProps = pendingProps; / / new props
  this.memoizedProps = null; / / the old props
  this.memoizedState = null; / / the old and new state

  this.updateQueue = null; // Updates generated by components of the Fiber are stored in this queue
  
  this.dependencies = null;
  this.mode = mode; // Effects indicates whether the subtree is rendered asynchronously by default

//effect
  this.effectTag = NoEffect; // To record Side Effect
  this.nextEffect = null; // To quickly find the next side effect
  this.firstEffect = null; // First side effect
  this.lastEffect = null; // Last side effect
  
  this.alternate = null; // 'current <==> workInProgress' after rendering they will switch positions, similar to backups for easy reuse
Copy the code

Why do we differentiate

Multiple calls to reactdom. render render different component trees in the application will have different RootFibers, but the entire application will have only one fiberRootNode at the root.

FiberRootNode’s Current points to the Fiber tree corresponding to the rendered content on the current page, i.e. the Current Fiber tree.

fiberRootNode.current = rootFiber;
Copy the code

The resources

  • React.iamkasong.com/process/dou…
  • Github.com/Jarweb/thin…