This article is excerpted from React Technology Debunked

When we explained the new architecture of Act16 in the previous chapter, the virtual DOM we mentioned was officially known as Fiber in React. In the future, we will gradually replace the React16 virtual DOM with Fiber.

Why does Fiber come from? What is his role?

The origin of the Fiber

The first official explanation for Fiber came from a 2016 introduction by Acdlite, a member of the React team.

We know from the previous chapter:

In Reflex 15 and prior to Reconciler, the virtual DOM was created in a recursive manner, a recursive process that cannot be interrupted. If the component tree is deep, recursion can take up a lot of thread time, resulting in lag.

To solve this problem, Act16 refactored the recursive uninterruptible update into an asynchronous interruptible update, since the virtual DOM data structures used for recursion were no longer sufficient. Hence the new Fiber architecture.

The meaning of the Fiber

Fiber has three meanings:

  1. As an architecture, the previous React15 Reconciler is executed recursively, with data stored in a recursive call stack, and is therefore called a Stack Reconciler. The React16 Reconciler is based on Fiber nodes and is called Fiber Reconciler.

  2. As static data structures, each Fiber node corresponds to a component, preserving the type of that component (functional component/class component/native component…). And corresponding DOM nodes.

  3. As a dynamic unit of work, each Fiber node holds the changed state of the component, the work to be performed (need to be removed/inserted into the page/updated…) during this update. .

The structure of the Fiber

You can see the attribute definition of the Fiber node here. Although there are many attributes, we can classify them in three meanings

function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
 key: null | string,  mode: TypeOfMode, ) {  // As properties of static data structures  this.tag = tag;  this.key = key;  this.elementType = null;  this.type = null;  this.stateNode = null;   // It is used to connect other Fiber nodes to form Fiber tree  this.return = null;  this.child = null;  this.sibling = null;  this.index = 0;   this.ref = null;   // Attributes as dynamic units of work  this.pendingProps = pendingProps;  this.memoizedProps = null;  this.updateQueue = null;  this.memoizedState = null;  this.dependencies = null;   this.mode = mode;   this.effectTag = NoEffect;  this.nextEffect = null;   this.firstEffect = null;  this.lastEffect = null;   // Scheduling priorities are related  this.lanes = NoLanes;  this.childLanes = NoLanes;   // Point to the corresponding fiber in another update  this.alternate = null; } Copy the code

As an architecture

Each Fiber node has a component. How do multiple Fiber nodes connect to form a tree? By the following three attributes:

// point to the parent Fiber node
this.return = null;
// Point to the sub-fiber node
this.child = null;
// Point to the first sibling Fiber node on the right
this.sibling = null; Copy the code

For example, the following component structure:

function App() {
  return (
    <div>
      i am
 <span>KaSong</span>  </div>  ) } Copy the code

Corresponding Fiber tree structure:

Why is the parent pointer called return instead of parent or father? Because as a unit of work, return refers to the next node that the node returns after completing the completeWork (described later in this chapter). The child Fiber node and its sibling nodes return to their parent node after completing their work, so return is used to refer to the parent node.

As static data structures

As a static data structure, it holds component-related information:

Function/Class/Host...
this.tag = tag;
/ / the key attribute
this.key = key;
// Most cases are the same as type, but some cases are different, such as FunctionComponent wrapped in react.Memo
this.elementType = null; // For FunctionComponent, the function itself, for ClassCompoent, class, and for HostComponent, DOM node tagName this.type = null; // Fiber corresponds to the actual DOM node this.stateNode = null; Copy the code

As a dynamic unit of work

As a dynamic unit of work, the following parameters in Fiber save the information related to this update, which will be introduced in detail when specific attributes are used in the subsequent update process


// Save the information related to the status change caused by this update
this.pendingProps = pendingProps;
this.memoizedProps = null;
this.updateQueue = null;
this.memoizedState = null; this.dependencies = null;  this.mode = mode;  // Save the DOM operations caused by this update this.effectTag = NoEffect; this.nextEffect = null;  this.firstEffect = null; this.lastEffect = null; Copy the code

The following two fields hold scheduling priority information and will be described when we explain Scheduler.

// Scheduling priorities are related
this.lanes = NoLanes;
this.childLanes = NoLanes;
Copy the code

In May 2020, the scheduling priority policy underwent a major reconstruction. The priority model represented by the expirationTime attribute is replaced by Lane. See this PR for details.

If fiber. ExpirationTime still exists in your source code, please refer to the Debug source section to get the latest code. : : :

conclusion

In this section, we learned about the origin and architecture of Fiber, wherein Fiber nodes can form Fiber trees. How does the Fiber tree relate to the DOM tree rendered on the page, and how does React update the DOM?

We’ll talk about that in the next section.

The resources

Lin Clark – A Cartoon Intro to Fiber – React Conf 2017