Virtual Dom kaise kaam krta hai ?

 


                Virtual Dom kaise kaam krta hai ? 


Virtual DOM ka funda samajhne ke liye pehle real DOM ke baare mein thoda sa bata doon. Real DOM woh actual HTML elements hote hain jo browser mein dikhte hain, jaise ki heading tag, paragraph tag, ya koi bhi HTML tags.

Virtual DOM basically real DOM ki copy hai . Jab hum koi change karte hain apne webpage mein, jaise ki koi text update ya element remove karna ho, toh sabse pehle woh change Virtual DOM mein hota hai, Real DOM mein nahi. Yeh Virtual DOM kaafi fast hota hai as compared to Real DOM, because it's just a copy, not the actual thing that the user sees.

Ab, jab yeh changes Virtual DOM mein hote hain,then React smartly compares the current Virtual DOM with the previous one, using a process called "reconciliation." Woh dekhta hai kya changes huye hain and then Jab React ko pata chal jata hai ki Virtual DOM mein kya change hua hai, tab woh smartly decide karta hai ki Real DOM mein sirf woh parts update kiye jayein jo changes ko reflect karna hai. Isse, saare DOM ko har baar change karne ki jagah, sirf zaroori changes hi update hote hain. Aur yehi baat is process ko jaldi aur efficient banati hai compared to directly Real DOM ko har change pe update karna.

Toh, is tareeke se Virtual DOM helps React optimize performance by minimizing the number of changes needed in the Real DOM, making web apps faster and more efficient.


Popular posts from this blog

React Reconciliation

Image
                           React Reconciliation        T oh, picture ye hai ki React ka reconciliation ek bahut  important concept hai. Ye basically process hai jisme React check karta hai ki kya changes huye hai component ke props ya state mein aur phir wo changes ko reflect karta hai DOM mein. Toh aap imagine karo, ki aapki website pe koi ek component hai jiska data change ho gaya. Ab React kehta hai, "Chalo bhai, ab main check karunga ki kya changes huye hain." Wo pehle naye aur purane data ko compare karta hai, fir dekhta hai ki kya actual DOM mein change hona chahiye. Ye process bahut smart hai, kyun ki React sirf actual changes ko update karta hai instead of pura DOM rebuild karke. Isse performance improve hoti hai. Ab, agar React ko lagta hai ki data mein kuch badlaav hua hai, toh wo ek algorithm use karta hai jiska naam hai "Diffing algorithm." Ye algorithm compare k...
Read more

The React LifeCycle - Simple Language

Image
To mitro aaj hm fir haazir h apki sewa m , Chaliye mitro aaj hm React LifeCycle ka Funda samjhte hai or doubt clear krte hai, aakhir ye life cycle ka funda h kya , bahut baar interview m bhi pucha jata h. React ka Component Lifecycle ek tarah ka journey hai jo har React component ko through karna padta hai jab woh create hota hai, update hota hai, ya destroy hota hai. Isme kuch steps hote hain jaise ki: Initialization (Pehli Mulakat): Jab component create hota hai, toh constructor() function chalta hai, jisme initial state aur props set hote hain. Mounting (Pahad par chadhna): Yeh phase jab component pehli baar DOM mein render hota hai. Isme do functions chalte hain: componentWillMount() aur componentDidMount() . Pehla function render se pehle chalta tha, dusra render hone ke baad. Updating (Naye Rang Dikhana): Jab koi update hota hai, naye props ya state aate hain toh component re-renders hota hai. Yahaan shouldComponentUpdate() , componentWillUpdate() , aur componentDidUpdate() fu...
Read more