4

Can anyone explain the difference between the virtual DOM and the Real DOM in React JS? I got the below answer but it is still not clear to me. Any Help would be highly appreciated.

A virtual DOM is a lightweight JavaScript object which originally is just the copy of the real DOM. It is a node tree that lists the elements, their attributes and content as Objects and their properties. React’s render function creates a node tree out of the React components. It then updates this tree in response to the mutations in the data model which is caused by various actions done by the user or by the system.

Martin Reiche
  • 1,642
  • 1
  • 16
  • 27
Nidhi Dhabaria
  • 43
  • 1
  • 3

1 Answers1

5

Virtual DOM is very easy to understand if you take an example of a lift which has a mirror inside it. Suppose, 4 people enters into the lift. Now, the mirror will reflect its appearance with 4 people. Again people entering into the lift will reflect the object of mirror. And same effect happens when people exit from the lift, the mirror object gets changes (increase, decrease, or even empty). So, in reality mirror has no real object, but it only reflects its presence with outer object.

Virtual DOM is similar in concept. It has no real DOM. It is just a copy of real DOM wrapped in a JavaScript object. Whenever the DOM changes, virtual DOM also changes.

For your interest, you may see the following post:

Rendered element in react

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231