Πώς να κατανοήσετε τις μεθόδους κύκλου ζωής ενός στοιχείου στο ReactJS

Σε αυτό το άρθρο, πρόκειται να διερευνήσουμε τις μεθόδους κύκλου ζωής του ReactJS. Αλλά, προτού προχωρήσουμε στις διαφορετικές μεθόδους κύκλου ζωής της React, πρέπει να καταλάβουμε τι είναι.

Όπως γνωρίζουμε, όλα σε αυτόν τον κόσμο ακολουθούν έναν κύκλο (ας πούμε ανθρώπους ή δέντρα). Είμαστε γεννημένοι, μεγαλώνουμε και μετά πεθαίνουμε. Σχεδόν όλα ακολουθούν αυτόν τον κύκλο στη ζωή του, και τα συστατικά του React το κάνουν επίσης. Τα στοιχεία δημιουργούνται (τοποθετούνται στο DOM), αναπτύσσονται με ενημέρωση και στη συνέχεια πεθαίνουν (αποσύνδεση στο DOM). Αυτό αναφέρεται ως κύκλος ζωής συστατικών.

Υπάρχουν διαφορετικές μέθοδοι κύκλου ζωής που παρέχει το React σε διαφορετικές φάσεις της ζωής ενός συστατικού. Το React καλεί αυτόματα την υπεύθυνη μέθοδο σύμφωνα με τη φάση στην οποία είναι το στοιχείο. Αυτές οι μέθοδοι μας δίνουν καλύτερο έλεγχο στο συστατικό μας και μπορούμε να τους χειριστούμε χρησιμοποιώντας αυτές τις μεθόδους.

Προς το παρόν, γνωρίζουμε ποιες είναι οι μέθοδοι κύκλου ζωής και γιατί είναι σημαντικές. Ποιες είναι λοιπόν αυτές οι διαφορετικές μέθοδοι; Ας ρίξουμε μια ματιά σε αυτά.

Μέθοδοι κύκλου ζωής

Ο κύκλος ζωής ενός στοιχείου ταξινομείται γενικά σε τέσσερα μέρη:

  • αρχικοποίηση
  • βάση
  • ενημέρωση και
  • αποσύνδεση .

Ας συζητήσουμε τις διαφορετικές μεθόδους κύκλου ζωής που είναι διαθέσιμες σε αυτές τις διαφορετικές φάσεις (δηλαδή, αρχικοποίηση, προσάρτηση, ενημέρωση & αποπροσαρμογή).

Αρχικοποίηση

Αυτή είναι η φάση στην οποία το στοιχείο θα ξεκινήσει το ταξίδι του ρυθμίζοντας την κατάσταση (δείτε παρακάτω) και τα στηρίγματα. Αυτό γίνεται συνήθως μέσα στη μέθοδο κατασκευαστή (δείτε παρακάτω για να κατανοήσετε καλύτερα τη φάση αρχικοποίησης).

