Das Virtual DOM (VDOM) ist ein leichtgewichtiger JavaScript-Objektbaum, der beschreibt, wie die Benutzeroberfläche aussehen soll. Es ist eine einfache In-Memory-Darstellung — nicht das echte Browser-DOM. React nutzt es, weil die direkte Manipulation des echten DOM langsam ist und es bei manuellem Vorgehen bei jeder Zustandsänderung fehleranfällig ist.
Wenn sich der Zustand ändert, berührt React die Seite nicht sofort. Stattdessen:
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>;
}
Du schreibst Code also deklarativ ("die Benutzeroberfläche sieht so aus für diesen Zustand") und React findet die notwendigen DOM-Operationen für dich heraus.
document.querySelector + Mutation.