Virtual DOM (VDOM) este un arbore ușor de obiecte JavaScript care descrie cum ar trebui să arate interfața de utilizator. Este o reprezentare simplă în memorie — nu este DOM-ul real al browserului. React îl folosește pentru că manipularea directă a DOM-ului real este lentă, iar efectuarea acesteia manual la fiecare schimbare de stare este predispusă la erori.
Când starea se schimbă, React nu atinge imediat pagina. În schimb, el:
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>;
}
Deci tu scrii cod declarativ ("interfața de utilizator arată așa pentru această stare") și React determină operațiunile imperative pe DOM pentru tine.
document.querySelector + mutare.