***
A virtual DOM is a lightweight JavaScript object which is the copy of the real DOM.
This Virtual DOM works in three simple steps-
i. Whenever any underlying data changes, the entire Ul is
re-rendered in Virtual DOM representation
ii. Then the difference between the previous DOM representation
and the new one is calculated
iii. Once the calculations are done, the real DOM will be updated with only
the things that have actually changed
// dom
- With the HTML DOM, JavaScript can access
and change all the elements of an HTML document.
- The DOM represents the document as nodes and objects; that way,
programming languages can interact with the page.
// virtual dom
- The virtual DOM (VDOM) is a programming concept where an
ideal, or “virtual”, representation of a UI is kept in memory
and synced with the “real” DOM by a library such as ReactDOM.
This process is called reconciliation.// the virtual dom in react js
React uses Virtual DOM, which can be thought of as a blueprint of the DOM.
When any changes are made to React elements, the Virtual DOM is updated.
The Virtual DOM finds the differences between it and the DOM and re-renders only the elements in the DOM that changed.
This makes the Virtual DOM faster and more efficient than updating the entire DOM.