React technology reveals 2-2 double cache mechanism

React technology reveals 2-2 double cache mechanism

This article is excerpted from the secrets of React technology

Through the study in the previous section, we understand Fiberwhat it is and know that we Fiber can save the corresponding DOM .

Correspondingly, what Fiber constitutes Fiber corresponds DOM .

So how to update DOMit? This requires the use of a technique called "double buffering".

What is "double buffering"

When we use canvasdrawing animation, we will call to ctx.clearRectclear the previous frame before drawing each frame . If the calculation amount of the current frame is relatively large, resulting in a long gap between clearing the previous frame and drawing the current frame, white screen flickering will occur.

In order to solve this problem, we can draw the current frame of animation in the memory, and directly replace the previous frame with the current frame after drawing. Since the calculation time between two frame replacements is omitted, there will be no change from the white screen to the screen appearing. Flicker situation.

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

ReactUse "double cache" to complete Fiber the construction and replacement-corresponding to DOM the creation and update.

Double-buffer Fiber Tree

There Reactwill be at most two trees in Fiber . The current content displayed on the screen corresponding to the Fiber called current Fiber , is built in memory Fiber is called workInProgress Fiber .

current Fiber The ones in the middle Fiber are called current fiber, workInProgress Fiber the ones in the middle Fiber are called workInProgress fiber, and they are alternateconnected by attributes.

currentFiber.alternate === workInProgressFiber;
workInProgressFiber.alternate === currentFiber;

ReactApplication of the root node by currentpointers different Fiber in rootFiberbetween to achieve switching Fiber handover.

When the workInProgress Fiber building is completed to Rendererwhen rendered on the page, use the root node currentpointer to workInProgress Fiber , at this time workInProgress Fiber becomes current Fiber .

Every time the status is updated, a new one is generated workInProgress Fiber , currentand workInProgressthe DOMupdate is completed by replacing with and .

Next, we explain with specific examples mount , update the construction/replacement process.

when 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'));
  1. The first execution ReactDOM.renderwill create rootFiberNodeand rootFiber. Among them rootFiberNodeis the root node of the entire application and the root node rootFiberof <App/>the component tree.

The reason for the distinction rootFiberNodeand rootFiber, because we can call in an application multiple times ReactDOM.renderto render the different components of the tree, they will have different rootFiber. But there is only one root node of the entire application, and that is rootFiberNode.

//current fiber fiber
rootFiberNode.current = rootFiber;

Since it is the first screen rendering, there is not any on the page yet DOM. So rootFiber.child === null, that current Fiber is empty.

  1. Next, enter render in the memory to create workInProgress fiberand connect together to build workInProgress Fiber . (The right side of the figure is the tree built in memory, and the left side is the tree displayed on the page)
  1. The ones workInProgress Fiber on the right side of the picture are already constructed and commit rendered to the page. At this time, it is DOMupdated to look like the tree on the right. rootFiberNodeThe currentpointer points to workInProgress Fiber make it become current Fiber .

When updating

  1. Next we click on the p trigger state change, which will start a new one render and build a new one workInProgress Fiber .

Many workInProgress fiberof these creations can reuse the current Fiber corresponding node data.

The process of determining whether to reuse is the Diff algorithm, which will be explained in detail in the following chapters

  1. workInProgress Fiber After the render completion of the construction, it is commit rendered to the page. After rendering, it workInProgress Fiber becomes current Fiber .


This article describes the Fiber construction and replacement process, which is accompanied by DOMupdates.

So Fiber how is each created during the build process ? We will explain in the next section.