3

I think I understand how virtual dom works. It use internal javascript object to represent DOM structure, when something changes, it does the diff and patch the real dom. But in a lot of scenarios, we know what change we make, we can directly patch the DOM. wouldn't this be faster than going through an extra diffing step.

For example, for TODO app, I need to add an item or remove an item, sometimes I need to check an item to mark it as done. In these cases, i know exactly where I should perform the operation in the DOM and directly manipulate the DOM at exact node. If using virtual DOM, it will do the diff, and find what the changes are, at last step, it will apply the change and patch the real DOM. and this is exactly what I do without virtual DOM. If my real DOM operation is expensive, the last step of virtual DOM is expensive too, right?

Since DOM has structure, I think in a lot of cases we know the exact change we are going to make, which I don't see advantage of virtual DOM in these scenarios. Do I miss some important pieces in the picture?

I see some other discussions on the topic of virtual DOM don't feel it answered my question. I hope giving an example will make it more specific.

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Allen
  • 51
  • 4
  • Possible duplicate of [Why is React's concept of Virtual DOM said to be more performant than dirty model checking?](https://stackoverflow.com/questions/21109361/why-is-reacts-concept-of-virtual-dom-said-to-be-more-performant-than-dirty-mode) –  Aug 25 '17 at 18:55

1 Answers1

1

The virtual DOM is a node tree listing content, and elements and their attributes as objects and properties. The render() method of React creates a node tree from React components and updates this node tree due to the mutations caused by actions in the data model. When compared to the real DOM, Virtual DOM is an in-memory representation of Real DOM. It is a lightweight JavaScript object which is simply a copy of the Real DOM.

React.js maintains 2 virtual DOM at any instance of time. One of them is the updated state virtual DOM and other is the previous state virtual DOM. Minimizing the time it takes to repaint the screen is one of the biggest concerns of Browser makers. The most appropriate thing that can be done is to minimize and batch the DOM changes that necessitates redrawing. This strategy where the DOM changes are batched and reduced, at another level of abstraction, is the idea behind React’s Virtual DOM.

Now Virtual Dom is efficient. You can expect Greater performance, Optimal CPU Vs Memory Usage.

You can Cover the Detailed Topic Coverage about Same from Our blog Topic "Using Virtual DOM in React.js: Top 5 Benefits"

Viit:- http://www.rigelnetworks.com/using-virtual-dom-react-js-top-5-benefits/

Nik Jonson
  • 11
  • 1