CODEWITHSUNDEEP
javascriptreactjsdomdiffvirtual
cadenzah
cadenzah

Reputation: 978

Does virtual DOM's diffing algorithm pin-point the only difference and patch real DOM?

What I learned about Virtual DOM and its diff algorithm is, that when a change occurs in certain component(or element / and its children as well), it is efficient to reconciliate that particular component and children because other than that, other DOM component will not be changed.

However what I already know is that the time-consuming part of DOM manipulation is the moment of recalculating element's style(like CSS).

If a component in between of many other components changes, such as height style changes or get unmounted, by means of such change, sibling components below will be affected, in which the style of those components should be all re-rendered(relayout or repaint).

Then, doesn't this mean that the object of React - manipulating only the changed part of view by virtual DOM and diff algorithm - would not be achieved?

Am I misunderstanding, or is this normal?

If this is normal(situation that due to the changed component in the middle of other components, other components below also have to be modified), then what is the advantage of React compared to plain DOM manipulating method, other than batch process or declarative method? Is this okay to call it "patch"?

Upvotes: 0

Views: 526

Answers (2)

Peter Ambruzs
Peter Ambruzs

Reputation: 8213

React 'virtual DOM' is just a javascript object. It is nothing to do with styles and layouts at the time of the reconciliation. After each render React can diff this object with the result of the previous render and only updates the changed attribute of the corresponding DOM element. Here is an explanatory image from React doc, you can see that the update is well localized.

enter image description here

Upvotes: 1

ChaseMoskal
ChaseMoskal

Reputation: 7681

Your concern is that changing the style of a parent component might trigger browser layout of its child components

However, this problem still occurs regardless of whether you are using react's virtual dom or not

  • The benefit in react's virtual dom, is that it aggregates dom operations and debounces (de-dupes) the redundant operations

    This broad optimization usually results in fewer total dom operations than if you "hand-coded" it

  • In rare circumstances, you might be able to produce a more optimal result without react's virtual dom, by very carefully managing dom operations manually

    Going 'manual' is rarely worth the consideration

Upvotes: 2

Related Questions