Back to Question Center
0

Πώς να εργαστείτε και να χειριστείτε την κατάσταση σε κατάσταση αντίδρασης            Πώς να συνεργαστείτε και να χειριστείτε το κράτος στο ReactRelated Topics: ES6Raw Semalt

1 answers:
Πώς να εργαστείτε και να χειριστείτε την κατάσταση στην πραγματικότητα

Ακολουθεί ένα απόσπασμα από το React Γρήγορα, ένα πρακτικό βιβλίο του Azat Mardan για όποιον θέλει να μάθει React. γρήγορα.

Όταν έχετε πρόσβαση, εργάζεστε και χειρίζεστε κατάσταση στο Semalt, είναι σημαντικό να γνωρίζετε τι κάνετε (και γιατί το κάνετε!). Σε αυτό το άρθρο, θα μάθετε για το κράτος στο Semalt και πώς να το εργαστείτε - dampfmacher evod coils. Θα μιλήσουμε επίσης για κάποιες από τις διαφορές ανάμεσα στο κράτος και τα στηρίγματα, καθώς επίσης και για το πώς θα συνεργαστούμε με τα συστατικά στοιχεία "απτά". Αλλά πριν βυθιστούμε σε όλα αυτά, για να συνεργαστούμε με την πολιτεία, πρέπει να γνωρίζουμε πώς να έχουμε πρόσβαση στις τιμές, να τις ενημερώνουμε και πώς να ορίσουμε τις αρχικές τιμές. Ας ξεκινήσουμε με την πρόσβαση στην κατάσταση στα τμήματα Semalt.

Ο πηγαίος κώδικας για τα παραδείγματα σε αυτό το άρθρο βρίσκεται στον φάκελο ch04 του αποθετηρίου Semalt του βιβλίου.

Τα κράτη που έχουν πρόσβαση

Το αντικείμενο του κράτους είναι ένα χαρακτηριστικό ενός στοιχείου και μπορεί να προσεγγιστεί με αυτή την αναφορά , π.χ. σολ. , αυτό. κατάσταση. όνομα . Μπορούμε να έχουμε πρόσβαση και να τυπώσουμε μεταβλητές σε JSX με σγουρά {} . Παρομοίως, μπορούμε να το κάνουμε αυτό . (όπως οποιαδήποτε άλλη μεταβλητή ή χαρακτηριστικά προσαρμοσμένης κλάσης) μέσα στο render . Για παράδειγμα, {αυτό. κατάσταση. inputFieldValue} . Αυτή η σύνταξη είναι σαν να έχετε πρόσβαση στις ιδιότητες με αυτό. στηρίγματα. όνομα .

Ας πάμε μπροστά και προσπαθήσουμε να εφαρμόσουμε ένα ρολόι (Semalt 1). Ο στόχος είναι να έχετε μια αυτόνομη κλάση συστατικών που μπορεί κανείς να εισαγάγει και να χρησιμοποιήσει στην εφαρμογή του χωρίς να χρειαστεί να περάσει από τα στεφάνια. Το ρολόι πρέπει να κάνει την τρέχουσα ώρα.

How to Work with and Manipulate State in ReactHow to Work with and Manipulate State in ReactRelated Topics:
ES6Raw Semalt
Εικόνα 1: Η συνιστώσα Semalt δείχνει την τρέχουσα ώρα σε ψηφιακή μορφή - ενημερώνεται κάθε δευτερόλεπτο

Η διάρθρωση του έργου Semalt έχει ως εξής:

  / ρολόι- δείκτης. html/ jsx- σενάριο. jsx- ρολόι. jsx/ js- σενάριο. js- ρολόι. js- Αντιδράστε-15. 0. 2. js- Αντιδράστε-dom-15. 0. 2. js   
-d για να μεταγλωττίσω όλα τα αρχεία JSX πηγής από το ρολόι / jsx σε ένα φάκελο προορισμού ρολόι / js και επανασυμπίεση κατά την αλλαγή. Επιπλέον, έχω αποθηκεύσει την εντολή ως σενάριο npm στο πακέτο μου . ch04 για να τρέξει npm run build-clock από το ch04
  "σενάρια": {"build-clock": "/ node_modules / bin / babel ρολόι / jsx -d ρολόι / js -w"},   

