Virtual DOM (VDOM) je lahka JavaScript objektna drevesna struktura, ki opisuje, kako bi moral izgledati uporabniški vmesnik. Je navadna predstavitev v pomnilniku — ne pravi brskalnikski DOM. React ga uporablja, ker je neposredna manipulacija pravega DOMa počasna in jo je ročno izvajati pri vsakem spreminjanju stanja naporno in dovzetno za napake.
Ko se stanje spremeni, React ne dotakne strani takoj. Namesto tega:
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>;
}
Torej napišete kodo deklarativno ("uporabniški vmesnik izgleda takole za to stanje") in React ugotovi imperativne DOM operacije namesto vas.
document.querySelector + mutiranje.