What is a React Virtual DOM
What is JS and what is ReactJs ⚛
React is a today trending JavaScript library. Actually, it is a framework according to its behavior and capabilities for making a user interface. It’s an open-source product Developed and Maintained by Facebook and Instagram. It is base on MVC Architecture (Model View Architecture).In that case, first, we created a Model, and after we put controls and view it.
#React 👇
What is the document object model or DOM in ReactJs?🤔
When you start learning React, the first concept to understand is Virtual DOM. But before we jump into Virtual DOM,
let’s see what is DOM
The DOM is an interface that allows JavaScript or other scripts to read and manipulate the content of a document (in this case, an HTML document). Whenever an HTML document is loaded in the browser as a web page, a corresponding Document Object Model is created for that page.
Then What is a virtual DOM 🙄
We’ve all heard that updating the Document Object Model (DOM) directly is inefficient and slow. However, few of us actually have the data to back it up. The buzz about React’s Virtual DOM is that it is a more efficient way to update the view in a web application, but very few of us know exactly why and whether this efficiency will result in faster page render times.
Putting aside the other benefits of using React, such as one-way data binding and components, I will discuss what exactly the Virtual DOM is and whether it alone justifies the use of React over other UI libraries (or no UI library at all).
Why do we need a UI Library? 📚😮
Two of the most important ideas of reactive programming are that systems should be event-driven and responsive to state changes.
The DOM’s user interface components have an internal state, and updating the browser isn’t as simple as just regenerating the DOM whenever something changes. If Gmail did this, for example, you would be constantly annoyed when the entire browser window refreshed in order to display a new message, wiping out the email you were composing.
The statefulness of the DOM is why we need user interface libraries and solutions such as key/value observation (which is used by Ember among others) or dirty checking (which is used by Angular). UI libraries handle watching for changes to the data model and updating the correct part of the DOM when these changes occur, or watching for changes in the DOM and updating the data model when they occur.
When new elements are added to the UI, a virtual DOM, which is represented as a tree is created. Each element is a node on this tree. If the state of any of these elements changes, a new virtual DOM tree is created. This tree is then compared or “diffed” with the previous virtual DOM tree.
Once this is done, the virtual DOM calculates the best possible method to make these changes to the real DOM. This ensures that there are minimal operations on the real DOM. Hence, reducing the performance cost of updating the real DOM.
In simple words, you tell React what state you want the UI to be in, and it makes sure that the DOM matches that state. The great benefit here is that as a developer, you would not need to know how the attribute manipulation, event handling or the manual DOM updates happen behind the scenes.