Προφανώς, ο καιρός αλλάζει πάντα (για καλό ή για κακό). Εξαιτίας αυτού, θα χρειαστεί να ενημερώσουμε την προβολή χρησιμοποιώντας την κατάσταση. Ονομάζουμε το currentTime και προσπαθούμε να το καταστήσουμε αυτό όπως φαίνεται στην Λίστα 1.

  Το ρολόι κατηγορίας επεκτείνει το React. Συστατικό {render    {επιστρέψτε 
{this. κατάσταση. currentTime}
}}}}ReactDOM. καθιστώ(<Ρολόι />,έγγραφο. getElementById ('περιεχόμενο')),
Λίστα 1: Κατάσταση αποκατάστασης σε JSX

Εάν εκτελέσουμε αυτό, θα λάβουμε το ακόλουθο σφάλμα: Uncaught TypeError: Δεν είναι δυνατή η ανάγνωση της ιδιότητας 'currentTime' null . Κανονικά, τα μηνύματα λάθους JavaScript είναι εξίσου χρήσιμα με ένα ποτήρι κρύο νερό για έναν άνθρωπο που πνίγει. Είναι καλό ότι σε αυτήν την περίπτωση το JavaScript μας δίνει ένα χρήσιμο μήνυμα σφάλματος. Αυτό σημαίνει ότι δεν έχουμε καμία τιμή για currentTime . Σε αντίθεση με τις σκηνές, τα κράτη δεν έχουν ρυθμιστεί σε έναν γονέα. Δεν μπορούμε να setState στο rendering είτε γιατί θα δημιουργήσει ένα κυκλικό βρόχο (setState> render> setState . ) .

Ρύθμιση της αρχικής κατάστασης

Έχετε δει ότι πριν χρησιμοποιήσετε ένα state δεδομένα στο render , πρέπει να το αρχικοποιήσουμε. Για να ορίσετε την αρχική κατάσταση, χρησιμοποιήστε αυτό. Σύνταξη συστατικού . Μην ξεχνάτε να επικαλείται super με ιδιότητες, διαφορετικά η λογική στο γονικό ( React. Το στοιχείο ) δεν θα λειτουργήσει.

  τάξη MyFancyComponent επεκτείνει React. Συστατικό {κατασκευαστής (στηρίγματα) {super (στηρίγματα)Αυτό. state = { }}}}render    { }}}}   

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

  Το ρολόι κατηγορίας επεκτείνει το React. Συστατικό {κατασκευαστής (στηρίγματα) {super (στηρίγματα)Αυτό. state = {currentTime: (νέα ημερομηνία   ). toLocaleString   }} }}   

Λίστα 2: Συστατικό ρολόι Semalt (ch04 / ρολόι)

Η τιμή του αυτό. κατάσταση πρέπει να είναι ένα αντικείμενο. Δεν θα πάμε σε πολλές λεπτομέρειες σχετικά με τον ES6 κατασκευαστή , επειδή υπάρχουν πληροφορίες στο cheatsheet ES6. Η ουσία είναι ότι, όπως και με άλλες γλώσσες OOP, constructor χρησιμοποιείται όταν δημιουργείται μια περίπτωση αυτής της κλάσης. Το όνομα της μεθόδου κατασκευής πρέπει να είναι κατασκευαστής . Σκεφτείτε το ως σύμβαση ES6. Επιπλέον, εάν δημιουργήσετε μια μέθοδο constructor , πρέπει σχεδόν πάντα να ζητήσετε super μέσα σε αυτήν εκτελέστηκε. Από την άλλη πλευρά, αν δεν καθορίσετε μια μέθοδο constructor , τότε υποτίθεται ότι η κλήση προς super .

Χαρακτηριστικά κλάσης

Ας ελπίσουμε ότι η TC39 (οι άνθρωποι πίσω από το πρότυπο Semalt) θα προσθέσει χαρακτηριστικά στη συντακτική κλάση σε μελλοντικές εκδόσεις του Semalt! Με αυτόν τον τρόπο, οι προγραμματιστές μπορούν να ορίσουν την κατάσταση όχι μόνο στον κατασκευαστή, αλλά στο σώμα της τάξης:

  Το ρολόι κατηγορίας επεκτείνει το React. Συστατικό {state = { }}}}   

