Virtual DOM (VDOM) yra lengva JavaScript objektų medis, kuris aprašo, kaip turėtų atrodyti vartotojo sąsaja. Tai yra paprastas reprezentacinis atmintyje — ne tikrasis naršyklės DOM. React jį naudoja, nes tiesioginė realaus DOM manipuliacija yra lėta, o tai daryti rankiniu būdu kiekvieną kartą pasikeitus būsenai yra linkę į klaidas.
Kai būsena pasikeičia, React nedelsdamas neliečia puslapio. Vietoj to:
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>;
}
Taigi jūs rašote kodą deklaratyviai ("sąsaja atrodo šitaip šitai būsenai") ir React išsiaiškina imperatyvinės DOM operacijas jums.
document.querySelector + mutate.