1. What is it?
Real DOM, real DOM, means Document Object Model, which is an abstraction of structured text. Every node rendered on the page is a real DOM structure, as follows:
Virtual Dom, which is essentially a description of JavaScript pairs in the form of objects DOM
The purpose of creating a virtual object DOM is to better render the virtual nodes into the page view, and DOM the nodes of the virtual object DOM correspond to the real attributes one by one
In React , JSX is one of the major features, allowing you to directly declare the structure of the interface JS by using theXMLDOM
// 创建 h1 标签，右边千万不能加引号
const vDom = <h1>Hello World</h1>;
// 找到 <div id="root"></div> 节点
const root = document.getElementById("root");
// 把创建的 h1 标签渲染到 root 节点上
ReactDOM.render(vDom, root);
In the above, ReactDOM.render() it is used to insert the virtual node you created DOM into a real node and render it on the page
JSXbabel In fact, it is a kind of syntactic sugar, which will be compiled and converted into JS code during use . The above VDOM conversion is as follows:
const vDom = React.createElement(
'h1'，
{ className: 'hClass', id: 'hId' },
'hello world'
)
As you can see, JSX it is to simplify the direct call React.createElement() method:
-
The first parameter is the tag name, such as h1, span, table...
-
The second parameter is an object, which contains some attributes of the label, such as id, class, etc.
-
The third parameter is the text in the node
Pass console.log(VDOM), you can get a virtual VDOM message
So it can be obtained that JSX the babel method of passing is converted into React.createElement execution, and the return value is an object, which is virtual DOM
Two, the difference
The difference between the two is as follows:
- Virtual DOM will not perform typesetting and redrawing operations, while real DOM will frequently rearrange and redraw
- The total loss of virtual DOM is "virtual DOM addition, deletion and modification + real DOM difference addition, deletion and modification + typesetting and redrawing", and the total loss of real DOM is "real DOM complete addition, deletion and modification + typesetting and redrawing"
In the traditional native api or jQuery go operation DOM , the browser will DOM execute the process from the beginning to the end from the construction tree
When you are doing one operation, you need to update 10 DOM nodes. The browser is not so smart. After receiving the first update DOM request, it does not know that there will be 9 subsequent update operations, so it will execute the process immediately, and finally execute the process 10 times
And through VNodethe same update of 10 DOM nodes, the virtual DOM will not operate immediately DOM, but save the content of these 10 updates diff to a local js object, and finally put this js object attach on DOM the tree at one time, avoiding a lot of unnecessary calculations
3. Advantages and disadvantages
Real DOM advantages:
- easy to use
shortcoming:
- Low efficiency, slow parsing speed, high memory usage
- Poor performance: Frequent manipulation of the real DOM can easily lead to redrawing and reflow
The advantages of using virtual DOM are as follows:
-
Simple and convenient: If you use manual operations
DOMto complete the page, it is cumbersome and error-prone, and it is also difficult to maintain under large-scale applications -
In terms of performance: using Virtual DOM can effectively avoid frequent updates of real DOM numbers, reduce multiple redraws and reflows, and improve performance
-
Cross-platform: With the help of virtual DOM, React brings cross-platform capabilities, and a set of code runs on multiple terminals
shortcoming:
- In some applications with extremely high performance requirements, the virtual DOM cannot be targeted for extreme optimization
- When rendering a large amount of DOM for the first time, the speed is slightly slower than normal due to the calculation of an additional layer of virtual DOM