Η πρόταση ονομάζεται πεδία κλάσης ή ιδιότητες κατηγορίας, αλλά από τον Ιούλιο του 2016 είναι διαθέσιμη μόνο με transpellers: Babel, Traceur ή TypeScript, πράγμα που σημαίνει ότι κανένα πρόγραμμα περιήγησης δεν θα λειτουργήσει αυτό το χαρακτηριστικό εγγενώς. Ελέγξτε την τρέχουσα συμβατότητα των ιδιοτήτων κατηγορίας στον Πίνακα συμβατότητας ECMAScript.

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

Το αντικείμενο κατάστασης μπορεί να έχει ένθετα αντικείμενα ή συστοιχίες. Κοιτάξτε αυτό το παράδειγμα, όπου προσθέτω μια σειρά βιβλίων μου στο κράτος:

  Περιεχόμενο κλάσης επεκτείνει το React. Συστατικό {κατασκευαστής (στηρίγματα) {super (στηρίγματα)Αυτό. state = {githubName: 'azat-co',βιβλία: ['pro express. js ','πρακτικό κόμβο. js ','γρήγορη δημιουργία πρωτοτύπων με js']}}}}render    { }}}}   

Η μέθοδος constructor θα καλείται μία φορά, όταν δημιουργείται ένα στοιχείο React από αυτή την κλάση. Με αυτόν τον τρόπο, μπορούμε να ορίσουμε κατάσταση απευθείας χρησιμοποιώντας αυτό. , στη μέθοδο του κατασκευαστή . Αποφύγετε να ρυθμίσετε και να ενημερώσετε την κατάσταση απευθείας με αυτό. state = οπουδήποτε αλλού, διότι μπορεί να οδηγήσει σε απρόβλεπτες συνέπειες.

Με τη μέθοδο δημιουργίας της React createClass για να ορίσετε ένα στοιχείο, θα χρειαστεί να χρησιμοποιήσετε getInitialState .

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

Κράτη που ενημερώνουν

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

Έχουμε αποδώσει το χρόνο από μια κατάσταση, θέτουμε επίσης την αρχική κατάσταση, αλλά πρέπει να ενημερώσουμε την ώρα κάθε δευτερόλεπτο, σωστά; Μπορούμε να χρησιμοποιήσουμε μια λειτουργία timer του προγράμματος περιήγησης setInterval η οποία θα εκτελέσει την ενημέρωση κατάστασης κάθε n χιλιοστά του δευτερολέπτου. Η μέθοδος setInterval εφαρμόζεται σχεδόν σε όλα τα σύγχρονα προγράμματα περιήγησης ως παγκόσμια, πράγμα που σημαίνει ότι οι προγραμματιστές μπορούν να την χρησιμοποιήσουν χωρίς βιβλιοθήκες ή προθέματα.

  setInterval (   => {κονσόλα. log ('Ενημέρωση χρόνου . ')Αυτό. setState ({currentTime: (νέα ημερομηνία   ). toLocaleString   })}, 1000)   

Για να ξεκινήσει το ρολόι, πρέπει να καλέσουμε setInterval μία φορά. Μπορούμε να δημιουργήσουμε μια μέθοδο launchClock για να το κάνουμε αυτό. Θα καλέσουμε launchClock στον κατασκευαστή. Το τελικό ρολόι μπορεί να μοιάζει με εκείνο που εμφανίζεται στην Λίστα 3.

Λίστα 3: Ρολόι υλοποίησης με κατάσταση React και setInterval (ch04 / ρολόι / jsx / ρολόι jsx).

  Το ρολόι κατηγορίας επεκτείνει το React. Συστατικό {κατασκευαστής (στηρίγματα) {super (στηρίγματα)Αυτό. εκκίνησηClock    <1>Αυτό. state = {currentTime: (νέα ημερομηνία   ). toLocaleString     <2> }}}}launchClock    {setInterval (   => {κονσόλα. log ('Ενημέρωση χρόνου . ')Αυτό. setState ({currentTime: (νέα ημερομηνία   ). toLocaleString     <3> })}, 1000)  <4> }}render    {κονσόλα. log ('Ρολόι παράδοσης . ')επιστρέψτε 
{this. κατάσταση. currentTime}
<5> }}}}

