A Virtual DOM (VDOM) egy könnyű JavaScript objektumfa, amely leírja, hogy az UI hogyan kellene kinézzen. Ez egy egyszerű memóriabeli reprezentáció — nem az igazi böngésző DOM. A React ezt azért használja, mivel a valós DOM közvetlen manipulálása lassú, és ezt manuálisan végezni minden állapotváltozásnál hibáink maradnak.
Ha az állapot megváltozik, a React nem érinti azonnal az oldalt. Helyette:
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>;
}
Tehát deklaratívan írja a kódot ("az UI így néz ki ebben az állapotban"), a React pedig megtudja az imperatív DOM-műveletek.
document.querySelector + mutáció.