Because a large number of actual DOMs will be defined in react, a large number of actual DOMs need to be operated frequently, which will cause a serious decrease in access performance. Therefore, virtual DOMs need to be introduced to avoid the consequences of frequent DOM operations. To solve the problem of performance degradation, virtual DOM can better improve page performance.

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

Why react should introduce virtual dom

One of the cores of the React framework is the virtual DOM. Compared with the actual DOM, the virtual DOM can better improve page performance.

Why use virtual DOM?

Usually when designers design the UI of a traditional HTML web page, they will define a number of DOM elements in the page. These DOM elements are the so-called actual DOM. The actual DOM is responsible for carrying appearance performance and data changes. Any change in appearance or update of data information must be fed back to the UI, and must be achieved by operating the actual DOM. But for complex page UIs, a large number of actual DOMs are often defined. Frequently operating a large number of actual DOMs will often lead to a serious decline in access performance, and the user experience will also deteriorate. Therefore, the React framework specifically introduces a virtual DOM mechanism to address this phenomenon to avoid the performance degradation caused by frequent DOM operations. Descent problem.

React DOM is similar to a collection of related actual DOMs, which is different from the traditional concept of DOM elements. It should be more appropriate to understand it as a DOM component, so the React framework ReactDOM is called virtual DOM.

Create virtual DOM

Pure js method React.createElement('h1',{},title)

JSX method

{title}

Let’s feel the difference between actual DOM and virtual DOM writing

Actual DOM

Virtual DOM

Before using the React framework, you need to import the React js library in advance

Recommended learning: "react video tutorial"

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