What is the use of react's virtual dom?

In React, virtual dom is used to achieve efficient updates of dom elements in the page; virtual dom can accumulate all dom operations, calculate all changes, and update the dom once, which can greatly To improve performance, virtual DOM can also be converted into native application components for cross-end applications.

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

What is the use of virtual DOM in react?

What is the virtual DOM in react?

is a concept in the framework. Programmers use JS objects to simulate DOM and DOM nesting on the page;

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, so only part of it can be rendered

Recommended learning: "react video tutorial"

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