Waarom kan je de DOM van de browser niet direct gebruiken?

Het direct gebruik van de DOM van de browser in moderne frontend-toepassingen, vooral in bibliotheken zoals React, wordt om verschillende redenen niet aanbevolen:

• Prestaties: Werken met de echte DOM is trager, omdat wijzigingen leiden tot herberekeningen van stijlen, hertekeningen en herpositioneringen van elementen op de pagina.
• Complexiteit van het beheer van de staat: Het direct wijzigen van de DOM maakt het moeilijk om de huidige status van de gebruikersinterface te volgen en deze te synchroniseren met de gegevens van de applicatie.
• Gebrek aan optimalisaties: React gebruikt Virtual DOM, een lichte kopie van de echte DOM, die efficiënt minimale wijzigingen kan berekenen en deze in één keer kan toepassen, waardoor het aantal operaties op de echte DOM wordt verminderd.

Daarom fungeert Virtual DOM als een tussenlaag die de interface-updates optimaliseert, de prestaties verbetert en de ontwikkeling vereenvoudigt.

Voorbeeld: bij het wijzigen van de toestand van een component, werkt React eerst het Virtual DOM bij, vergelijkt het met de vorige versie (diffing), en past vervolgens alleen de noodzakelijke wijzigingen toe op de echte DOM.