Virtual DOM makes Web Page Fast –
DOM ( Document Object Model ) is the hierarchical representation of the Web page like –
Suppose if User enter a new Heading in “h1” tag , than whole DOM (UI) including head tag , a tag , href tag , title tag etc needs to be re-modify & re-render , in this case , response time increases which leads to unwanted delay.
Here the concept of virtual DOM comes into picture , Virtual DOM is a copy of the original DOM which store in memory and linked with the real DOM libraries like ReactDOM.
When something get updated in virtual DOM, react compares the virtual DOM with a snapshot of the virtual DOM taken right before the update of the virtual DOM.
Using this comparison React find out which components in the UI needs to be updated. This process is called diffing.
Once React knows which components needs to be updated, then it replaces the original DOM nodes with the updated DOM nodes , here only nodes of DOM is getting modify saving response time.
Reusable components makes coding easier
React, we describe User Interfaces using components , can reuse a single component in multiple User Interfaces.
Entire website is divided into these small components which when put together complete the UI of the website like –
Updates without reloading
As React is using concept of virtual DOM so , Unlike traditional websites, you don’t have to travel from one page to another , navigates the website from one path to another without reloading.
Allows native API
Facebook has open sourced , React Native project well.
React Native allows , to build mobile apps using React components and compile them into platform specific, native code.
This leads to performance benefits and allows to use native API’s. It’s probably the best way to build cross-platform apps.
React Native apps can access platform features like the phone camera, or the user’s location.