What is the difference between react15 and react16 versions?

Difference: 1. The architecture of version 15 is divided into two parts: coordinator and renderer, while the architecture of version 16 is divided into three parts: scheduler, coordinator and renderer; 2. The reconciler of version 15 uses recursion The form work is synchronous, and the 16 version of the reconciler uses asynchronous interruptible updates instead of the synchronous updates of the 15 version.

The operating environment of this tutorial: Windows10 system, react16&&react15 version, Dell G3 computer.

What is the difference between react15 and version 16

1. The architecture of react15 can be divided into two layers:

Reconciler (Coordinator) - Find out the components that need to be updated, and identify how to update

Renderer (Renderer) - Responsible for rendering the changed components onto the page

2. The architecture of react16 can be divided into three layers:

Scheduler (Scheduler) - the priority of scheduling tasks, high-priority ones enter the Reconciler stage first

Reconciler (Coordinator) - Find out the components that need to be updated, and identify how to update

Renderer (renderer) - responsible for rendering the changed components onto the page

Said at the beginning:

The browser's 16.6ms mechanism

For the human eye, the normal and smooth refresh rate is 60hz, which is 60 frames, that is, the browser refreshes once every 16.6ms.

We know that js can operate dom elements, so the browser's GUI thread and js thread are mutually exclusive. The execution of js and the drawing and layout of the browser cannot be performed at the same time. Therefore, the browser must perform the following operations every 16.6ms:

JS script execution ------ Browser style layout ------ Browser style drawing

If js The script execution time is too long, exceeding 16.6ms. The browser drawing and layout cannot be executed during this refresh. This will cause lags that can be recognized by the human eye. It is found that the browser does not respond in "real time" during the operation. For example: for the user to input content in the input box, it is reflected as pressing the keyboard button but the input is not displayed in real time on the page.

The difference between 15 and 16

The reconciler of react15 is stack-reconciler. That is to say, it works in a recursive form, is synchronous, and cannot be interrupted during the process of generating the virtual DOM tree and diffing it. In this way, when the component level is too deep, the execution time of js will be too long, and the browser cannot layout and draw, resulting in frame loss.

The reconciler of react16 is fiber-reconciler. That is, the asynchronous interruptible update is used instead of the synchronous update of react15. The scheduler of react16 will tell the reconciler whether the browser has free time to execute the js script. This will not affect the browser's drawing and layout work. No frames dropped.

In react16, the original virtual DOM, because its structure can no longer meet the needs of asynchronous interruptible updates, uses the new structure Fiber instead. Virtual DOM nodes correspond to Fiber nodes, and virtual DOM trees correspond to Fiber trees.

Recommended learning: "react video tutorial"

The above is the detailed content of What is the difference between react15 and react16 versions?. For more information, please follow other related articles on the PHP Chinese website!