Miért nem lehet közvetlenül használni a böngésző DOM-ját?

A böngésző DOM-jának közvetlen használata a modern frontend alkalmazásokban, különösen olyan könyvtárakban, mint a React, több okból sem ajánlott:

• Teljesítmény: A valódi DOM-mal való munka lassabb, mivel a változtatások stílusújraszámításokat, újrarajzolásokat és elemek újrarendezését váltják ki az oldalon.
• Állapotkezelés összetettsége: A DOM közvetlen módosítása megnehezíti az UI aktuális állapotának nyomon követését és szinkronizálását az alkalmazás adataival.
• Optimalizálások hiánya: A React a Virtual DOM-ot használja, amely a valódi DOM könnyű másolata, lehetővé téve a minimális változtatások hatékony kiszámítását és egyszeri alkalmazását, csökkentve a valódi DOM műveletek számát.

Ezért a Virtual DOM olyan rétegként működik, amely optimalizálja a felület frissítéseit, javítja a teljesítményt és egyszerűsíti a fejlesztést.

Példa: amikor egy React komponens állapota megváltozik, a React először frissíti a Virtual DOM-ot, összehasonlítja az előző verzióval (diffing), majd csak a szükséges változtatásokat alkalmazza a valódi DOM-ra.