Hvad er Virtual DOM og hvorfor bruger React den?

Question

Accepted Answer

**Virtual DOM (VDOM)** er et let JavaScript-objekttræ, der *beskriver*, hvordan brugergrænsefladen skal se ud. Det er en simpel repræsentation i hukommelsen — ikke den rigtige browser-DOM. React bruger det, fordi **direkte manipulation af den rigtige DOM er langsom**, og at gøre det manuelt ved hver tilstandsændring er fejltilbøjeligt. ## Sådan fungerer det Når tilstanden ændres, berører React ikke siden straks. I stedet: 1. Opbygger en **ny** virtuelt træ fra dine komponenter. 2. **Sammenligner** det med det forrige virtuelle træ (reconciliation) for at beregne det minimale sæt af ændringer. 3. Anvender **kun disse ændringer** på den rigtige DOM i en enkelt batched opdatering. ```jsx function Counter() { const [n, setN] = useState(0); // Each click produces a NEW virtual tree describing . // React compares old vs new and updates ONLY the text node that changed, // not the whole button or the page. return ; } ``` Så du skriver kode **deklarativt** ("brugergrænsefladen ser *sådan* ud for *denne* tilstand") og React finder de nødvendige DOM-operationer ud for dig. ## Hvorfor det betyder noget / afvejninger - **Færre, batchede DOM-skrivninger** → færre dyre reflows/repaints. - **Deklarativ kode** er lettere at forstå end manuel `document.querySelector` + mutate. - Det er *ikke* magisk "hurtigere end DOM" — selve diffingen koster CPU. Gevinsten er, at React undgår unødvendig real-DOM-arbejde og lader dig stoppe med at optimere opdateringer manuelt. Stabile **keys** i lister hjælper diffingen med at blive effektiv.