What is Virtual DOM?

Question

Recently, I looked at Facebook\'s React framework. It uses a concept called \"the Virtual DOM,\" which I didn\'t really understand.

What is the Virtual DOM? What are

Answer 1

What is the virtual DOM?

The virtual DOM is an in-memory representation of the real DOM elements generated by React components before any changes are made to the page.

It’s a step that happens between the render function being called and the displaying of elements on the screen.

A component’s render method returns some markup, but it’s not the final HTML yet. It’s the in-memory representation of what will become real elements (this is step 1). Then that output will be transformed into real HTML, which is what gets displayed in the browser (This is step 2).

So why go through all this to generate a virtual DOM? Simple answer — This is what allows react to be fast. It does this by means of virtual DOM diffing. Comparing two virtual trees — old and new — and make only the necessary changes into the real DOM.

Source from Intro To React #2