In-depth understanding of Virtual Dom and diff algorithm in react

Article structure:

• What is the virtual Dom in react?
• Simple implementation of Virtual Dom (diff algorithm)
• How the virtual DOM works inside
• Virtual DOM comparison in react with virtual Dom in Vue

What is the virtual Dom in react?

Although the virtual Dom in react is very useful, it is a result of unintentional insertion of willow.

React core idea: A component Save the world, forget the trouble, never worry about the interface. 1. Virtual Dom Fast, there are two prerequisites 1.1 JavaScript soon

　　when Chrome came out, it was very fast running JavaScript in Chrome, which put a lot of pressure on other browsers . And now, after a few rounds of race each other, JavaScript execution is fast in every major browser.

In https://julialang.org/benchmarks/this site, we can see that the JavaScript language is very fast, and C is a few times the relationship, and Java in the same magnitude. So, the simple JavaScript is still very fast.

　　

1.2 dom is slow.

　　When creating an element such as a div, there are several things that need to be implemented: HTML element, Element, Globaleventhandler. Simply put, when inserting a DOM element, this element itself or inherits many attributes such as width, height, offsetheight, style, title, and also needs to register this element of many methods, such as Onfucos, OnClick and so on. This is just an element, if the element is more, it also involves nesting, then the elements of the properties and methods and so on will be a lot, inefficient.

For example, we add a DIV element to the body of a blank page, as follows:

This element will mount the default styles, get the computed property of this element, register the corresponding event Listener, DOM breakpoints, and a lot of properties, The registration of the method must be a time consuming H.

especially in the process of JS Operation Dom, not only the DOM itself heavy,JS operation also need to waste time , we think there is a bridge between JS and Dom, if you frequently walk on both sides of the bridge, obviously efficiency is very low,  If your javascript is very unreasonable in how it operates the DOM, it's obviously worse.

and React's virtual DOM is the solution to this problem! Although it does not solve the heavy workload of Dom itself, virtual DOM can optimize the content of JavaScript operation Dom .

　　

For example, now your list is like this:

<ul><li>0</li><li>1</li><li>2</li><li >3</li></ul>

You want to turn it down like this:

<ul><li>6</li><li>7</li><li>8</li><li >9</li><li></li></ul>

　　

　　What is the usual operation ?

First of all, 0, three-to-one these element is deleted, and then add a few new element 6,7,8,9,10 in, where there are 4 element delete, 5 element added. Total 9 DOM operations .

　　

　　What can the react virtual dom do ?

And react will take these two to do a diff, and then found that actually do not delete 0,1,2,3, but can directly change the innerHTML, and then only need to add an element (10) on the line, so that is 4 times innerHTML operation plus 1 element added. amounted to 5 this operation, so that the improvement of the efficiency was very considerable.

　　

2, about react

2.1 Interface and Design

in react's design, you do not need to manipulate the DOM at all . We can also think that in react there is no concept of DOM, and some are just component.

When you write a component, component will be fully responsible for the UI, you do not need and should not be able to command component how to display, you can only tell it you want to show a banana or two pears.

　　isolating the DOM is not just because the DOM is slow, but also in order to completely isolate the interface and the business, manipulate the data only care about the data, the interface only cares about the interface. For example, in websocket chat room creation room, we can first component write well, and then when the data, as long as the data in the Redux, and then component the room to add to the page, rather than you first to get the data, Then use JS to manipulate the DOM to display the data on the page.

That is, I provide a component, and then you just give me the data, the interface of things completely without your concern, I promise to turn the interface into the way you want. So the focus of react is on the view layer, that is, react focus on the view layer. you can think of a react component as a pure Function, as long as the data you give is [1, 2, 3], I promise to show [1, 2, 3]. There is nothing to remove an element, add an element such a thing. NO. Give me a complete list of what you want me to show.

In addition, flux, although the one-way data flow (redux), but is actually one-way observer,store->view->action->store (arrows are the data flow, The implementation can be understood as the view listener Store,view direct trigger action, and then the store listens to action).

　　

