This article attempts to vividly describe the process of rendering the React component through diagrams.

Front knowledge

React Render mode

  1. Concurrent mode asynchronous rendering mode, the implementation of task-based time slice and other features
  2. Legacy mode Sync render mode, now the main render mode

React Render phase

  1. The render phase builds the workInprogress tree based on the existing Fiber tree (Current).
  2. Commit Phase Commit consists of the following phases:
    • Before mutation At this point the DOM node has not been rendered to the page, the getSnapshotBeforeUpdate cycle function and useEffect hook function are executed
    • DOM updates, deletes, and replaces DOM elements based on effectList tags
    • Layout implementation useLayoutEffect componentDidMount, componentDidUpdate for current and workInprogress logic related to replace

Graphic rendering

Let’s assume that we are friends with React, who is one of the best artists in the front-end world, and we want him to draw us a picture like this.



React is really a master painter, and he has two great skills:

  1. WorkInprogress in my mind and then go to the drawing board at a time, and the drawing everyone praised dodge (first rendering)
  2. Modify the existing painting (current => workInprogress) to create a painting with both the traces of the original painting and a new charm (trigger update)

React accepted the painting assignment because he loved the praise he received after each painting, so he began to paint.

Conception (Render stage)

Master React took a look at his blank canvas and decided to create the image in his head. When React saw the drawing template, he immediately saw the connection between various nodes, so he had a new conception of the drawing template.



This is the React artist’s unique way of drawing. I got drunk with him last time and he leaked it. Ha ha, I told everyone his secret like this, people still pretended not to know React and asked him to tell us his painting process.

React: THERE are two main things I think about when I paint:

  • How to map the drawn template into a better read structure (Fiber structure performUnitOfWork completeWork)
  • How to record the ideas of painting in the process of conception? In the process of painting,React thought out the ideas of painting in one move (effectList creation nodes)

Ink stroke (COMMIT phase)

In fact, it was a piece of cake for Master React at the ink waving stage, because all the trouble had already been solved in the idea stage. He mainly drew according to the previous ideas (effectList, etc.), but the master’s way of drawing was still different from ordinary painters

  • He would drink a glass of wine before he started painting. He told me privately that the drink would affect the painting afterwards
  • In painting, he was always able to come up with some new mutations (adding the mutation layout component to the view lifecycle function), which made him a good painter
  • The idea in my mind after the painting becomes the actual painting.