This article is excerpted from React Technology Debunked

In the previous section, we learned what Fiber is and that the Fiber node can hold the corresponding DOM node.

Accordingly, the Fiber tree formed by Fiber nodes corresponds to the DOM tree.

So how do you update the DOM? This requires a technique known as “double caching”.

What is “Double cache”?

When drawing animation with canvas, ctx.clearRect will be called before drawing each frame to clear the previous frame. If the current frame has a large amount of computation, resulting in a long gap between clearing the previous frame and drawing the current frame, a white screen flicker will appear.

In order to solve this problem, we can draw the current frame animation in memory, and directly replace the previous frame with the current frame after drawing, because of saving the calculation time between the two frame replacement, will not appear from white screen to screen flicker.

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

React uses a “dual cache” to build and replace Fiber trees — which correspond to DOM tree creation and updates.

Double cache Fiber tree

In React, at most two Fiber trees will exist at the same time. The Fiber tree corresponding to the content displayed on the current screen is called the Current Fiber tree, and the Fiber tree being constructed in memory is called the workInProgress Fiber tree.

The Fiber nodes in the current Fiber tree are called current Fiber, and the Fiber nodes in the workInProgress Fiber tree are called workInProgress Fiber, and they are connected via the alternate property.

currentFiber.alternate === workInProgressFiber;
workInProgressFiber.alternate === currentFiber;
Copy the code

The React root node uses the current pointer to switch between rootFibers of different Fiber trees to switch between Fiber trees.

After the workInProgress Fiber tree is built and rendered by Renderer on the page, apply the current pointer of the root node to the workInProgress Fiber tree. The workInProgress Fiber tree becomes the Current Fiber tree.

Each status update generates a new workInProgress Fiber tree, and DOM updates are completed by replacing current with workInProgress.

Let’s take a concrete example of the build/replace process at mount and Update time.

When the mount

Consider the following example:

function App() {
  const [num, add] = useState(0);
  return (
    <p onClick={()= > add(num + 1)}>{num}</p>
  )
}  ReactDOM.render(<App/>.document.getElementById('root')); Copy the code
  1. For the first time to performReactDOM.renderWill createrootFiberNodeandrootFiber. Among themrootFiberNodeIs the root node of the entire application,rootFiberis<App/>The root node of the component tree.

The reason to distinguish rootFiberNode from rootFiber is that in our application we can call reactdom. render multiple times to render different component trees, which will have different rootFiber. However, there is only one root node in the entire application, rootFiberNode.

rootfiber
// current points to the root fiber of the current fiber tree
rootFiberNode.current = rootFiber;
Copy the code

Since this is the first screen rendering, there is no DOM in the page yet. Rootfiber. child === null, that is, the current Fiber tree is empty.

  1. Let’s go inRender phaseCreate them in sequence in memoryworkInProgress fiberAnd build it all togetherWorkInProgress Fiber tree. (On the right is the tree built in memory, on the left is the tree displayed on the page)
workInProgressFiber
  1. Already built on the rightWorkInProgress Fiber treeinThe commit phaseRender to the page. At this timeDOMUpdate it to look like the tree on the right.rootFiberNodethecurrentPointer toWorkInProgress Fiber treeMake it into aThe current Fiber tree.
workInProgressFiberFinish

When the update

  1. So let’s clickP nodesTrigger a state change, which opens a new oneRender phaseAnd build a treeWorkInProgress Fiber tree.
wipTreeUpdate

Many of these workInProgress fibers can be created to reuse the node data corresponding to the Current Fiber tree.

This process for deciding whether to reuse is called the Diff algorithm, which is explained in more detail in a later section

  1. WorkInProgress Fiber treeinRender phaseEnter after the build is completeThe commit phaseRender to the page. After rendering,WorkInProgress Fiber treeintoThe current Fiber tree.

conclusion

This article describes the process of building and replacing the Fiber tree, which is accompanied by DOM updates.

So how is each Fiber node created during the build? We’ll talk about that in the next section.