React Components - Στηρίγματα και καταστάσεις στο ReactJS με παραδείγματα

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

«Στο React, όλα είναι συστατικά»

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

τι είναι ένα φασόλι java

Τι είναι τα στοιχεία αντιδράσεων;

Νωρίτερα οι προγραμματιστές έπρεπε να γράψουν 1000 γραμμές κώδικα για την ανάπτυξη μιας απλής εφαρμογής μιας σελίδας. Οι περισσότερες από αυτές τις εφαρμογές ακολούθησαν την παραδοσιακή δομή DOM και η πραγματοποίηση αλλαγών σε αυτές ήταν πολύ δύσκολη και κουραστική εργασία για τους προγραμματιστές.Έπρεπε να αναζητήσουν χειροκίνητα το στοιχείο που χρειαζόταν την αλλαγή και να το ενημερώσουν αναλόγως. Ακόμα και ένα μικρό λάθος θα οδηγούσε σε αποτυχία της εφαρμογής. Επιπλέον, η ενημέρωση του DOM ήταν πολύ ακριβή. Έτσι, εισήχθη η προσέγγιση με βάση τα συστατικά. Σε αυτήν την προσέγγιση, ολόκληρη η εφαρμογή χωρίζεται σε λογικά κομμάτια που ονομάζονται Συστατικά. Το React ήταν ένα από τα πλαίσια που επέλεξαν αυτήν την προσέγγιση.Εάν σκοπεύετε να οικοδομήσετε την καριέρα σας στην ανάπτυξη ιστού, η αρχή θα ανοίξει πολλές ευκαιρίες για εσάς.





Ας καταλάβουμε τώρα ποια είναι αυτά τα συστατικά.

Τα στοιχεία αντίδρασης θεωρούνται τα δομικά στοιχεία του περιβάλλοντος εργασίας χρήστη. Κάθε ένα από αυτά τα στοιχεία υπάρχει στον ίδιο χώρο αλλά εκτελείται ανεξάρτητα το ένα από το άλλο. Τα στοιχεία του React έχουν τη δική τους δομή, μεθόδους, καθώς και API. Είναι επαναχρησιμοποιήσιμα και μπορούν να εγχυθούν σε διεπαφές ανάλογα με τις ανάγκες. Για καλύτερη κατανόηση, θεωρήστε ολόκληρο το περιβάλλον χρήστη ως δέντρο.Εδώ το αρχικό συστατικό γίνεται η ρίζα και κάθε ένα από τα ανεξάρτητα κομμάτια γίνεται κλάδος, τα οποία χωρίζονται περαιτέρω σε υποκαταστήματα.



Δέντρο UI - Στοιχεία αντιδράσεων - EdurekaΑυτό διατηρεί τη διεπαφή χρήστη οργανωμένη και επιτρέπει στις αλλαγές δεδομένων και κατάστασης να λογικά ρέουν από τη ρίζα σε κλάδους και στη συνέχεια σε υποκαταστήματα. Τα στοιχεία πραγματοποιούν κλήσεις προς το διακομιστή απευθείας από την πλευρά του πελάτη που επιτρέπει στο DOM να ενημερώνεται δυναμικά χωρίς να ανανεώνεται η σελίδα. Αυτό συμβαίνει επειδή τα στοιχεία αντιδράσεως βασίζονται στην έννοια των αιτημάτων AJAX. Κάθε στοιχείο έχει τη δική του διεπαφή που μπορεί να πραγματοποιεί κλήσεις στον διακομιστή και να τις ενημερώνει. Καθώς αυτά τα στοιχεία είναι ανεξάρτητα το ένα από το άλλο, το καθένα μπορεί να ανανεωθεί χωρίς να επηρεάσει άλλα ή το περιβάλλον χρήστη στο σύνολό του.

Χρησιμοποιούμε React.createClass () μέθοδος για τη δημιουργία ενός στοιχείου. Αυτή η μέθοδος πρέπει να περάσει ένα όρισμα αντικειμένου που θα καθορίσει το στοιχείο React. Κάθε στοιχείο πρέπει να περιέχει ακριβώς ένα καθιστώ() μέθοδος. Είναι η πιο σημαντική ιδιότητα ενός στοιχείου που είναι υπεύθυνο για την ανάλυση του HTML σε JavaScript, JSX. Αυτό καθιστώ() θα επιστρέψει την αναπαράσταση HTML του στοιχείου ως κόμβο DOM. Επομένως, όλες οι ετικέτες HTML πρέπει να περικλείονται σε μια ετικέτα εγκλεισμού μέσα στο καθιστώ() .

Ακολουθεί ένα δείγμα κώδικα για τη δημιουργία ενός στοιχείου.



εισαγωγή React από 'react' εισαγωγή ReactDOM από την τάξη 'react-dom' MyComponent επεκτείνει το React.Component {render () {return (

Το αναγνωριστικό σας είναι {this.state.id}

)}} ReactDOM.render (, document.getElementById ('περιεχόμενο'))

Πολιτεία εναντίον Props

