React.js Virtual Dom Secret
In this article you will learn about React Virtual DOM and the difference with the Real DOM.
DOM stands for ‘Document Object Model’. In simple terms, it is a structured representation of the HTML elements, that are present in a webpage or web-app. DOM represents the entire UI of your application. The DOM is represented as a tree data structure. It contains a node for each UI element present in the web document. It is very useful, as it allows web developers to modify content through JavaScript. Also, being in structured format, it helps a lot, as we can choose specific targets and all the code becomes much easier to work with.
DOM manipulation is the heart of the modern, interactive web. Unfortunately, it is also a lot slower than most JavaScript operations.
This slowness is made worse by the fact that most JavaScript frameworks update the DOM much more than they have to.
As an example, let’s say that you have a list that contains ten items. You check off the first item. Most JavaScript frameworks would rebuild the entire list. That’s ten times more work than necessary! Only one item changed, but the remaining nine get rebuilt exactly how they were before.
Rebuilding a list is no big deal to a web browser, but modern websites can use huge amounts of DOM manipulation. Inefficient updating has become a serious problem.
To address this problem, the people at React popularized something called the virtual DOM.
Why Virtual DOM?
In React, for every DOM object, there is a corresponding “virtual DOM object.” A virtual DOM object is a representation of a DOM object, like a lightweight copy.
A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.
Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house.
Virtual DOM is like a preparation stage for passing the changes to the Real DOM. We only pass the changes according to the changed components and, thus, the Real DOM isn’t overloaded.
When new elements are added to the UI, a Virtual DOM, which is represented as a tree, is created. Each element is a node on this tree. This tree is then compared or “diffed” with the previous virtual DOM tree.
The image below shows the React virtual DOM tree and the diffing process.
Once this is done, the Virtual DOM calculates best possible method to make these changes to the Real DOM. This insures, that there are minimal operations on the real DOM.
Hence, reducing the performance cost of updating the Real DOM.
In other words, the difference between the previous version of the virtual DOM tree and the current virtual DOM tree is then calculated. The whole parent subtree then gets re-rendered to give the updated UI. This updated tree is then batch updated to the real DOM.
For learning more useful info keep following Edgarsblog, also my Twitter, Instagram and LinkedIn.
#react #javascript #programming
