Real DOM and Virtual DOM.


First of all – the Virtual DOM was not invented by React, but React uses it and provides it for free.

A virtual DOM is a lightweight JavaScript object which originally is just a copy of the real DOM. It is a node tree that lists the elements, their attributes, and content as Objects and their properties.

The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. Since the DOM itself was already an abstraction, the virtual DOM is, in fact, an abstraction of an abstraction

Shadow DOM creates small pieces of the DOM object which has their own, isolated scope for the element they represent.

The Diffing Algorithm
When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements.,