React Js — What is DOM ? L1
What is DOM?
DOM stands for Document Object Model it is the structural representation of all nodes in an HTML document . Very difficult to understand , let me make easiar for you .
First line contains document type html and second line contains html tag , and closes at line 14th. So we have to write our html within this html . Now look at 3rd line , line contain head tag encloses at line 7. So there are some definitons like title , css file , favicon. And In the 8th line tag body that encloses at line 13 . Now within the body we are writing whole content.
And this is the structural representation of all nodes in HTML. 😊😊
And the advantage of react , we can change the content of body using DOM dynamically. And that process called as DOM Manipulation.
Now you might have question , we can change the DOM using javascript . Why we need React.js? Wait …
Using javascript you can change the content , now updated content have to re-render the UI to reflect changes .The re-rendering of the UI make the dom slow because at every changes all the UI components are re-rendering but you have not changed every component in the page. This DOM is called Real-DOM.
Here Virtual — Dom come into the picture .
- Virtual DOM is the virtual representation of Real DOM. Virtual DOM makes the performance faster because it only update the changed information .
- React update the state changes in Virtual DOM and then it syncs with Real DOM. And in react we are using with the help of ReactDOM library.
Now you can skip this part, If you are really want to know about how the virtual dom concept work , go on.
Diffing Algorithm:
As we discussed about Virtual DOM, Virtual DOM changes first , after this update in Real DOM . This process of comparing the changes Virtual DOM with Real DOM and updates the changes int Real -DOM called Reconcillation.
And React uses Diffing algorithm for reconciliation , based on ->
Elements Of Different Types
Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch. Changing from <a> to <img>, or from <Article> to <Comment>, or from <Button> to <div> - any of those will lead to a full rebuild.
Component Elements Of The Same Type
When a component updates, the instance stays the same, so that state is maintained across renders. React updates the props of the underlying component instance to match the new element.Next, the render() method is called and the diff algorithm recurses on the previous result and the new result.
Read this know more :
