Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "what is the difference between react15 and version 16". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "what is the difference between react15 and version 16" can help you solve the problem.

Different: version 1 and 15 architecture is divided into two parts: coordinator and renderer, while version 16 architecture is divided into three parts: scheduler, coordinator and renderer; versions 2 and 15 of reconciler work synchronously in recursive form, while version 16 of reconciler uses asynchronous interruptible updates instead of synchronous updates of version 15.

The operating environment of this tutorial: Windows10 system, react17.0.1 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-identify the components that need to be updated and identify how to update

Renderer (Renderer)-responsible for rendering the changed components to the page

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

Scheduler (Scheduler)-the priority of the scheduled task, and the priority of the high priority enters the Reconciler phase

Reconciler-identify the components that need to be updated and identify how to update

Renderer (Renderer)-responsible for rendering the changed components to the page

Say in front of:

16.6ms mechanism of browser

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

We know that js can manipulate dom elements, so the browser's gui thread and js thread are mutually exclusive. The execution of js and the drawing and layout of browser cannot be carried out at the same time. So within each 16.6ms, the browser should do the following:

JS script execution-browser style layout-browser style drawing

If the js script takes too long to execute beyond the 16.6ms, the browser drawing and layout cannot be executed during this refresh, which will cause stutters that can be recognized by the human eye and find that the browser does not react "in real time" during the operation. For example, for the user to enter content in the input box, it is reflected in pressing the keyboard key but not displaying the input in real time on the page.

The difference between 15 and 16

The reconciler for react15 is stack-reconciler. That is, it works recursively, is synchronous, and cannot be interrupted in the process of generating a virtual dom tree and diff. In this way, when the component level is too deep, the execution time of js is too long, and the browser is unable to layout and draw, resulting in frame loss.

The reconciler for react16 is fiber-reconciler. In this way, the drawing and layout of the browser will not be affected. The frame will not be dropped.

The virtual dom node becomes the Fiber node, and the virtual dom tree becomes the Fiber tree.

This is the end of the content about "what's the difference between react15 and version 16". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.