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

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.