With the rapid development of front-end technology, vUE and React have become mainstream frameworks

Virtual DOM was used in the static page at the beginning, later in jquery, and now in vUE, React, MVVM and MVC front-end development mode. However, it seems that the mainstream framework is also a variety of artificial and improved virtual DOM. Why use virtual DOM?

First, what is a virtual DOM

  1. The virtual DOM is a JS object
  2. The virtual DOM is a description of the real DOM
<h1 className="greeting">Hello, world! </h1>
Copy the code

This tag is displayed as the following type in React:

const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world! '}};Copy the code

Here’s how the virtual DOM in React works. The workflow of the virtual DOM during the React component’s mount and update phases is as follows:

  • In the mounting stage, React will combine the description of JSX to build a virtual DOM tree, and then convert the DOM tree into a real DOM through ReactDOM. Render, and mount it on the page.

  • In the update stage, before the page acts on the real DOM, it will first act on the virtual DOM. The virtual DOM will compare the specific real DOM that needs to be changed with the help of the DIff algorithm in the JS layer, and then act these changes on the real DOM for update rendering.

The virtual DOM retains some of the basic properties of real DOM nodes, as well as the hierarchical relationships between them, and puts them in a single object, which acts as a layer of “caching” between javascript and the DOM.

How does the virtual DOM solve the problem

React uses JSX, a JS syntactic sugar that is similar to templates.

JSX is a syntax extension to JavaScript that is close to the template language, but has the full power of JavaScript.

Browsers don’t actually have the ability to parse JSX

Here Babel converts JSX to JavaScript capability, and Bable converts JSX code to ES5 code that most older browsers can recognize

The difference is that there is an extra layer of virtual DOM as a buffer. The buffer layer is the good: when the DOM manipulation (rendering update) more frequently, it will first compare the two virtual DOM tree, pinpoint specific parts need to be updated, generate a “patch set”, only the “patch” to play on the need to update the part of the real DOM, achieve accurate “delta update”. The virtual DOM workflow corresponding to this process is shown in the figure below:

Diff algorithm does not do too much explanation here, want to know can see the source code

Is it true that React uses virtual DOM for better performance?

About this problem, can see the answer of (www.zhihu.com/question/31)…

In fact, the benefit of virtual DOM is that it “enables front-end development to realize efficient declarative programming based on functional UI programming mode”. The existence of virtual DOM cannot be said to solve the performance problems caused by real DOM updating views, but only improves view rendering performance. The virtual DOM is what makes the Diff algorithm possible. It also provides the possibility to compile multi-platform code, and we can do cross-platform articles at the step of transforming the virtual DOM into real nodes. Another is to improve the development experience and efficiency by making functional, declarative programming of data-driven views such as UI =fn (state) possible, and JSX is one of those categories.

Code word is not easy, please teach!