CODEWITHSUNDEEP
javascriptreactjsdom
Liam
Liam

Reputation: 965

Virtual DOM and Real DOM steps for simple operation

i read a lot about VirualDOM. all articles explain how the VirtualDOM calculate change and then change the real DOM in efficient steps. but they dont explain how react paint the element in the realDOM? they use the official API? ('document.createElement', appendChild, etc...)?

so they says RealDOM is slow and if you change something in your realDOM he re-render the whole DOM.

so for example:

simple HTML markup:

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
<ul>

simple script:

const li = document.createElement('li');
document.querySelector('.list').appendChild(li);

Questions:

1) this operation will re-paint the whole DOM?

2) in this simple operation how react will be faster?

3) after react calculate the VirtualDOM vs RealDOM how react paint on realDOM? react use the browser API? or they have other way?

thanks for all! :)

Upvotes: 1

Views: 544

Answers (1)

kaluginserg
kaluginserg

Reputation: 354

Virtual DOM (VueJs, ReactJs and other) is only abstraction level of a DOM. This means, that elementary operations in Virtual DOM always slower than DOM. But Virtual DOM and component approach help to manage DOM tree effectively in large SPA applications. Basically, Virtual DOM allows you to minimize the need to re-layout and re-paint the DOM tree.

Answering your questions:
1) no
2) nohow
3) yes, ReactJs uses DOM, for example, here is the source code:
https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMFiberComponent.js#L379
and
https://github.com/facebook/react/blob/master/packages/react-dom/src/client/setInnerHTML.js#L38

Upvotes: 2

Related Questions