CODEWITHSUNDEEP
javascriptreactjsdomvirtual-dom
Arkadiusz Raszeja
Arkadiusz Raszeja

Reputation: 882

do I understand react virtual DOM sense correctly?

My way of thinking:

If we want to perform something on dom element we can do it by:

document.getElementById("#someId").DoSomething();
document.getElementById("#someId").DoSomethingElse();

In that situation browser needs to search entire DOM for #someId object. Then it forgets element and searches again to perform DoSomethingElse().
To solve "forgetting and searching again" problem we can save our element as JavaScript object.

    var someElement = document.getElementById("#someId");
    someElement .DoSomething();
    someElement .DoSomethingElse();

Going further we can save entire group of elements or entire nodes to achieve better performance. One more step and we have whole DOM saved as an JavaScript object named virtual dom.

Is that correct way to understand purpose of virtual DOM?

Sorry for noob questions, I'm not front end developer, I'm just curious :)

Upvotes: 1

Views: 79

Answers (1)

dlopez
dlopez

Reputation: 995

The main point of the VirtualDOM is that, effectively, you're working on a copy of the real DOM. But the working with that copy is ways faster that working with the actual DOM, because it only has the thing that React actually needs, leaving specific browser issues aside.

The main problem with working with the actual DOM is that it's slow. At least, it's faster to work with that kind of copy, make your work there, and the changes have been done, then you update the actual DOM.

Yes, it sounds a bit crazy, but is faster to compute the differences between state changes and the change everything in "just one step", than making that changes with the actual DOM.

Additionally, you've used for your example just a single DOM node, but you're working on changes on DOM subtrees the thing is not that easy.

For an explanation with more detail you can take a look to this article: http://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/

Upvotes: 2

Related Questions