Virtual DOM (VDOM) är ett lättviktigt JavaScript-objektträd som beskriver hur UI:n bör se ut. Det är en helt minnesintern representation — inte den riktiga browser-DOM:en. React använder det för att direktmanipulering av riktiga DOM är långsam, och att göra det manuellt vid varje tillståndsförändring är felbenäget.
När tillståndet ändras, berör React inte omedelbar sidan. Istället:
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>;
}
Så du skriver kod deklarativt ("UI:n ser ut som detta för detta tillstånd") och React räknar ut de imperativa DOM-operationerna för dig.
document.querySelector + mutate.