What is the use of react virtual dom

The uses of react virtual dom: 1. Improve the performance of react code. Virtual DOM is a js object. Creating a js object consumes much less performance than creating a real DOM. Replace the creation of a real DOM with the creation of a virtual one. DOM will have a huge performance improvement; 2. To achieve cross-end applications, on the browser side, virtual DOM is converted into browser DOM nodes one by one, or it can be converted into components of native applications to achieve cross-end applications. terminal application.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What are the uses of react virtual dom

1. Greatly improves performance

2. It enables cross-end applications (React Native) to be realized. On the browser side, the virtual DOM is converted into individual browser DOM nodes. It can also be converted into components of native applications, and cross-segment applications can be realized.

Why it can improve performance

If there is no virtual DOM, then a real DOM will be created directly. Every time the data changes, a real DOM will be created, and then Compare the real DOM, and then modify the real DOM. Creating the real DOM requires a lot of performance (because JS generating a DOM tree will call the web application-level API, and the performance loss of this level of API is very large), so It will consume a lot of performance.

It’s different with virtual DOM. Virtual DOM is a js object. The performance consumed by creating a js object is much smaller than that of creating a real DOM. If you replace the creation of a real DOM with the creation of a virtual DOM, it will be better. Huge performance improvements.

Virtual DOM

Virtual DOM is a js object

<div id=&#39;abc&#39;><span>hello world</span></div>//真实DOM
[&#39;div&#39;, {id: &#39;abc&#39;}, [&#39;span&#39;, {}, &#39;hello world&#39;]]//虚拟DOM

Page loading and update process

1.state data

2.jsx template

3. Data template generates virtual DOM

4. Use virtual DOM to generate real DOM

5.state changes

6. The data template generates a new virtual DOM

7. Compare the original virtual DOM and the new virtual DOM (diff algorithm)

8. Directly operate the DOM and change the different Place

Expand your knowledge:

What is the purpose of virtual DOM?

In order to achieve efficient updating of DOM elements in the page;

In traditional Web applications, we often update data changes to the user interface in real time, so every Small changes in data will cause the DOM tree to be re-rendered.

The purpose of virtual DOM is to accumulate all operations, statistically calculate all changes, and then update the DOM uniformly.

Greatly improves performance

It enables cross-end applications (React Native). On the browser side, the virtual DOM is converted into individual browser DOM nodes. It can also be converted into components of native applications, and cross-segment applications can be realized.

The difference between DOM and virtual DOM

1. Virtual DOM does not perform typesetting and redrawing operations

2. Virtual DOM undergoes frequent modifications. Then compare and modify the parts that need to be changed in the real DOM at one time (note!), and finally typesetting and redrawing in the real DOM to reduce the loss of typesetting and redrawing of excessive DOM nodes

3, real DOM The efficiency of frequent typesetting and redrawing is quite low

4. Virtual DOM effectively reduces the redrawing and typesetting of large areas (real DOM nodes), because in the end it is different from the real DOM and can only render part of it

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of What is the use of react virtual dom. For more information, please follow other related articles on the PHP Chinese website!