preface

In the previous article, reactdom.render connected the render link (1), we combed through the initialization phase of the render link and the first half of the render phase. In this article, we will look at the second half of the Render phase and the commit phase.

Render the second half of the

completeWork

As mentioned above, in the render stage, a large number of beginWork and completeWork calls are interspersed in this process, and the two methods are connected in series to simulate a recursive process. These two methods are what Render does. Now let’s look at the completeWork.The beginWork and completeWork are basically paired throughout the render phase, with the beginWork responsible for the creation of the Fiber node and the competeWork responsible for the Fiber phase’s conversion to the real Dom.

Before completeWork:

if (enableProfilerTimer && (unitOfWork.mode & ProfileMode) ! == NoMode) { startProfilerTimer(unitOfWork); Next = beginWork(current, unitOfWork, subtreeRenderLanes); stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true); Next = beginWork(current, unitOfWork, subtreeRenderLanes);} else {next = beginWork(current, unitOfWork, subtreeRenderLanes); }Copy the code
If (next === null) {// Call completeUnitOfWork completeUnitOfWork(unitOfWork); } else {// Update the current node to the newly created Fiber node workInProgress = next; }Copy the code

In performUnitOfWork, beginWork is used to create the child node of the current page, and then check whether the child stage is empty. If it is empty (this node has no child node and is a leaf node). So in this case, completeUnitOfWork is called, executing the completeWork logic for the current node.

After completeWork:

The completeWork and beginWork execute exactly the same way, depending on the workInProgress tag (there are more than ten of them), executing different logic. Here we focus on the HostComponent case:

In fact, in the render process, there are two trees, one is the famous workInProgress tree, the other is the Current tree. The workInProgress tree represents the tree currently being rendered and the current tree represents the tree that has been rendered.

The workInProgress and current nodes are connected with alternate properties. During the component mount phase, the current tree has only one rootFiber node and nothing else

CompleteWork summary
  • CompleteWork Objective: Map Fiber to a real DOM
  • CompleteWork critical work
    • Create DOM
    • Inserted into the DOM tree
    • Setting DOM Properties
CompleteUnitOfWork: Starts the big loop

The main function of the completeUnitOfWork is to start a large loop in which the following operations are performed:

  1. For the current stage, call completeWork
  2. Inserts the EffectList of the current node into the EffectList of its parent node.
  3. Starting from the current node, the sibling node and its parent node are iterated. When the sibling node is iterated, the current call will be returned, triggering the performUnitOfWork logic corresponding to the sibling node. When the parent node is traversed, it goes directly to the next loop, which repeats the logic of 1 and 2.

In the whole process of reactdom.render, the render node is the most important and the most difficult to understand, so I feel familiar with it.

The commit phase

Commit is divided into three phases

  • before mutation
  • mutation
  • layout
before mutation

The before mutation stage, in which the DOM node has not been rendered to the interface, triggers getSnapshotBeforeUpdate and also handles the useEffect hook scheduling logic.

mutation

This stage is responsible for rendering DOM nodes. During rendering, the effectList is iterated over, performing different DOM operations depending on flags (EffectTags).

layout

This stage handles the finishing logic after the DOM has been rendered. Such as call componentDidMount/componentDidUpdate, call useLayoutEffect hook function callback, etc. In addition to this, it points the fiberRoot current pointer to the workInProgress Fiber tree.

conclusion

Through two articles a general comb, ReactDOM. Render link.

  • Initialization phase
  • Render phase
  • The commit phase

Complete the analysis of the reactdom.render call stack. On the surface, the first rendering link is dissected. In fact, the mount and update link in synchronous mode (very similar to the call stack of the mount link) are connected in series.