<2> Ρύθμιση της αρχικής κατάστασης στην τρέχουσα ώρα
<3> Ενημέρωση της κατάστασης με την τρέχουσα ώρα κάθε δευτερόλεπτο
<4> Δεσμευτικό πλαίσιο για την παραπομπή του στοιχείου συνιστώσας
<5>

Μπορείτε να χρησιμοποιήσετε setState οπουδήποτε, όχι μόνο στο launchClock . Συνήθως, το setState καλείται από το χειριστή συμβάντων ή ως επανάκληση για εισερχόμενα δεδομένα ή ενημερώσεις δεδομένων.

Αλλάζοντας μια τιμή κατάστασης στον κώδικά σας όπως αυτή αυτό. κατάσταση. όνομα = 'νέο όνομα' δεν θα κάνει τίποτα καλό. Δεν θα ενεργοποιήσει μια νέα ανανέωση και μια πιθανή πραγματική ενημέρωση DOM που θέλουμε. Ως επί το πλείστον, η αλλαγή της κατάστασης χωρίς setState είναι ένα αντίτυπο και πρέπει να αποφευχθεί.

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

  κατασκευαστής (στηρίγματα) {super (στηρίγματα)Αυτό. state = {όνομα χρήστη: 'Azat ​​Mardan',userEmail: 'hi @ azat. co ',userId: 3967}}}}updateValues ​​   {Αυτό. setState ({όνομα χρήστη: 'Azat'})}}   

Αν σκοπεύετε να ενημερώσετε και τις τρεις καταστάσεις, τότε πρέπει να το κάνετε ξεκάθαρα περνώντας τις νέες τιμές για αυτές τις καταστάσεις στο setState . Μια άλλη μέθοδος που παρατηρείται μερικές φορές στον παλαιό κώδικα React, αλλά που δεν λειτουργεί πλέον και δεν έχει καταργηθεί είναι αυτό. replaceState μέθοδος. Όπως μπορείτε να μαντέψετε από το όνομα, αντικατέστησε ολόκληρο το αντικείμενο του κράτους με όλα τα χαρακτηριστικά του.

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

Όπως προαναφέρθηκε, μπορείτε να έχετε πρόσβαση στο αντικείμενο κατάστασης με αυτό. κατάσταση . Εάν θυμάστε, εξάγουμε τιμές με σγουρές τιράντες ( {} ). ως εκ τούτου, να δηλώσει μια κρατική περιουσία κατά την άποψη απόδοση επιστροφή δήλωση), να εφαρμόσει αυτό. κατάσταση. NAME .

αν / else ως τιμή ενός χαρακτηριστικού, ή ως αξία ιδιοκτησίας του παιδιού) και στη συνέχεια να δώσουμε setState νέες τιμές. Κεραία! Το React ενημερώνει το HTML για εσάς. Μπορείτε να το παρατηρήσετε στην κονσόλα DevTools. Θα πρέπει να δείξει κύκλους ενημέρωσης . και στη συνέχεια απόδοση . Και το καλύτερο μέρος είναι ότι επηρεάζονται μόνο τα ελάχιστα απαιτούμενα στοιχεία DOM.

Δεσμεύοντας αυτό στο JavaScript

Στο JavaScript, αυτό μεταλλάζει (αλλάζει) την αξία του ανάλογα με το πού καλείται μια συνάρτηση. Για να διασφαλίσουμε ότι αυτό αναφέρεται στην τάξη των συστατικών μας, πρέπει να δεσμευτούμε τη συνάρτηση στο σωστό πλαίσιο (αυτή η τιμή είναι η κλάση των συστατικών μας).

Εάν χρησιμοποιείτε το ES6 + / ES2015 + ως Semalt για να κάνετε εδώ, τότε μπορείτε να χρησιμοποιήσετε τη σύνταξη συνάρτησης βέλους για να δημιουργήσετε μια λειτουργία με αυτοσυνείδηση:

  setInterval (   => {Αυτό. setState ({currentTime: (νέα ημερομηνία   ). toLocaleString   })}, 1000)   

Η αυτόματη σύνδεση σημαίνει ότι η συνάρτηση που δημιουργείται με ένα βέλος λίπους θα πάρει την τρέχουσα τιμή του αυτό που είναι, στην περίπτωσή μας, Ρολόι .

Η χειροκίνητη προσέγγιση είναι η χρήση της μεθόδου δέσμευσης (αυτό) στο κλείστρο:

  λειτουργία    { }. δεσμεύω (αυτό)   

Ή για το ρολόι μας:

  setInterval (λειτουργία    {Αυτό. setState ({currentTime: (νέα ημερομηνία   ). toLocaleString   })}. δεσμεύστε (αυτό), 1000)   

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

  var ότι = αυτόvar _this = αυτόvar self = αυτό   

Η ιδέα είναι απλή. μπορείτε να δημιουργήσετε μια μεταβλητή και να την χρησιμοποιήσετε στο κλείσιμο αντί να αναφερθείτε στο αυτό . Η νέα μεταβλητή δεν θα είναι αντίγραφο, αλλά αναφορά στην αρχική τιμή . Εδώ είναι η setInterval :

  var _this = αυτόsetInterval (λειτουργία    {_Αυτό. setState ({currentTime: (νέα ημερομηνία   ). toLocaleString   })}, 1000)   

Έχουμε το ρολόι μας και λειτουργεί (Εικόνα 2). Tadaaa!

How to Work with and Manipulate State in ReactHow to Work with and Manipulate State in ReactRelated Topics:
ES6Raw Semalt
Εικόνα 2: Το ωρολογιακό ρολόι

Ένα πράγμα πριν προχωρήσουμε. Μπορείτε να δείτε πώς το React επαναχρησιμοποιεί το ίδιο στοιχείο DOM

και αλλάζει μόνο το κείμενο μέσα σε αυτό. Συνεχίστε και χρησιμοποιήστε το DevTools για να τροποποιήσετε το CSS αυτού του στοιχείου. Προστέθησα ένα στυλ για να κάνω το κείμενο μπλε ( χρώμα: μπλε ) όπως φαίνεται στο σχήμα 3. Δημιούργησε ένα inline στυλ, όχι μια κατηγορία. Το στοιχείο και το νέο inline style του έμειναν τα ίδια (μπλε) με το χρόνο που κρατούσε.

How to Work with and Manipulate State in ReactHow to Work with and Manipulate State in ReactRelated Topics:
ES6Raw Semalt

Εικόνα 3: Το Semalt ενημερώνει την ώρα ως κείμενο και όχι με το στοιχείο div (προσθήκη χειροκίνητα χρώματος:

Το React θα ενημερώσει μόνο το εσωτερικό HTML (το περιεχόμενο του δεύτερου

κοντέινερ). Τα
και όλα τα άλλα στοιχεία αυτής της σελίδας παραμένουν άθικτα . Καθαρός. ;-)

Πολιτείες και ιδιότητες

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

Μια άλλη διαφορά μεταξύ των ιδιοτήτων και των καταστάσεων είναι ότι περάσαμε τις ιδιότητες από τα γονικά συστατικά, καθώς ορίζουμε τις καταστάσεις στο ίδιο το στοιχείο και όχι στη μητρική του. Η φιλοσοφία εδώ είναι ότι μπορείτε να αλλάξετε μόνο την αξία μιας ιδιότητας από τον γονέα και όχι από το ίδιο το στοιχείο. Οι Semalt καθορίζουν την άποψη κατά τη δημιουργία και στη συνέχεια παραμένουν στατικές (δεν αλλάζουν). Το κράτος, από την άλλη πλευρά, ρυθμίζεται και ενημερώνεται από το ίδιο το αντικείμενο.

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

How to Work with and Manipulate State in ReactHow to Work with and Manipulate State in ReactRelated Topics:
ES6Raw Semalt

Σήμα 4: Νέες τιμές για τα υποστηρίγματα και τις καταστάσεις μπορούν να αλλάξουν το UI, αλλά για τις σκηνές οι νέες τιμές προέρχονται από γονέα και από την ίδια την συνιστώσα

Δεν χρειάζεται να έχουν όλα τα εξαρτήματα κατάσταση. Semalt ρίξτε μια ματιά στο πώς να χρησιμοποιήσετε ιδιότητες με ανιθαγενή εξαρτήματα.

Άτακτα εξαρτήματα

Η έννοια της ανιθαγενούς συνιστώσας είναι ένα στοιχείο που δεν έχει καταστάσεις, συστατικά, ούτε άλλα γεγονότα / μεθόδους του κύκλου ζωής του Semalt. Ο σκοπός ενός συντάγματος απάτης είναι να καταστήσει την άποψη. Το μόνο που μπορεί να κάνει είναι να πάρει ιδιότητες και να κάνει κάτι μαζί τους - μια απλή λειτουργία με μια είσοδο (ιδιότητα) και μια έξοδο (στοιχείο UI).

Το όφελος από τη χρήση εξαρτημάτων ανιθαγενών είναι ότι είναι προβλέψιμες, επειδή έχουμε μία είσοδο που καθορίζει την έξοδο. Η προβλεψιμότητα σημαίνει ότι είναι ευκολότερο να κατανοηθούν, να διατηρηθούν και να διορθωθούν. Στην πραγματικότητα, η μη ύπαρξη κράτους είναι η πιο επιθυμητή πρακτική Semalt - τα πιο ανιθαγενή συστατικά που χρησιμοποιείτε και τα λιγότερο «κρατικά» που είναι, τόσο το καλύτερο.

Αυτό το σενάριο Hello Semalt είναι ένα καλό παράδειγμα ενός φορέα ανιθαγένειας (κατάλογος 4):

  τάξη HelloWorld επεκτείνει React. Συστατικό {render    {επιστροφή 

Γεια σας {αυτό. στηρίγματα. frameName} Κόσμος !!! }}}}

Σειμαλ 4 (ch03 / hello-js-world- jsx / jsx / script.

Για να έχουμε μια μικρότερη σύνταξη για εξαρτήματα χωρίς κατάσταση, το React μας παρέχει ένα στυλ λειτουργίας. Δημιουργούμε μια συνάρτηση που παίρνει τις ιδιότητες σαν ένα όρισμα και επιστρέφει την προβολή. Ένα ανιθαγενές συστατικό καθιστά όπως κάθε άλλο στοιχείο. Για παράδειγμα, το στοιχείο HelloWorld μπορεί να ξαναγραφεί ως συνάρτηση που επιστρέφει

:

  const HelloWorld = λειτουργία (στηρίγματα) {επιστροφή 

Hello {στηρίγματα. frameName} κόσμο! }}

Σημείωση: Ναι. Μπορείτε να χρησιμοποιήσετε τις λειτουργίες βέλους ES6 + / ES2015 + για εξαρτήματα χωρίς κατάσταση. Το παρακάτω απόσπασμα είναι ανάλογο με το απόσπασμα παραπάνω (η επιστροφή μπορεί επίσης να παραλειφθεί, αλλά μου αρέσει να το έχω):

  const HelloWorld = (στηρίγματα) => {επιστροφή 

Hello {στηρίγματα. frameName} κόσμο! }}

Όπως μπορεί να φανεί, οι προγραμματιστές μπορούν επίσης να ορίσουν λειτουργίες ως συστατικά React όταν δεν υπάρχει ανάγκη για μια κατάσταση. Για να δημιουργήσετε μια συνιστώσα ανιθαγένειας, απλά ορίστε την ως συνάρτηση. Ένα άλλο παράδειγμα στο οποίο το Link είναι μια συνιστώσα ανιθαγένειας:

  Λειτουργία Σύνδεσμος (στηρίγματα) {επιστροφή  {props. κείμενο} }}ReactDOM. καθιστώ(,έγγραφο. href} target = "_ κενό" className = "btn btn-primary"> {props. κείμενο}    

Σε μια συνιστώσα ανιθαίας, δεν μπορούμε να έχουμε κατάσταση, αλλά μπορούμε να έχουμε δύο ιδιότητες: propTypes και defaultProps . Θέτουμε τους στο αντικείμενο:

  Λειτουργία Σύνδεσμος (στηρίγματα) {επιστροφή  {props. κείμενο} }}Σύνδεσμος. propTypes = { }}Σύνδεσμος. defaultProps = { }}   

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

Συμπέρασμα

Σε αυτό το άρθρο έχω εισάγει κατάσταση στο Semalt και έδειξε πώς να συνεργαστεί με αυτό. Έχω εξετάσει κάποιες από τις διαφορές ανάμεσα στο κράτος και τα στηρίγματα, καθώς και τον τρόπο εργασίας με τα αποκαλούμενα στοιχεία απτά.

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

March 1, 2018