How the Fiber architecture works

The previous article summarized the architecture of the new/old Fiber and what problems it could solve.

Let’s take a look at how it works and how to read the source code of the debugger.

The meaning of the Fiber

Meaning:

We know that the old Fiber architecture of React is implemented recursively and relies heavily on the Stack, which is called a Stack Reconciler.

The new Fiber framework relies on Fiber, which is why it is called Fiber Reconciler.

And the Reconciler is the coordinator in React.

Meaning two: as a static data structure

As a static data structure, each Fiber node corresponds to a component, which stores the type of the component and the corresponding DOM node information. In this case, the Fiber node is known as the virtual DOM.

For example, we have an App component:

import React, { useState } from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root")

export default function App() {
    const [num, setNum] = useState(0);
    return (
        <p onClick={() => setNum(num + 1)}>
            sun
            {num}
        </p>
    );
}

ReactDOM.render(
    <App />,
    rootElement
);
Copy the code

In the code above, when we call the reactdom.render method, FiberRootNode is created for the entire application.

Reactdom. render can be called multiple times, and different applications can be attached to different DOM nodes, so each application has its own root Fiber node: RootFiber. There may be multiple RootFibers on a page, managed by a single FiberRootNode.

The functionComponent App creates a corresponding Fiber node, which in this case is of type functionComponent.

Then the child node P of the App will create a Fiber node. This Fiber node is of type HooksComponent, which means the Fiber node corresponding to the native DOM node.

The child of the P node, Sun, creates a text Fiber node, and the sibling of Sun also creates a text Fiber node.

Think about:

We know the general structure of the properties, so how are these nodes connected?

FiberRootNode. Current pointing RootFiber
RootFiber. Child pointing in the direction of the App
App. The child to point p
P.colld points to the Sun text node
Sun.subling points to the num text node
Num. Return to point p

Siblings are connected via the dot subling property, all the way to the last sibling, and the last sibling tells the parent via dot return.

See that the relationship between the child node and the parent node is a return, not a parent, etc.

This is because the old React architecture worked recursively, and the new idea takes advantage of this idea to perform interruptible recursive operations.

Meaning three: as a dynamic unit of work

The Fiber node holds the state that the primary key needs to update, as well as the side effects that need to be performed.

This section will be covered in more detail later when you hit the Debugger.

Let’s look at the following parameters:

The red box is for static data structures:

Tag: primary key type corresponding to Fiber. Examples include FunctionComponent, ClassComponent, and HooksComponent, where HooksComponent refers to the Fiber node corresponding to the DOM node.
Key: This is the key property we often use.
ElementType: The same as type most of the time.
Type: the function itself for FunctionComponent, the class for ClassComponent, and the DOM node tagName for HooksComponent.
StateNode: For HooksComponent refers to the actual DOM node.
Retrun, Child, and Sibling form Fiber tree.
Index: For multiple sibling DOM nodes, represents the index of their insertion into the DOM.

Double cache

Fiber uses a dual-cache approach. Next, double caching.

What is double cache?

We know that animation is shown frame by frame, into continuous animation. So if we want to clear the image of the previous frame before rendering the new one. Before clearing the previous frame, it takes too long to show the next frame, which is when the white screen freezes.

To solve this problem, we can draw the current frame in memory and replace the previous frame with the current frame after drawing. This saves time between substitutions and prevents a blank screen.

This technique, which is built in memory and replaced directly, is called double caching.

React uses dual caches

export default function App() { const [num, setNum] = useState(0); return ( <p onClick={() => setNum(num + 1)}> {num} </p> ); } ReactDOM.render( <App />, ... ) ;Copy the code

We know that FiberRootNode is created when reactdom.render is first called.

Each subsequent call to reactdom.render creates the root node RootFiber for the current application. Fiberrootnode. current indicates the current RootFiber.

Since the page is blank before the first rendering, RootFiber has no byte points.

Here’s the logic for the first screen rendering:

Either the first rendering, the call to this.setState, or the call to the useState method to create the update. Creates a Fiber tree from the root node:

First create the root node of the Fiber tree RootFiber. Fiber nodes that exist in both Fbier trees are connected using alternate properties. This makes it easier to share some properties between the two Fibers.

The entire Fiber tree is then created using depth-first traversal, simulating recursion.

Now we have two Fiber trees. The Fiber tree representing the content of the page on the left is called the Current Fiber tree, and the Fiber tree built in memory due to triggering updates on the right is called the workInProgress Fiber tree.
When the workInProgress Fiber tree is rendered, the current pointer points to the root node of the workInProgress Fiber tree, and the workInProgress Fiber tree becomes the Current Fiber tree.
Once created, the alternate property makes the two trees share each other.

Next we click on the P TAB to trigger an update. Each update triggered recreates a workInProgress Fiber tree.
Re-create the workInProgress Fiber tree based on the Alternate property. In addition to RootFiber, corresponding current Fiber exists in App and P in this update, which are shared through alternate connection.

This process of comparing current Fiber with the JSX structure returned by this update to generate the workInProgress Fiber tree is the Diff algorithm.

So the difference between the first rendering and the update is the use of Diff algorithm.

When the workInProgress Fiber tree is rendered, the current pointer changes to point to the root node of the workInProgress Fiber tree. The workInProgress Fiber tree becomes the Current Fiber tree.

conclusion

The meaning of the Fiber
- Static data structures
- Dynamic units of work
- As an architecture
Fiber data structure
Fiber creation cache working principle

How the Fiber architecture works