What is the virtual DOM?

The virtual DOM is just a normal JavaScript object that contains attributes tag,props, and children.

<div id="app"> <p class="text">hello world!!! </p> </div>Copy the code

The HTML above is converted to the virtual DOM as follows:

{
  tag: 'div',
  props: {
    id: 'app'
  },
  chidren: [
    {
      tag: 'p',
      props: {
        className: 'text'
      },
      chidren: [
        'hello world!!!'
      ]
    }
  ]
}
Copy the code

This object is often referred to as the virtual DOM, and because the DOM is a tree structure, it can be easily represented using JavaScript objects.

Why do you need the virtual DOM?

You already have the DOM, why do you need to introduce a new concept?

A few questions for you?

“Don’t you get tired of manipulating the DOM a lot?”

“Is frequent DOM manipulation good for web performance?”

“Can you use DOM for cross-platform development?”

If you’ve thought about the above three questions and realized that it’s not easy to develop directly by manipulating the DOM, you’re one step closer to understanding the virtual DOM.

The emergence of the virtual DOM is to solve but not limited to the above three problems.

How to solve it?

Improved performance for large-scale DOM manipulation

The virtual DOM can combine multiple operations into a single operation. (React’s setState was designed to be asynchronous.)

We need to add 1000 divs to the page, which can only be added one at a time without using Vue and React. The virtual DOM can add 1000 nodes in an array, which reduces the number of DOM operations.

Narrow the scope of DOM operations

The virtual DOM uses DOM diff to dispense with redundant operations and only manipulate DOM elements that have changed

For example, if the page has 990 nodes, we need to add 10 more nodes, but at this time, the original and current nodes in our data are put together, and the virtual DOM can use the virtual DIff to help us distinguish the new and old nodes, and only operate the new and changed nodes, reducing the DOM operation scope.

Cross-platform development can be achieved at low cost

The virtual DOM can become not only a DOM, but also applets,iOS apps, Android apps, because the virtual DOM is actually a JS object.

Avoid XSS risks

The virtual DOM ensures character escape internally, thus avoiding XSS cross-site scripting attacks.

Virtual DOM implementation principle

I haven’t read the React source code, so this is a brief introduction to the process of changing the virtual DOM to the DOM.

There are two encoding options for implementing a React component. The first option is to use JSX:

class Hello extends Component { render() { return <div>Hello ConardLi</div>; }}Copy the code

The second option is to write it directly with react. createElement:

class Hello extends Component { render() { return React.createElement('div', null, `Hello ConardLi`); }}Copy the code

JSX is just a function for React. CreateElement (Component, props,… Grammar sugar provided by the children) method. This means that all JSX code will eventually be converted to react.createElement (…). Babel helps us through this transformation process. JSX as shown below

<div>
  <img src="avatar.png" className="profile" />
  <Hello />
</div>;
Copy the code

Will be converted by Babel to

React.createElement("div", null, React.createElement("img", {
  src: "avatar.png",
  className: "profile"
}), React.createElement(Hello, null));
Copy the code

Note that Babel compiles the first letter of a component in JSX. When the first letter is lowercase, it is considered a native DOM tag. The first variable of createElement is compiled as a string. When the initial letter is uppercase, it is considered a custom component, and the first variable of createElement is compiled as an object.

Let’s take a look at what the virtual DOM actually looks like by printing the following JSX code on the console:

The < div className = "title" > < span > Hello ConardLi < / span > < ul > < li > apple < / li > < li > orange < / li > < / ul > < / div >Copy the code

The final tree structure formed by ReactElement is the Virtual DOM. The overall conversion process is as follows:

reference

React In-depth analysis of virtual DOM rendering principles and features