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. Replacing the creation of a real DOM with the creation of a virtual DOM will have a huge impact. Performance improvement; 2. To achieve cross-terminal applications, on the browser side, the virtual DOM is converted into individual browser DOM nodes, or it can be converted into components of native applications to implement cross-terminal applications.
The operating environment of this tutorial: Windows 10 system, react version 17.0.1, Dell G3 computer.
1. Greatly improved performance
2. 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.
Why it improves 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 the real DOM will be compared, and then the real DOM will be modified. Creating a real DOM will consume a lot of performance ( Because the DOM tree generated by JS will call the web application level API, the performance loss of this level of API is very large), which will consume a lot of performance.
It's different with virtual DOM. Virtual DOM is a js object. Creating a js object consumes much less performance than creating a real DOM. Replacing the creation of a real DOM with the creation of a virtual DOM will have a huge performance improvement. promote.
Virtual DOM
Virtual DOM is a js object
<div id='abc'><span>hello world</span></div>//Real DOM['div', {id: 'abc'}, ['span', {}, 'hello world' ]]//Virtual DOMPage loading and update process
1.state data
2.jsx template
3. Data + template generate virtual DOM
4. Use virtual DOM to generate real DOM
5.state changes
6. Data + template generates new virtual DOM
7. Compare the original virtual DOM and the new virtual DOM (diff algorithm)
8. Directly operate the DOM and change different places
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 change 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 update the DOM uniformly.
Greatly improved 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. The virtual DOM will not perform typesetting and redrawing operations.
2. Frequently modify the virtual DOM, then compare and modify the parts that need to be changed in the real DOM at once (note!), and finally perform typesetting and redrawing in the real DOM to reduce the loss of typesetting and redrawing of excessive DOM nodes.
3. The efficiency of frequent typesetting and redrawing of the real DOM 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.