Warning: mysqli_connect(): (HY000/1040): Too many connections in /var/www/webnuz/inc/base_connector.php on line 2 Failed to connect to MySQL: Too many connections Warning: mysqli_query() expects parameter 1 to be mysqli, boolean given in /var/www/webnuz/inc/func_sysvars.php on line 5 Virtual DOM - by Dev To
Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 30, 2021 05:16 pm GMT

Virtual DOM

Why virtual DOM?

To avoid re-creation of entire real DOM, when one manipulates DOM elements.The Virtual DOM concept can help in efficient DOM manipulation through diffing and reconciliation.

Diffing is a process of comparing the previous virtual DOM to current virtual DOM and changing only those elements which are different.

Note: List items should have a *key attribute to stop recreating the list items that aren't changed.*

Reconciliation is when virtual DOM syncs with real DOM.

Real or browser DOM looks like the one shown below:

Alt Text

Virtual DOM is nothing but a copy of real DOM which is kept
in memory as a javascript object.

Virtual DOM looks like the one shown below:

//virtual DOMconst virtualDOM = {    tagName: 'html',    children: [      { tagName: 'head' },      {        tagName: 'body',        children: [          {            tagName: 'div',            attributes: { id: 'root' },            children: [              {                tagName: 'div',                attributes: { class: 'App' },                children: [                  {                    tagName: 'ul',                    children: [                      { tagName: 'li', textContent: 'Tea' },                      { tagName: 'li', textContent: 'Juice' },                      { tagName: 'li', textContent: 'Water' },                      { tagName: 'li', textContent: 'Milk' },                    ],                  },                ],              },            ],          },        ],      },    ],  };

Suppose there is a list of four items, and you removed an item or added one, then in real DOM the entire document will be recreated.

//list items    <ul>    <li key="Tea">Tea</li>    <li key="Juice">Juice</li>    <li key="Water">Water</li>    <li key="Milk">Milk</li> //add item    </ul>

The highlighted text shown below in both the images is the recreation.

Manipulating real DOM without using virtual DOM concept
Alt Text

If the same thing is done using virtual DOM only the changed thing will be recreated in the real DOM as shown below.

Manipulating real DOM using virtual DOM concept
Alt Text


Original Link: https://dev.to/aasthapandey/virtual-dom-5dc7

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To