2.2 Implementation

　　So how does react do it? The simplest way is when the data changes, I unload the original DOM directly, and then replace the DOM of the newest data. But where is the virtual DOM? the efficiency of this is obviously very low.

So the virtual Dom comes rescue.

So what is the relationship between the virtual Dom and the DOM?

　　First of all, virtual DOM doesnot fully implement the DOM, that is, the dummy DOM is not the same as the real Dom , and the main thing about virtualdom is preserving the hierarchical relationship between elements and some basic properties . Because the real Dom is too complex, an empty element is so complex that you can crash, and almost everything I don't care about, okay . so each element in virtual Dom actually has only a few attributes, the most important, the most useful, and not so many messy references, such as some registered properties and functions, which are the default, Creating a virtual DOM is consistent in the process of diff, and does not need to be compared. So even if you delete the virtual DOM directly , it's very, very fast to recreate a new virtual DOM based on the new data coming in. ( each of the component's render functions is doing this, providing input to the new virtual Dom).

So, after introducing the virtual Dom , react is doing the following: you give me a data, I generate a new virtual DOM based on this data, and then I go to diff with the virtual Dom I generated last time, Get a patch, and then hit the patch into the browser's DOM. Done. And the patch here is obviously not the complete virtual DOM, but the new virtual Dom and the last virtual Dom after the diff difference.

　　

　　Assuming at any time, VirtualDom1 = = DOM1 (the organization structure is the same, obviously the virtual Dom and the real DOM is not exactly equal, where the = = is not exactly equal to JS ). When new data comes in, I generate VirtualDom2 and then go to diff with VirtualDom1and get a patch (the result of the difference). The patch is then applied to the DOM1 to get DOM2. If all is well, then there are VirtualDom2 = = DOM2 (also structurally equal).

　　

Here you can do some small experiment, to destroy VirtualDom1 = = DOM1 this hypothesis (manually delete some element in the DOM, this time the element in the virtualdom is not deleted, so the two sides are different).
Then give the new data, and you will find that the generated interface is not the one you want.

　　

　　Finally, go back to why virtual DOM is fast on this issue .
In fact, every time the virtual DOM is generated, diff generates patches faster , and while the DOM is being patch, the dom changes slowly , but the react can be based on the contents of the patch to optimize part of the DOM operation , such as the previous example.

　　the point is, even if I generate the virtual Dom (it takes time), even if I run diff (It takes time), But I've simplified the time it takes to save the DOM operations based on patches (this is the time lag, that is, the savings > time to generate the virtual Dom + diff time). So on the whole, it's still relatively fast.

　　

A simple divergence of ideas, if one day,the DOM itself has been very very, very fast, and our manual operation of the DOM is carefully designed to optimize, then add the virtualdom will be fast ?
of course not, after all, you have done so much extra work .

But will that day come?
Ah, the big deal is not virtual DOM.
Note: This section is organized from: https://www.zhihu.com/question/29504639/answer/44680878 Virtual DOM simple implementation (diff algorithm) directory

• 1 Preface
• 2 on the front-end application state management thinking
• 3 Virtual DOM algorithm
• 4 Algorithm implementation
  • 4.1 Step one: Simulating the DOM tree with a JS object
  • 4.2 Step Two: Compare the differences between two virtual dom trees
  • 4.3 Step three: Apply the difference to the real DOM tree
• 5 Conclusion
• 6 References

Objective

In the above section, we have briefly introduced the virtual DOM of the answer to the idea and the benefits, here we will write a virtual DOM to deepen its understanding, some of their own thinking.

　　

Thinking on the application state management of the front end

Maintain status, update view

　　

Source Address: Https://github.com/livoras/simple-virtual-dom Reference article: HTTPS://GITHUB.COM/LIVORAS/BLOG/ISSUES/13

　　
　　

　　

　　

　　

　　

In-depth understanding of Virtual Dom and diff algorithm in react