What is the real world example of real DOM and virtual DOM in React?

问题

If someone asks for the example of Real DOM and Virtual DOM, may be programmatically? How can this be explained?

回答1:

Normal DOM Manipulation

If one of these list items updates, then the DOM re-renders the entire list. This is where the DOM’s inefficiency stems from. This is inefficient because it requires traversing every single node recursively.

Virtual DOM

Since the data is saved on the state, components can simply listen to events on the state and if there is an update, it can re-render to the UI. React then only updates those elements that have changed, leaving alone those that have not.

回答2:

=> Hello Shivani, Please Refer this Link and see Examples. Real dom is slow and Virtual DOM is faster than the real DOM and other things is Virtual DOM is COPY of Real DOM .

LINK : https://www.accelebrate.com/blog/the-real-benefits-of-the-virtual-dom-in-react-js/

回答3:

Lets suppose you have actual DOM tree like this:

<div id="text">
 <div>
   text 1
 </div>
 <div>
   text 2
 </div>
</div>

Now suppose you have virtual DOM tree which is copy of actual DOM tree at first time:

<div id="text">
 <div>
   text 1
 </div>
 <div>
   text 2
 </div>
</div>

Now suppose text 2 div element updated with new text but passing full #text div html for re-rendering so virtual DOM will compare it with own tree and it will just re render the updated HTML element in actual DOM.

Replace with this div:

 <div>
  text 2
 </div>

Updated this div:

 <div>
  text 3
 </div>

So in conclusion virtual DOM compare with its on tree object and update the actual DOM when it finds any differences in any element and it update only updated element part instead of full HTML, therefore Virtual DOM is very fast and this is the main concept of React.

来源：https://stackoverflow.com/questions/52551853/what-is-the-real-world-example-of-real-dom-and-virtual-dom-in-react

标签

reactjs

react-native

react-native-android