Το React είναι ένα πλαίσιο JavaScript front-end. Ενώ η δημιουργία σελίδων HTML και η διαχείρισή τους μπορεί να γίνει κουραστική, το React κάνει τα πράγματα ευκολότερα σπάζοντας τα στοιχεία της οθόνης και τη λογική τους σε στοιχεία.

Το React φέρνει πολλά στο τραπέζι, αλλά ένα από τα πιο χρήσιμα χαρακτηριστικά είναι η διαχείριση κατάστασης. Σε αυτό το άρθρο, θα μάθετε πώς να διαχειρίζεστε την κατάσταση χρησιμοποιώντας τα React Hooks. Πριν προχωρήσετε περαιτέρω, αυτό το άρθρο προϋποθέτει ότι γνωρίζετε τα βασικά του React.

Τι είναι τα Hook στο ReactJS;

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

const [μεταβλητή, setVariable] = useState (αρχική τιμή);

Εδώ το μεταβλητός είναι το κράτος και το setVariable είναι η συνάρτηση που ορίζει την κατάσταση.

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

Υπάρχουν δύο τύποι γάντζων:

• Βασικοί γάντζοι
  1. χρήση Κατάσταση
  2. useEffect
  3. useContext
• Πρόσθετοι γάντζοι
  1. useRef
  2. useMemo
  3. useReducer

useState()

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

Μπορείτε να ανατρέξετε στο προηγούμενο παράδειγμα για τη σύνταξη των αγκιστριών React. Το απλούστερο παράδειγμα προς εξήγηση useState() είναι το παράδειγμα της μεταβλητής count:

εισαγωγή {useState} από το "react";
λειτουργία Εφαρμογή() {
const [count, setCount] = useState (0);
ΕΠΙΣΤΡΟΦΗ (


Παράδειγμα Hooks

{μετρώ}

setCount (count+1)}>Προσθήκη
setCount (count-1)}>Αφαίρεση



);
}

ο χρήση Κατάσταση Το hook έχει μια μεταβλητή και μια μέθοδο που χρησιμοποιείται για τον ορισμό της τιμής της μεταβλητής. ο χρήση Κατάσταση Το hook δέχεται την αρχική τιμή της κατάστασης ως παράμετρο. Μπορείτε να ορίσετε οποιαδήποτε τιμή για τη μεταβλητή count χρησιμοποιώντας το setCount μέθοδος.

Υπάρχουν δύο κουμπιά στον παραπάνω κώδικα για να αυξήσετε και να μειώσετε την τιμή του μετρώ μεταβλητός. Κατά την αύξηση, μπορείτε να προσθέσετε +1 στην τρέχουσα κατάσταση μέτρησης και -1 για να μειώσετε το πλήθος κατά 1.

useEffect

ο useEffect Το hook ενημερώνει την κατάσταση στην ιστοσελίδα μετά από κάθε αλλαγή κατάστασης. ο useEffect Ο γάντζος εισήχθη για να αφαιρέσει τις παρενέργειες των εξαρτημάτων που βασίζονται σε κλάση. Πριν από την εισαγωγή των στοιχείων που βασίζονται σε λειτουργίες, οι αλλαγές στην κατάσταση παρακολουθούνταν χρησιμοποιώντας τα στοιχεία του κύκλου ζωής: componentDidMount και componentDidUpdate. ο useEffect Το άγκιστρο δέχεται έναν πίνακα εξαρτήσεων. Όλες οι αλλαγές στις μεταβλητές κατάστασης που αναφέρονται στον πίνακα εξαρτήσεων παρακολουθούνται και εμφανίζονται χρησιμοποιώντας το useEffect άγκιστρο.

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

useEffect(()=>{
// κωδικός
}, [πίνακας εξάρτησης]);

Λαμβάνοντας υπόψη το παραπάνω παράδειγμα

εισαγωγή { useState, useEffect } από το "react";
λειτουργία Εφαρμογή() {
const [count, setCount] = useState (0);
useEffect(() => {
document.title = `Έχετε κάνει κλικ για ${count} φορές`;
}, [μετρώ]);
ΕΠΙΣΤΡΟΦΗ (


Παράδειγμα Hooks

{μετρώ}

 setCount (count + 1)}>Προσθήκη



);
}

Περνώντας το μετρώ μεταβλητή κατάστασης στο useEffect συστοιχία εξάρτησης, ελέγχει εάν η κατάσταση έχει αλλάξει ή όχι. Στη συνέχεια ορίζει τον τίτλο του εγγράφου στη μεταβλητή count.

useContext

ο useContext Το άγκιστρο βοηθά στη μεταφορά δεδομένων μέσω του στοιχείου χωρίς να το κάνει χειροκίνητα μέσω στηρίξεων. Κάνει τη χρήση του Context API γρήγορη και εύκολη. Θα έχετε καλύτερη κατανόηση αφού διαβάσετε ένα παράδειγμα.

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

εξαγωγή προεπιλεγμένης συνάρτησης App() {
let text = "Γεια, Καλώς ορίσατε στο MUO";
ΕΠΙΣΤΡΟΦΗ (






);
}
const ChildComponent = ({ κείμενο }) => {
ΕΠΙΣΤΡΟΦΗ 
{κείμενο}
;
};

Αρχικά, δημιουργήστε έναν πάροχο στο κύριο αρχείο σας (App.js).

const Context = React.createContext (null);

ο App συστατικό είναι το στοιχείο ανώτατου επιπέδου ή "γονικό" στοιχείο. Πρέπει να τυλίξετε ολόκληρο το εξάρτημα στο και μεταβιβάστε το αντικείμενο ή τα δεδομένα που θέλετε να αποδώσετε στο θυγατρικό στοιχείο.

εξαγωγή προεπιλεγμένης συνάρτησης App() {
let text = "Γεια, Καλώς ορίσατε στο MUO";
ΕΠΙΣΤΡΟΦΗ (








);
}

Τώρα, δημιουργήστε ένα θυγατρικό στοιχείο και αποκτήστε πρόσβαση στο υπόστρωμα κειμένου χρησιμοποιώντας το useContext άγκιστρο. Πέρνα το Συμφραζόμενα μεταβλητή με χρήση createContext.

const ChildComponent = () => {
let text = useContext (Context);
console.log (κείμενο);
ΕΠΙΣΤΡΟΦΗ 
{κείμενο}
;
};

Σχετίζεται με: Πλαίσια JavaScript που αξίζει να μάθετε​​​​​

Πολλά περισσότερα για εξερεύνηση με το React

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

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

Πώς να χρησιμοποιήσετε τα Props στο ReactJS

Αν ψάχνετε για συμβουλές για το πώς να χρησιμοποιείτε τα στηρίγματα στο ReactJS, βρίσκεστε στο σωστό μέρος.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα