function FiberNode( tag: WorkTag, pendingProps: mixed, key: null | string, mode: TypeOfMode,) {// This. Tag = tag; // Fiber corresponds to the Component type, such as Function Component, Class Component, Host Component this.key = key; this.elementType = null; // In most cases, elementType is the same as type. In Function Component cases, elementType is different from type. For Function Component, type is the Function itself; for class Component, type is the class; for Host Component, type is the DOM node tagName this.stateNode = null; Return = null; // For the Host Component, the corresponding real DOM node is used to connect other Fiber nodes to form a Fiber tree. this.child = null; this.sibling = null; this.index = 0; // For multiple sibling nodes, this. Ref = null; // This. PendingProps = pendingProps; this.memoizedProps = null; this.updateQueue = null; this.memoizedState = null; < span style = "box-sizing: border-box! Important; this.mode = mode; For the Host Component, its side effects include adding and deleting DOM nodes. For the Function Component, its side effects represent the useEffect we use. useLayoutEffect this.effectTag = NoEffect; this.nextEffect = null; this.firstEffect = null; this.lastEffect = null; This. Lanes = NoLanes; this.childLanes = NoLanes; // Point to the corresponding fiber this. Alternate = null; }Copy the code

1. Understand what double cache is

The technique of building and replacing directly in memory is called double caching.

React uses “dual caches” to build and replace Fiber trees, which correspond to DOM tree creation and update.

When reactdom.render is first called, FiberRootNode, the root node for the entire application, is created.

Each call to reactdom.render creates the root node RootFiber of the current component tree, with FiberRootNode.current pointing to RootFiber.

Before rendering the first screen, the page is blank, so rootFiber has no byte points.

Then start to get into the logic of the first screen rendering.

A Fiber tree is created from the root node, either in the first rendering, by calling this.setState, or by calling updates created by useState.

First, create the root node RootFiber of the tree. Two RootFiber trees use alternate connection to facilitate the two Fiber trees to share some properties. Then, create the whole Fiber tree by traversing in depth-first mode.

At this point, you have two Fiber trees. The Fiber tree pointed to by FiberRootNode.current becomes the current Fiber tree, which represents the tree shown on the page. Because of the Fiber tree created after triggering the update, it is called the WorkInProgress Fiber tree.

When the WorkInProgress Fiber tree completes rendering, fiberRootNode. current points to the WorkInProgress Fiber tree, and the WorkInProgress Fiber tree becomes the Current Fiber tree.

If an update is triggered by clicking on it, a new WorkInProgress Fiber tree will be rebuilt. And each byte point will have alternate connections to the previous current tree.

This process of comparing current tree with updated JSX object and generating WorkInProgress Fiber tree is called diff algorithm. The biggest difference between the first screen rendering and the update is the diff algorithm.

3. Understand Fiber Reconciler

“Fiber” Reconciler is a new attempt to address the issues inherent in stack Reconciler, while addressing some of the legacy issues from history. Fiber has become the default Reconciler since React 16. Although this is already enabled in React 16, async is not enabled by default.

Its main objectives are:

  • Ability to slice interruptible tasks.
  • Ability to adjust priorities, reset and reuse tasks.
  • The ability to interleave parent and child elements to support layout in React.
  • In therender()To return multiple elements.
  • Better support for error boundaries.