Ας μιλήσουμε για Συμφιλίωση!
Η React είναι μια από τις πιο δημοφιλείς βιβλιοθήκες διεπαφής χρήστη σήμερα. Είναι γρήγορο, υποστηρίζεται από το facebook και δεν είναι πολύ δύσκολο να το μάθεις. Αλλά όπως και η javascript, για μένα η εκμάθηση του react αφορούσε περισσότερο στην κατανόηση του τι κάνει το React. Δεν έχω κοιτάξει κάτω από κάθε μικρή γωνιά για να δω τι κάνει το React, αλλά προσπαθώ να παραμένω ενημερωμένος με τις αλλαγές και τις μελλοντικές αλλαγές για να δω ποια κατεύθυνση πηγαίνει. Μου αρέσει να γράφω το React και γίνεται ακόμα πιο διασκεδαστικό όταν ξέρεις τι συμβαίνει στην πραγματικότητα.
Αυτό για το οποίο ήθελα να γράψω περισσότερα και να ερευνήσω είναι τι ακριβώς είναι το Reconciliation και τι κάνει; Γιατί είναι σημαντικό? Έτσι, η Συμφιλίωση είναι η διαδικασία κατά την οποία το React φαίνεται να φορτώνει ξανά δεδομένα ή ολόκληρη την εφαρμογή στις ενημερώσεις, ενώ στην πραγματικότητα δεν το κάνει. Είναι το API που χειρίζεται ό,τι αλλάζει σε κάθε ενημέρωση. Είναι επίσης μέρος του τρόπου με τον οποίο το React έλυσε τη διέλευση του DOM με γραμμική και όχι εκθετική πολυπλοκότητα. Έτσι, αν ρίξουμε μια ματιά στην τεκμηρίωση του facebook, μπορούμε να δούμε ότι έχτισαν τον εικονικό τους αλγόριθμο DOM από δύο υποθέσεις για να επισπεύσουν αυτή τη διαδικασία,
- Δύο στοιχεία διαφορετικών τύπων θα παράγουν διαφορετικά δέντρα
- Ο προγραμματιστής μπορεί να υποδείξει ποια θυγατρικά στοιχεία μπορεί να είναι σταθερά σε διαφορετικές αποδόσεις με ένα βασικό στήριγμα
Έχοντας αυτές τις υποθέσεις κατά νου, το React θα λάβει το εσωτερικό του ενσωματωμένο μοντέλο του δέντρου DOM, γνωστό και ως εικονικό, και θα το συγκρίνει με το πραγματικό DOM ξεκινώντας από τα δύο ριζικά στοιχεία.
Εάν τα ριζικά στοιχεία έχουν διαφορετικούς τύπους, το React θα δημιουργήσει ένα νέο δέντρο, όλοι οι προηγούμενοι κόμβοι DOM καταστρέφονται και τα στοιχεία από το επίπεδο ρίζας και κάτω από τότε θα λάβουν τη μέθοδο του κύκλου ζωής componentWillUnmount(). Φυσικά, το React θα δημιουργήσει στη συνέχεια ένα νέο δέντρο και τα στοιχεία θα λάβουν αυτό που θα περιμένατε τώρα, componentWillMount() και componentDidMount(). Επίσης σημαντικό να κατανοήσουμε είναι επειδή οι κόμβοι DOM καταστρέφονται και αναδημιουργούνται, όχι μόνο αυτοί οι κόμβοι έχουν φύγει, αλλά και οποιαδήποτε κατάσταση που διατηρούσαν θα εξαφανιστεί επίσης.
Για παράδειγμα, ας δούμε αυτόν τον κώδικα
//original <div> <Todo /> </div> //new replaced <p> <Todo /> </p>
Εδώ είχαμε αρχικά ένα στοιχείο Todo ένθετο μέσα σε μια ετικέτα DIV. Στη συνέχεια, αντικαθιστούμε τις ετικέτες div με ετικέτες παραγράφου. Αυτό θα καταστρέψει εντελώς και θα ξαναχτίσει αυτή τη ρίζα του δέντρου. Αυτό το παράδειγμα μπορεί να φέρει το ερώτημα τι συμβαίνει όταν το React ελέγχει δύο κόμβους που έχουν το ίδιο στοιχείο, αλλά τα χαρακτηριστικά είναι διαφορετικά; Το Well React το ελέγχει στην πραγματικότητα, ΔΕΝ θα διαγράψει τους κόμβους σε αυτήν την περίπτωση, αλλά απλώς θα ενημερώσει τα χαρακτηριστικά ανάλογα.
Επομένως, εάν δεν διαγράφουμε τους κόμβους DOM κατά την αναψυχή, τι σημαίνει πραγματικά αυτό; Λοιπόν, υπάρχουν πολλά θετικά στο ότι δεν χρειάζεται να αναδημιουργήσουμε κόμβους DOM στην εφαρμογή μας, και αυτό είναι που κάνει αυτή τη διαδικασία τόσο δροσερή και το React τόσο γρήγορα. Όπως αναφέρθηκε προηγουμένως, όταν πρέπει να διαγράψουμε και να δημιουργήσουμε ξανά μια κατάσταση κόμβου DOM που κρατούνταν σε αυτόν τον κόμβο, τώρα χάνεται. Δεδομένου ότι τώρα απλώς ενημερώνουμε τον κόμβο, η κατάσταση διατηρείται. Επομένως, εάν το στοιχείο βρίσκεται ήδη στη σελίδα, δεν καταστρέφεται ή δεν αναδημιουργείται ποιες μέθοδοι κύκλου ζωής θα εφαρμοστούν σε αυτό; Το React κάτω από την κουκούλα θα στείλει τώρα αυτό το στοιχείο componentWillReceiveProps και componentWillUpdate. Και οι δύο είναι κλήσεις που πραγματοποιούνται στον κύκλο ζωής ενός στοιχείου πριν από την κλήση της μεθόδου απόδοσης.
Επομένως, τα πράγματα που πρέπει να σημειωθούν στη συμφωνία είναι ότι, ο αλγόριθμος είναι περίπλοκος με την έννοια ότι τα δεδομένα θα μπορούσαν να παραμείνουν στη σελίδα, αλλά αλλάξτε τους κόμβους dom και το React μπορεί να μην μπορέσει να το δει αυτό χωρίς το βασικό στήριγμα, κάτι που δεν πρόκειται να λάβω μέχρι σήμερα, αλλά καλό είναι να έχετε κατά νου όταν γράφετε και βελτιστοποιείτε τις εφαρμογές σας react. Ένα καλό παράδειγμα αυτού είναι μια λίστα, η οποία βρίσκεται στην τεκμηρίωση του Reacts όπου ένα li αλλάζει από το πρώτο παιδί στο τρίτο παιδί και δύο κόμβοι προστίθενται μπροστά του, το React θα αποδώσει ξανά ολόκληρη τη λίστα, αντί να διατηρήσει τον κόμβο που εξακολουθούσε να υπάρχει. Τα κλειδιά μπαίνουν σε έναν εντελώς άλλο τομέα του τι είναι καλό κλειδί και τι δεν είναι καλό κλειδί και υπάρχουν πάρα πολλά άρθρα και αναρτήσεις ιστολογίου για αυτό.
//original <li>testing1</li> <li>testing2</li> //Full recreation <li>testing3</li> <li>testing1</li> <li>testing2</li>
Ελπίζω λοιπόν να μάθατε κάτι για τη συμφιλίωση σήμερα, τουλάχιστον τι είναι, οπότε αν κάποιος το αναφέρει στη συζήτηση μπορείτε να το ακολουθήσετε, ίσως έχετε μια καλύτερη ιδέα για το πότε ισχύουν ορισμένες μέθοδοι κύκλου ζωής και πότε να τις χρησιμοποιήσετε.
