React Virtual DOM
What is DOM?
DOM stands for the Document Object Model. DOM is a programming interface for HTML and XML documents. The documents for DOM in any webpage. The object is the HTML tag like the body, button, font, etc. The model stands for how you layout this structure. DOM is a tree structure of a webpage. Each object represents a node in the tree. The HTML is the root node of the tree. It is an interface that allows a programming language to manipulate the content, structure, and style of a website. JavaScript is the client-side scripting language that connects to the DOM in an internet browser.
Updating the DOM
There are function in JavaScript like ‘getElementById’ or ‘getElementByClass’, etc. which is used to update the DOM.
What happens when we update the DOM?
The browser finds the node based on class, id or tag, it then removes the child of that node, updates the value, reassigns the CSS to parents and child node, updates the layout and then finally traverses the tree to display the DOM.
Virtual Dom and How it Works?
It is a copy of the actual DOM. Rendering and re-rendering the DOM is slow and not very cost-effective. React has used the original DOM to rewrite it in javascript to make it furthermore efficient.
When the state changes in React, it creates a new virtual DOM which is to be compared with the previous virtual DOM. The changes are then updated in the original DOM to be displayed on the webpage. This process is known as ‘diffing’.
