The architecture of react 16 version can be divided into three layers: scheduling layer, coordination layer, rendering layer
- Scheduler scheduling layer: priority of scheduling tasks, high-quality tasks enter the coordination layer first
- Reconciler coordination layer: Build the fiber data structure, compare the fiber objects to find the differences, and record the DOM operations that the fiber objects need to perform
- renderer rendering layer: responsible for rendering the changed part to the page
Scheduler scheduling layer
In the version of React 15, the virtualDOM comparison was carried out in a loop and recursion method. Since recursion uses javascrip's own execution stack, once it starts, it cannot be stopped until the task execution is completed. If the level of the virtualDOM tree is relatively deep, the comparison of virtualDOM will occupy the main JavaScript thread for a long time. Since javascrip is single-threaded and cannot perform other tasks at the same time, it cannot respond to user operations during the comparison process and cannot execute element animation immediately. , Causing the page to freeze.
In the React 16 version, the javascript recursive method for virtualDOM comparison is abandoned, but a loop simulation recursion is used, and the comparison process is completed by using the idle time of browsing, and will not occupy the main thread for a long time, which is solved The virtualDOM comparison causes the page to freeze.
The requestIdleCallback API is provided in the window object. It can use the browser’s free time to perform tasks, but it also has some problems. For example, not all browsers support it, and its trigger frequency is not very stable. So react finally gave up requestIdleCallback and put it into use.
In React, the official implementation of its own task tuning library, this library is called Scheduler, which can execute tasks when the browser is idle, and can also set the priority of tasks, tasks with high priority are executed first, and tasks with low priority After the task is executed.
Scheduler is stored in the packages/sheduler folder
Reconciler coordination layer
In the React 15 version, the coordinator and the renderer are executed alternately, that is, when the difference is found, the difference is directly updated. In the React 16 version, this situation has changed. The coordinator and the renderer are no longer alternately executed. The coordinator Responsible for finding the differences. After all the differences are found, they are handed over to the renderer to update the DOM. That is to say, the main task of the coordinator is to find the differences and mark the differences.
Renderer rendering layer
The renderer executes the corresponding DOM operation synchronously according to the mark marked by the coordinator for the fiber node.
Since your comparison process has changed from recursion to an interruptible loop, how does React solve the problem of incomplete DOM rendering when interrupting updates?
In fact, this problem does not exist at all, because in the entire process, the work of the scheduler and the coordinator is completed in memory and can be interrupted, and the work of the renderer is set to not be interrupted, so it is not There is a problem of incomplete DOM rendering