class Initialize extends React.Component { constructor(props) { // Calling the constructor of // Parent Class React.Component super(props); // initialization process this.state = { date : new Date(), clickedStatus: false }; }

Βάση

Το όνομα είναι αυτονόητο. Το μοντάρισμα είναι η φάση κατά την οποία το στοιχείο React προσαρτάται στο DOM (δηλ. Δημιουργείται και εισάγεται στο DOM)

Αυτή η φάση έρχεται στη σκηνή μετά την ολοκλήρωση της φάσης προετοιμασίας. Σε αυτήν τη φάση, το συστατικό μας αποδίδεται για πρώτη φορά. Οι μέθοδοι που είναι διαθέσιμες σε αυτήν τη φάση είναι:

1. στοιχείοWillMount ()

Αυτή η μέθοδος καλείται λίγο πριν από ένα στοιχείο προσαρτηθεί στο DOM ή καλείται η μέθοδος απόδοσης. Μετά από αυτήν τη μέθοδο, το στοιχείο τοποθετείται.

Σημείωση: Δεν πρέπει να κάνετε κλήσεις API ή αλλαγές δεδομένων χρησιμοποιώντας αυτό το. Setstate σε αυτήν τη μέθοδο, επειδή καλείται πριν από τη μέθοδο απόδοσης. Έτσι, τίποτα δεν μπορεί να γίνει με το DOM (δηλαδή ενημέρωση των δεδομένων με απόκριση API), καθώς δεν έχει τοποθετηθεί. Επομένως, δεν μπορούμε να ενημερώσουμε την κατάσταση με την απόκριση API.

2. στοιχείοDidMount ()

Αυτή η μέθοδος καλείται αφού το στοιχείο τοποθετηθεί στο DOM. Όπως το componentWillMount, καλείται μία φορά σε έναν κύκλο ζωής. Πριν από την εκτέλεση αυτής της μεθόδου, η μέθοδος απόδοσης ονομάζεται (δηλαδή, μπορούμε να έχουμε πρόσβαση στο DOM). Μπορούμε να κάνουμε κλήσεις API και να ενημερώσουμε την κατάσταση με την απόκριση API.

Ρίξτε μια ματιά για να κατανοήσετε αυτές τις μεθόδους στερέωσης:

class LifeCycle extends React.Component { componentWillMount() { console.log('Component will mount!') } componentDidMount() { console.log('Component did mount!') this.getList(); } getList=()=>{ /*** method to make api call*** } render() { return ( 

Hello mounting methods!

); } }

Ενημέρωση

Αυτή είναι η τρίτη φάση από την οποία περνά το συστατικό μας. Μετά τη φάση στερέωσης όπου έχει δημιουργηθεί το στοιχείο, η φάση ενημέρωσης μπαίνει στη σκηνή. Εδώ αλλάζει η κατάσταση του στοιχείου και, ως εκ τούτου, πραγματοποιείται εκ νέου απόδοση.

Σε αυτήν τη φάση, τα δεδομένα του στοιχείου (κατάσταση & στηρίγματα) ενημερώνονται ως απάντηση σε συμβάντα χρηστών, όπως κλικ, πληκτρολόγηση και ούτω καθεξής. Αυτό έχει ως αποτέλεσμα την εκ νέου απόδοση του στοιχείου. Οι μέθοδοι που είναι διαθέσιμες σε αυτήν τη φάση είναι:

  1. shouldComponentUpdate ()

Αυτή η μέθοδος καθορίζει εάν το στοιχείο πρέπει να ενημερωθεί ή όχι. Από προεπιλογή, επιστρέφει true. Αλλά σε κάποιο σημείο, εάν θέλετε να επαναπροσδιορίσετε το στοιχείο σε κάποια κατάσταση, τότε η μέθοδος seharusnyaComponentUpdate είναι το σωστό μέρος.

Ας υποθέσουμε, για παράδειγμα, ότι θέλετε να κάνετε εκ νέου απόδοση του στοιχείου σας μόνο όταν υπάρχει αλλαγή στη στήριξη - στη συνέχεια χρησιμοποιήστε τη δύναμη αυτής της μεθόδου. Λαμβάνει επιχειρήματα όπως το NextProps και το NextState που μας βοηθούν να αποφασίσουμε αν θα κάνουμε εκ νέου απόδοση σε σύγκριση με την τρέχουσα τιμή στήριξης.

2. componentWillUpdate ()

Όπως και άλλες μέθοδοι, το όνομά του είναι επίσης αυτονόητο. Ονομάζεται πριν πραγματοποιηθεί η εκ νέου απόδοση του στοιχείου. Καλείται μία φορά μετά τη μέθοδο « shouldComponentUpdate ». Εάν θέλετε να εκτελέσετε κάποιο υπολογισμό πριν από την εκ νέου απόδοση του στοιχείου και μετά την ενημέρωση της κατάστασης και του στηρίγματος, τότε αυτό είναι το καλύτερο μέρος για να το κάνετε. Όπως και η μέθοδος 'shouldComponentUpdate', λαμβάνει επίσης επιχειρήματα όπως nextProps και nextState.

3. ComponentDidUpdate ()

Αυτή η μέθοδος καλείται αμέσως μετά την εκ νέου απόδοση του στοιχείου. Μετά την ενημέρωση του νέου (ενημερωμένου) στοιχείου στο DOM, εκτελείται η μέθοδος " componentDidUpdate ". Αυτή η μέθοδος λαμβάνει ορίσματα όπως prevProps και prevState.

Ρίξτε μια ματιά για να κατανοήσετε καλύτερα τις μεθόδους ενημέρωσης:

class LifeCycle extends React.Component { constructor(props) { super(props); this.state = { date : new Date(), clickedStatus: false, list:[] }; } componentWillMount() { console.log('Component will mount!') } componentDidMount() { console.log('Component did mount!') this.getList(); } getList=()=>{ /*** method to make api call*** fetch('//api.mydomain.com') .then(response => response.json()) .then(data => this.setState({ list:data })); } shouldComponentUpdate(nextProps, nextState){ return this.state.list!==nextState.list } componentWillUpdate(nextProps, nextState) { console.log('Component will update!'); } componentDidUpdate(prevProps, prevState) { console.log('Component did update!') } render() { return ( 

Hello Mounting Lifecycle Methods!

); } }

Αποσύνδεση

Αυτή είναι η τελευταία φάση του κύκλου ζωής του στοιχείου. Όπως υποδηλώνει σαφώς το όνομα, το στοιχείο αποσυνδέεται από το DOM σε αυτήν τη φάση. Η μέθοδος που είναι διαθέσιμη σε αυτήν τη φάση είναι:

1. στοιχείοWillUnmount ()

Αυτή η μέθοδος καλείται πριν από την αποσύνδεση του στοιχείου. Πριν από την αφαίρεση του στοιχείου από το DOM, εκτελείται το " componentWillUnMount" . Αυτή η μέθοδος υποδηλώνει το τέλος του κύκλου ζωής του στοιχείου.

Εδώ είναι μια αναπαράσταση διαγράμματος ροών μεθόδων κύκλου ζωής:

Αυτό αφορά όλο αυτό το σημαντικό μέρος του κόσμου React - μεθόδους κύκλου ζωής. Ελπίζω να σας άρεσε να το διαβάζετε.

Ευχαριστώ!