Virtual DOM (VDOM) ਇੱਕ ਹਲਕਾ JavaScript object tree ਹੈ ਜੋ ਦੱਸਦਾ ਹੈ ਕਿ UI ਕਿਵੇਂ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ। ਇਹ ਇੱਕ plain in-memory representation ਹੈ — ਅਸਲੀ browser DOM ਨਹੀਂ। React ਇਸ ਨੂੰ ਵਰਤਦਾ ਹੈ ਕਿਉਂਕਿ ਅਸਲੀ DOM ਨੂੰ ਸਿੱਧੀ ਤਰ੍ਹਾਂ manipulate ਕਰਨਾ ਸ਼ਰਾਬੀ ਹੈ, ਅਤੇ ਹਰ state change 'ਤੇ ਇਸ ਨੂੰ ਮੈਨੂਅਲੀ ਕਰਨਾ ਗਲਤੀ ਦੀ ਗੁੰਜਾਇਸ਼ ਹੈ।
جب state ਬਦਲਦੀ ਹੈ, React ਤੁਰੰਤ page ਨੂੰ touch ਨਹੀਂ ਕਰਦਾ। ਇਸ ਦੀ ਬਜਾਏ ਇਹ:
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>;
}
ਇਸ ਲਈ ਤੁਸੀਂ code ਨੂੰ declaratively ਲਿਖਦੇ ਹੋ ("UI ਇਸ state ਲਈ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਦਾ ਹੈ") ਅਤੇ React ਤੁਹਾਡੇ ਲਈ imperative DOM operations ਬਣਾਉਂਦਾ ਹੈ।
document.querySelector + mutate ਨਾਲੋਂ ਸਮਝਣਾ ਸਭਣਾ ਆਸਾਨ ਹੈ।