Γιατί δεν μπορούμε να χρησιμοποιήσουμε άμεσα το DOM του browser;

Η άμεση χρήση του DOM του προγράμματος περιήγησης σε σύγχρονες εφαρμογές frontend, ειδικά σε βιβλιοθήκες όπως το React, δεν συνιστάται για διάφορους λόγους:

• Απόδοση: Η εργασία με το πραγματικό DOM είναι πιο αργή, καθώς οι αλλαγές προκαλούν επαναυπολογισμό στυλ, επανασχεδίαση και επανατοποθέτηση στοιχείων στη σελίδα.
• Πολυπλοκότητα διαχείρισης κατάστασης: Η άμεση τροποποίηση του DOM καθιστά δύσκολη την παρακολούθηση της τρέχουσας κατάστασης του UI και την συγχρονισμένη ενημέρωσή της με τα δεδομένα της εφαρμογής.
• Έλλειψη βελτιστοποιήσεων: Το React χρησιμοποιεί το Virtual DOM, ένα ελαφρύ αντίγραφο του πραγματικού DOM, που επιτρέπει τον αποτελεσματικό υπολογισμό των ελάχιστων αλλαγών και την εφαρμογή τους σε μία φορά, μειώνοντας τον αριθμό των λειτουργιών με το πραγματικό DOM.

Έτσι, το Virtual DOM λειτουργεί ως ένα ενδιάμεσο στρώμα που βελτιστοποιεί τις ενημερώσεις της διεπαφής, βελτιώνοντας την απόδοση και απλοποιώντας την ανάπτυξη.

Παράδειγμα: Όταν αλλάζει η κατάσταση ενός συστατικού React, το React ενημερώνει πρώτα το Virtual DOM, το συγκρίνει με την προηγούμενη έκδοση (diffing), και στη συνέχεια εφαρμόζει μόνο τις απαραίτητες αλλαγές στο πραγματικό DOM.