I'm investigating virtual-dom right now, and I'm wondering whether virtual-dom is really faster than manual manipulation with view. Now I understand that virtual-dom and diff algorithm can prevent unnecessary re-flows, for example when we want to change this:
<div>
<div>a</div>
<div>b</div>
</div>
To this one:
<div>
<div>c</div>
<div>d</div>
</div>
So when we use direct manipulation we will have probably 4 re-flows: 2 for removing each div and for creating new one. We will also have more manipulation with dom, because we should create new elements (Maybe removing from dom -> creating new dom -> setting properties -> mounting to document is faster then just direct editing dom properties?). From the other side we have fast pretty diff algorithm that generate 2 patches just to replace content of our divs, probably we will have 1 re-flow. (if I made a mistake while writing number of re-flows, please tell me)
In this case virtual-dom probably rules, but when we have 2 really different trees, we will not have a lot of benefits from diff, so we will prevent some re-flows, maybe, but time for generating new tree and running diff and patch is much longer. And here is my second question. For example, in the motivation to https://github.com/Matt-Esch/virtual-dom library, they say: "So instead of updating the DOM when your application state changes, you simply create a virtual tree or VTree". Is it really nice to build a new virtual tree every time when I need to change something on my view?
Of course, I will try to make some test to evaluate the performance, but I want to know some more technical aspects and reasons why virtual-dom is really better or, maybe, not?
