React source code Part7 – what’s behind reactdom.render?

Time:2021-11-28

summary

  • This paper mainly introduces the process and differences of fiber update in react under different environmental modes
  • React has three working modes

    1. Legacy mode: react17 and below temporarily use this mode by default, which is characterized by synchronous execution of tasks in the update queue
    2. Blocking mode: this mode is an excessive version of concurrent mode, and some concurrent functions are distributed
    3. Concurrent mode: this mode provides open options in react18, which is characterized byImplement asynchronous update of fiber, according to the priority of the fiber root nodeScheduling tasks in the execution update queue, enabling asynchronous updates

What does react do in legacy mode

  1. The root node of the whole application, fibrerootnode, will be created. The node passed in by calling react. Render (), that is, the entrance of the whole application, will create the current rootfibre.
  2. Create a fibre update queue updatequeue.
  3. Create an update object. During the initial mount, the update object is the template entry provided by react. Render (). Every time the DOM is updated, the fiber node is recreated, including priority and updated content. The uopdate object generated according to the page structure will form a circular linked list, which is a dependency generated by the fibre node.
  4. When the last update object is created, it will recurse to the root node and add the update object to the update queue. At this time, the root node will also record the priority of the current update task (the legacy mode is not used)
  5. Enter perfromsyncworkreact and enter the render phase.

    • The root node recursively executes downward, executes tasks in the update queue, and executes each update object.
    • After entering the beginwork function, the corresponding fibre object will be generated, and then enter the complete function to generate a virtual dom. Then perform the next update task.
    • After the entire updatequeue queue is executed, that is, after the complete execution is completed. The virtual DOM tree generated according to the page structure is obtained. Then enter the commit phase
  6. After the render phase, enter the commit phase
  7. After the commit phase, enter the layout phase
  8. Modify the current pointer and the update is complete

###The difference between concurrent mode and legacy mode

  • The previous five steps are the same as the legacy mode. The difference is that the update queue is not executed synchronously, but step by step according to different priorities
  • When the updated fibre recurses the update object to the root node, the root node will record the priority, such as 2.

    1. In the downward recursive update process, the task with priority 2 will be executed first.
    2. If a new update is triggered at this time and the priority is higher, for example, 1. The priority recorded by the root node will be modified, and the currently executing update task will be interrupted to execute the task with priority 1
  • Until all the tasks in the update queue are executed, enter perfromconcurrent workreact and enter the render phase
  • The subsequent process is the same as the legacy mode until the current pointer is replaced and the page is updated

Flow diagram

React source code Part7 - what's behind reactdom.render?

Recommended Today

On the mutation mechanism of Clickhouse (with source code analysis)

Recently studied a bit of CH code.I found an interesting word, mutation.The word Google has the meaning of mutation, but more relevant articles translate this as “revision”. The previous article analyzed background_ pool_ Size parameter.This parameter is related to the background asynchronous worker pool merge.The asynchronous merge and mutation work in Clickhouse kernel is completed […]