Τι είναι το Virtual DOM και γιατί το χρησιμοποιεί το React;

Question

Accepted Answer

Το **Virtual DOM (VDOM)** είναι ένα ελαφρύ δέντρο αντικειμένων JavaScript που *περιγράφει* πώς θα πρέπει να φαίνεται η διεπαφή χρήστη. Είναι μια απλή αναπαράσταση στη μνήμη — όχι το πραγματικό DOM του προγράμματος περιήγησης. Το React το χρησιμοποιεί επειδή **ο άμεσος χειρισμός του πραγματικού DOM είναι αργός** και η χειroκίνητη αλλαγή του κάθε φορά που αλλάζει η κατάσταση είναι επιρρεπής σε σφάλματα. ## Πώς λειτουργεί Όταν αλλάζει η κατάσταση, το React δεν αγγίζει αμέσως τη σελίδα. Αντ' αυτού: 1. Δημιουργεί ένα **νέο** εικονικό δέντρο από τα συστατικά σας. 2. Το **συγκρίνει** με το προηγούμενο εικονικό δέντρο (reconciliation) για να υπολογίσει το ελάχιστο σύνολο αλλαγών. 3. Εφαρμόζει **μόνο αυτές τις αλλαγές** στο πραγματικό DOM σε μια μεμονωμένη ενημέρωση δέσμης. ```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 ; } ``` Έτσι γράφετε κώδικα **δηλωτικά** ("η διεπαφή χρήστη φαίνεται *έτσι* για *αυτή* την κατάσταση") και το React καθορίζει τις απαραίτητες λειτουργίες DOM για σας. ## Γιατί έχει σημασία / ανταλλαγές - **Λιγότερες, δεμένες εγγραφές DOM** → λιγότερες δαπανηρές reflows/repaints. - **Ο δηλωτικός κώδικας** είναι ευκολότερο να κατανοηθεί από το χειροκίνητο `document.querySelector` + mutate. - Δεν είναι *μαγικά* "πιο γρήγορο από το DOM" — το ίδιο το diffing κοστίζει CPU. Το κέρδος είναι ότι το React αποφεύγει την περιττή εργασία real-DOM και σας επιτρέπει να σταματήσετε να βελτιστοποιείτε τις ενημερώσεις χειροκίνητα. Σταθερά **keys** σε λίστες βοηθούν τη διαφορά να παραμείνει αποδοτική.