Virtual DOM (VDOM) je lehký JavaScript objektový strom, který popisuje, jak by mělo uživatelské rozhraní vypadat. Je to obyčejná reprezentace v paměti — ne skutečný DOM prohlížeče. React jej používá, protože přímá manipulace s reálným DOM je pomalá a provádění manuální aktualizace při každé změně stavu je náchylné na chyby.
Když dojde ke změně stavu, React se ihned nesnažu dotknout stránky. Místo toho:
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>;
}
Takže píšete kód deklarativně ("uživatelské rozhraní vypadá takto v tomto stavu") a React za vás zjistí potřebné operace s DOM.
document.querySelector + mutace.