What is Virtual DOM?

Question

Recently, I looked at Facebook\'s React framework. It uses a concept called \"the Virtual DOM,\" which I didn\'t really understand.

What is the Virtual DOM? What are

Answer 1

Virtual DOM is an abstraction of the HTML DOM that selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.

Answer 2

React creates a tree of custom objects representing a part of the DOM. For example, instead of creating an actual DIV element containing a UL element, it creates a React.div object that contains a React.ul object. It can manipulate these objects very quickly without actually touching the real DOM or going through the DOM API. Then, when it renders a component, it uses this virtual DOM to figure out what it needs to do with the real DOM to get the two trees to match.

You can think of the virtual DOM like a blueprint. It contains all the details needed to construct the DOM, but because it doesn't require all the heavyweight parts that go into a real DOM, it can be created and changed much more easily.

Answer 3

Let's take an example — though a very naive one: If you have something messed up in a room in your home and you need to clean it, what will be your first step? Will you be cleaning your room which is messed up or the whole house? The answer is definitely that you will be cleaning only the room which requires the cleaning. That's what the virtual DOM does.

Ordinary JS traverses or renders the whole DOM instead of rendering only the part which requires changes.

So whenever you have any changes, as in you want to add another <div> to your DOM then the virtual DOM will be created which actually does not do any changes in the actual DOM. Now with this virtual DOM, you will be checking the difference between this and your current DOM. And only the part which is different (in this case the new <div>) will be added instead of re-rendering the whole DOM.

Answer 4

It’s a neat concept: instead of manipulating the DOM directly, which is error prone and relies on mutable state, you instead output a value called the Virtual DOM. The Virtual DOM is then diffed with the current state of the DOM, which generates a list of DOM operations that would make the current DOM look like the new one. Those operations are applied quickly in a batch.

Taken from here.

Answer 5

React's structural unit is component. Each component has a state. Whenever the state of a component is changed, React modifies the V-DOM tree. Thereafter latest version of the V-DOM is compared with previous version of the V-DOM. After this calculation(diffing) when React knows which V-DOM objects have been changed it modifies only those objects in the R-DOM.

In layman's terms,

Say I have added a div element in DOM, React creates a copy of V-DOM without changing the whole R-DOM. This newly created V-DOM is compared with older V-DOM. It updates only different nodes in real DOM. Now the newly created V-DOM is regarded as previous version for upcoming V-DOM.

P.S. 1. So Unlike plain js Whole new version of V-DOM is created and R-DOM is partly updated. 2. React does not update every single change in state, rather updates to the R-DOM are sent in batches.

Answer 6

Virtual Dom is created one copy of Dom. Virtual dom is compared to dom, and virtual dom update only that part in dom which changed. it's not rendering the whole dom it's just changed the updated part of dom in dom. It's very time consuming and from this functionality, our app works fast.