Αντιδράστε τον κύκλο ζωής των συστατικών

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

  1. Αρχική φάση
  2. Ενημέρωση Φάσης
  3. Τα στηρίγματα αλλάζουν Φάση
  4. Αποσύνδεση Φάσης

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

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

  1. getDefaultProps (): Αυτή η μέθοδος χρησιμοποιείται για τον καθορισμό της προεπιλεγμένης τιμής του αυτό. στηρίζει . Καλείται προτού δημιουργηθεί ακόμη και το στοιχείο σας ή τυχόν στηρίγματα από τον γονέα μεταβιβαστούν σε αυτό.
  2. getInitialState (): Αυτή η μέθοδος χρησιμοποιείται γιαπροσδιορίζω η προεπιλεγμένη τιμή του αυτό. κράτος πριν δημιουργηθεί το στοιχείο σας.
  3. componentWillMount (): Αυτή είναι η τελευταία μέθοδος που μπορείτε να καλέσετε πριν από την απόδοση του στοιχείου σας στο DOM. Αλλά αν καλέσετε setState () Μέσα σε αυτήν τη μέθοδο το στοιχείο σας δεν θα αποδώσει ξανά.
  4. καθιστώ(): Θ Η μέθοδος είναι υπεύθυνη για την επιστροφή ενός ριζικού κόμβου HTML ρίζας και πρέπει να ορίζεται σε κάθε στοιχείο. Μπορείτε να επιστρέψετε μηδενικό ή ψευδής σε περίπτωση που δεν θέλετε να αποδώσετε τίποτα.
  5. componentDidMount (): Μόλις το στοιχείο αποδίδεται και τοποθετηθεί στο DOM, αυτό καλείται μέθοδος. Εδώ μπορείτε να εκτελέσετε τυχόν εργασίες ερωτήματος DOM.

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

  1. shouldComponentUpdate (): Χρησιμοποιώντας αυτήν τη μέθοδο μπορείτε να ελέγξετε τη συμπεριφορά του στοιχείου σας για ενημέρωση. Εάν επιστρέψετε ένα αληθινό από αυτήν τη μέθοδο,το στοιχείο θα ενημερωθεί. Διαφορετικά, εάν αυτή η μέθοδος επιστρέψει aψευδής, το στοιχείο θα παραλείψει την ενημέρωση.
  2. componentWillUpdate (): Τονομάζεται η μέθοδος του ιust πριν από την ενημέρωση του στοιχείου σας. Σε αυτήν τη μέθοδο, δεν μπορείτε να αλλάξετε την κατάσταση του στοιχείου σας καλώντας αυτό. setState .
  3. καθιστώ(): Εάν επιστρέφετε ψευδείς μέσω shouldComponentUpdate () , ο κωδικός μέσα καθιστώ() θα κληθεί ξανά για να διασφαλίσει ότι το στοιχείο σας εμφανίζεται σωστά.
  4. componentDidUpdate (): Μόλις ενημερωθεί και αποδοθεί το στοιχείο, τότε γίνεται χρήση αυτής της μεθόδου. Μπορείτε να βάλετε οποιονδήποτε κώδικα μέσα σε αυτήν τη μέθοδο, τον οποίο θέλετε να εκτελέσετε μόλις ενημερωθεί το στοιχείο.

ντο. Στάδια αλλαγής φάσης - Μετά το στοιχείο έχει αποδοθεί στο DOM, τη μόνη άλλη φορά που το στοιχείο θα ενημερωθεί, εκτός από την αλλαγή κατάστασης είναι όταν αλλάζει η τιμή στήριξης. Πρακτικά αυτή η φάση λειτουργεί παρόμοια με την προηγούμενη φάση, αλλά αντί για το κράτος, ασχολείται με τα στηρίγματα. Έτσι, αυτή η φάση έχει μόνο μία πρόσθετη μέθοδο από τη φάση ενημέρωσης.

  1. componentWillReceiveProps (): Αυτή η μέθοδος επιστρέφει ένα όρισμα που περιέχει τη νέα τιμή στήριξης που πρόκειται να εκχωρηθεί στο στοιχείο.
    Οι υπόλοιπες μέθοδοι κύκλου ζωής συμπεριφέρονται ταυτόσημα με τις μεθόδους που είδαμε στην προηγούμενη φάση.
  2. shouldComponentUpdate ()
  3. componentWillUpdate ()
  4. καθιστώ()
  5. componentDidUpdate ()

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

  1. componentWillUnmount (): Μόλις ενεργοποιηθεί αυτή η μέθοδος, το στοιχείο σας θα αφαιρεθεί μόνιμα από το DOM.Σε αυτή τη μέθοδο, Υμπορείτε να εκτελέσετε οποιεσδήποτε σχετικές εργασίες καθαρισμού, όπως αφαίρεση ακροατών συμβάντων, διακοπή χρονομέτρων κ.λπ.

Ακολουθεί το ολόκληρο διάγραμμα κύκλου ζωής:

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

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

Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων και θα επικοινωνήσουμε μαζί σας.