Miks ei saa otse kasutada brauseri DOM-i?

Otse kasutades brauseri DOM-i kaasaegsetes frontend rakendustes, eriti sellistes raamatukogudes nagu React, ei ole soovitatav mitmel põhjusel:

• Tõhusus: Töö reaalse DOM-iga on aeglasem, kuna muudatused põhjustavad stiilide ümberarvutusi, uuesti joonistamist ja elementide ümberpaigutamist lehel.
• Oleku haldamise keerukus: DOM-i otse muutmine raskendab UI praeguse oleku jälgimist ja selle sünkroniseerimist rakenduse andmetega.
• Optimeerimiste puudumine: React kasutab Virtual DOM-i, mis on kerge koopia reaalsest DOM-ist, võimaldades tõhusalt arvutada minimaalsete muudatuste ja nende rakendamise ühe korraga, vähendades operatsioonide arvu reaalse DOM-i suhtes.

Seetõttu toimib Virtual DOM kui vahekiht, mis optimeerib kasutajaliidese uuendusi, parandab jõudlust ja lihtsustab arendustööd.

Näide: kui React komponendi olek muutub, uuendab React esmalt Virtual DOM-i, võrdleb seda eelneva versiooniga (diffing) ja rakendab seejärel ainult vajalikud muudatused reaalse DOM-i suhtes.