Virtual DOM (VDOM) ایک ہلکا JavaScript آبجیکٹ درخت ہے جو بیان کرتا ہے کہ UI کیسا نظر آنا چاہیے۔ یہ محض ایک میموری میں نمائندگی ہے — حقیقی براؤزر DOM نہیں۔ React اسے استعمال کرتا ہے کیونکہ حقیقی DOM کو براہ راست ہیرا پھیری کرنا سست ہے، اور ہر بار حالت تبدیل ہونے پر اسے دستی طریقے سے کرنا خرابی کا باعث ہو سکتا ہے۔
جب حالت بدلتی ہے، React صفحہ کو فوری طور پر نہیں چھوتا۔ بجائے اس کے:
function Counter() {
const [n, setN] = useState(0);
// Each click produces a NEW virtual tree describing <button>{n}</button>.
// React compares old vs new and updates ONLY the text node that changed,
// not the whole button or the page.
return <button onClick={() => setN(n + 1)}>{n}</button>;
}
تو آپ اپنا کوڈ بیان کے ذریعے لکھتے ہیں ("UI یہ حالت کے لیے اس طرح نظر آتا ہے") اور React آپ کے لیے ضروری DOM آپریشنز کو تلاش کرتا ہے۔
document.querySelector + تبدیل کرنے سے آسان ہے۔