Virtual DOM की समझ
Virtual DOM क्या है
Virtual DOM असली DOM का एक lightweight JavaScript object representation है जो React memory में रखता है। जब state बदलता है, React एक नया virtual DOM tree बनाता है और इसे पिछले वाले से compare करता है असली DOM को immediately touch करने के बजाय।
उदाहरण: What the Virtual DOM Is
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function VDomNote() {
return <p>React compares virtual DOM trees before touching the real DOM.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<VDomNote />);
</script>
</body>
</html>Diffing और Reconciliation
Reconciliation वह process है जहां React नए virtual DOM tree को पिछले वाले के against compare (diff) करता है और इसे match करने के लिए ज़रूरी minimal set of real DOM changes calculate करता है।
उदाहरण: Diffing and Reconciliation
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Ticker() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => setCount((c) => c + 1), 1000);
return () => clearInterval(id);
}, []);
return <p>Only this number updates in the real DOM: {count}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Ticker />);
</script>
</body>
</html>Virtual DOM Fast क्यों है
असली DOM को directly बदलना slow है क्योंकि browser को हर change के बाद layout recalculate और page repaint करना पड़ता है।
React पहले कई छोटे changes को एक single lightweight virtual DOM comparison में batch करके इससे बचता है, फिर सिर्फ ज़रूरी minimal set of real DOM updates apply करता है। यही वजह है कि UI के एक छोटे part के लिए state update करना पूरे page को redraw करने पर मजबूर नहीं करता।
उदाहरण: Why the Virtual DOM Is Fast
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Counter />);
</script>
</body>
</html>- यह सोचना कि virtual DOM हर update को instant बना देता है -- यह DOM work minimize करता है, लेकिन expensive JavaScript logic अब भी slow हो सकती है।
- यह मान लेना कि आपको अपने code में directly virtual DOM के साथ interact करना चाहिए -- आप कभी नहीं करते।
- 'virtual DOM' को असली browser DOM के साथ confuse करना वे अलग representations हैं।
- Virtual DOM UI का एक in-memory representation है जो React maintain करता है।
- React changes ढूंढने के लिए नए virtual DOM को पिछले वाले के against compare (diff) करता है।
- सिर्फ minimal necessary real DOM updates apply होते हैं, जिसे reconciliation कहा जाता है।
- यह approach slower असली DOM को बार-बार touch करने की performance cost से बचाता है।
कोई browser-specific restrictions नहीं -- हर React version में available एक internal React implementation detail।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: