Εάν είστε προγραμματιστής του React που δεν έχει μάθει ακόμα για τα React hook, τώρα είναι η στιγμή. Αυτή η ανάρτηση θα περιλαμβάνει αναλυτικά το useEffect React Hook. Είναι το αντίστοιχο άγκιστρο ενός ελβετικού μαχαιριού. Επιλύει διάφορα ζητήματα, όπως πώς να λαμβάνετε δεδομένα όταν προσαρτάται ένα στοιχείο, πώς να εκτελείτε κώδικα όταν αλλάζει μια κατάσταση ή ένα υπόστρωμα, πώς να ρυθμίζετε χρονόμετρα ή διαστήματα κ.λπ.
Το useEffect χρησιμοποιείται σχεδόν για οτιδήποτε θέλετε να «κάνετε» σε ένα στοιχείο React που δεν επιστρέφει JSX (οποιουδήποτε τύπου παρενέργεια). Μπορεί επίσης να έχετε πολλά useEffects ανά στοιχείο.
Όλη αυτή η δύναμη έχει κόστος: αν δεν καταλάβετε πώς λειτουργεί, μπορεί να σας μπερδέψει. Σε αυτήν την ανάρτηση, θα εξετάσουμε μια ποικιλία παραδειγμάτων, ώστε να μπορέσετε να κατανοήσετε το εννοιολογικό μοντέλο και να το εφαρμόσετε στον δικό σας κώδικα.
Αντιδράστε τους γάντζους – Τι προσπαθεί να λύσει;
Τα Hook παρουσιάστηκαν για πρώτη φορά στην έκδοση 16.8 του React και πλέον χρησιμοποιούνται από πολλά έργα του React. Το Hooks ξεπερνά το πρόβλημα της επανάληψης κώδικα μεταξύ των στοιχείων. Γράφονται χωρίς τη χρήση τάξεων. Αυτό δεν σημαίνει ότι το React εγκαταλείπει τις κλάσεις. Τα άγκιστρα είναι απλώς μια εναλλακτική μέθοδος.
Το React σάς επιτρέπει να δημιουργείτε γρήγορα εξελιγμένα στοιχεία με λογική κατάστασης. Είναι δύσκολο να διαχωριστούν αυτά τα στοιχεία, καθώς η κλάση βασίζεται στις μεθόδους κύκλου ζωής του React. Εδώ μπαίνουν τα React Hooks.
Σας επιτρέπουν να διαιρέσετε ένα στοιχείο σε μικρότερες συναρτήσεις. Αντί να διαιρέσετε τον κώδικα σε μικρότερα κομμάτια με βάση τις μεθόδους του κύκλου ζωής, μπορείτε τώρα να τακτοποιήσετε και να διαχωρίσετε τον κώδικα σε μικρότερες μονάδες ανάλογα με τη λειτουργικότητα.
Τι είναι το useEffect Hook;
Τα Hooks είναι λειτουργίες που σας επιτρέπουν να έχετε πρόσβαση σε δυνατότητες κατάστασης και σε άλλες δυνατότητες αντίδρασης χωρίς να χρειάζεται να γράψετε κλάσεις ES6. Το react hooks API έχει ένα άγκιστρο που ονομάζεται useEffect. Εάν είστε εξοικειωμένοι με τους κύκλους ζωής του react, το άγκιστρο useEffect είναι το ίδιο με το componentDidMount, componentDidUpdate, να componentWillUnmount συνδυασμένες μέθοδοι κύκλου ζωής.
Σύμφωνα με την τεκμηρίωση του React Hooks, δημιουργήθηκε για να λύσει ορισμένα από τα ζητήματα με τις μεθόδους κύκλου ζωής εξαρτημάτων κλάσης ES6.
Σύνταξη
Το πρώτο όρισμα είναι μια συνάρτηση επανάκλησης, η οποία εκτελείται από προεπιλογή μετά από κάθε απόδοση. Η δεύτερη παράμετρος είναι ένας προαιρετικός πίνακας εξάρτησης που δίνει εντολή στο Hook να επαναφέρει την κλήση μόνο εάν αλλάξει η κατάσταση προορισμού.
Το Hook συγκρίνει την ιστορική και την παρούσα κατάσταση κάθε εξάρτησης. Εάν οι δύο τιμές δεν ταιριάζουν, το Hook καλεί την επανάκληση που καθορίζεται στην πρώτη παράμετρο. Οι πίνακες εξάρτησης αλλάζουν τη συνήθη συμπεριφορά επανάκλησης και εγγυώνται ότι το Hook αγνοεί όλα τα άλλα στοιχεία στο πεδίο εφαρμογής του στοιχείου.
Βασική χρήση
Για να αποθηκεύσω ένα μήνυμα, χρησιμοποιώ το React useState στο παραπάνω δείγμα κώδικα. Μετά από αυτό, παίρνω τη μεταβλητή κατάσταση μηνύματος και την εκτυπώνω στην οθόνη. Ωστόσο, τώρα θέλω να χρησιμοποιήσω το Effect για να τροποποιήσω το μήνυμα ένα δευτερόλεπτο μετά την προσάρτηση του στοιχείου.
Έχω εισαγάγει το εφέ μου πίσω από τη γραμμή useState μετά την εισαγωγή του useEffect από το πλαίσιο React. Η πρώτη παράμετρος που χρησιμοποιείται το Effect είναι μια συνάρτηση. Όταν εκτελεστεί αυτός ο χειριστής λειτουργιών, θα φροντίσει για τυχόν παρενέργειες που παρέχετε. Η συνάρτηση είναι μια συνάρτηση επανάκλησης που καλείται όταν συμβαίνει ένα από τα συμβάντα κύκλου ζωής του στοιχείου React.
Πότε να το χρησιμοποιήσετε;
Το άγκιστρο useEffect μπορεί να είναι χρήσιμο σε διάφορες καταστάσεις. Τα παρακάτω είναι τα πιο κρίσιμα:
- Μπορούμε να αλλάξουμε αυτήν την παράμετρο από την πλευρά του πελάτη όταν θέλουμε να ανακτήσουμε δεδομένα ανάλογα με ένα όρισμα που παρέχεται. Θα ανακληθεί αφού ενημερωθεί η παράμετρος με νέα δεδομένα.
- Εάν θέλουμε να ανακτήσουμε δεδομένα από ένα τελικό σημείο API και να τα εμφανίσουμε στην πλευρά του πελάτη. Όταν το στοιχείο μας αποδίδει, εκτελείται η συνάρτηση ή ο χειριστής που δίνεται στο άγκιστρο useEffect και ανακτώνται δεδομένα στις καταστάσεις του στοιχείου. Αυτές οι καταστάσεις στη συνέχεια χρησιμοποιούνται σε στοιχεία διεπαφής χρήστη.
- Όταν το στοιχείο σας βασίζεται σε δεδομένα από τον έξω κόσμο και δεν μπορούμε να διασφαλίσουμε ότι τα δεδομένα θα φτάσουν, θα πρέπει να χρησιμοποιήσουμε τοEffect (ίσως ο διακομιστής είναι εκεί κάτω). Αντί να δημιουργείτε προβλήματα και να αποτρέπετε την εμφάνιση άλλων στοιχείων, τοποθετήστε τα στο άγκιστρο useEffect.
Χρήση περιπτώσεις
Εάν το στοιχείο αποδοθεί ξανά μετά την πρώτη εκτέλεση, δεν θα εκτελεστεί.
Κάθε φορά που ένα στοιχείο αποδίδει ή εκ νέου αποδίδει, θα πρέπει πάντα να εκτελείται.
Από προεπιλογή, το πρόγραμμα εκτελείται μόνο μία φορά. Στη συνέχεια, εάν αλλάξουν οι τιμές του prop, εκτελέστε:
Για ασύγχρονες δραστηριότητες, χρησιμοποιείτε πάντα το useEffect.
Τα μπλοκ κώδικα useEffect είναι προφανείς δείκτες ασύγχρονων εργασιών για τους συναδέλφους σας προγραμματιστές. Είναι δυνατή η δημιουργία ασύγχρονου κώδικα χωρίς τη χρήση του useEffect, αλλά αυτή δεν είναι η "μέθοδος React" και αυξάνει τόσο την πολυπλοκότητα όσο και τον κίνδυνο λαθών.
Η χρήση του useEffect αντί της εγγραφής ασύγχρονου κώδικα που μπορεί να σταματήσει τη διεπαφή χρήστη είναι μια πολύ γνωστή τεχνική στην κοινότητα του React, ειδικά ο τρόπος με τον οποίο η ομάδα του React το έχει δημιουργήσει για να εκτελεί μια παρενέργεια.
Ένα άλλο πλεονέκτημα της χρήσης του είναι ότι οι προγραμματιστές μπορούν απλώς να ελέγξουν τον κώδικα και να εντοπίσουν αμέσως τον κώδικα που εκτελείται «εκτός της ροής ελέγχου», ο οποίος γίνεται σημαντικός μόνο μετά τον πρώτο κύκλο απόδοσης. Επιπλέον, τα μπλοκ είναι κατάλληλα για εξαγωγή σε επαναχρησιμοποιήσιμα και ακόμη πιο σημασιολογικά προσαρμοσμένα Hooks.
Ενα παράδειγμα
Χρησιμοποιώντας τον κωδικό useEffect, αυξήστε έναν αριθμό ανά δευτερόλεπτο.
Συμπέρασμα
Η κατανόηση των βασικών αρχών σχεδίασης και των βέλτιστων πρακτικών του useEffect Hook, κατά την άποψή μου, είναι μια κρίσιμη δεξιότητα που πρέπει να μάθετε εάν θέλετε να γίνετε προγραμματιστής React επόμενου επιπέδου.
Συνοψίζοντας, το useEffect Hook λαμβάνει μια συνάρτηση που περιλαμβάνει επιτακτική, δυνητικά εφέ πλήρους λογικής. Ο πίνακας εξάρτησης, που είναι η δεύτερη παράμετρος, μπορεί να χρησιμοποιηθεί για να επηρεάσει την εκτέλεση. Κατά την αντιμετώπισή του, είναι επίσης απαραίτητο να γράψετε κώδικα καθαρισμού χρησιμοποιώντας τη λειτουργία επιστροφής.
Ενημερώστε μας στα σχόλια εάν το άρθρο ήταν χρήσιμο.
Αφήστε μια απάντηση