Το React Context API είναι ένα εργαλείο διαχείρισης κατάστασης που χρησιμοποιείται για την κοινή χρήση δεδομένων στα στοιχεία του React. Μάθετε πώς να χρησιμοποιείτε το Context API για να παρακολουθείτε τους χρήστες με έλεγχο ταυτότητας σε λειτουργικά στοιχεία.

Τι είναι το React Context API;

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

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

Πότε πρέπει να χρησιμοποιήσετε το React Context API;

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

Χρήση περιβάλλοντος για την παρακολούθηση της κατάστασης ελέγχου ταυτότητας χρήστη

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

createContext()

Για να ξεκινήσετε με το Context API, πρέπει πρώτα να το δημιουργήσετε χρησιμοποιώντας αυτήν τη σύνταξη.

const Context = React.createContext (defaultValue);

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

Προμηθευτής

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

useContext

useContext() είναι ένα React hook που επιτρέπει στα συστατικά να καταναλώνουν το πλαίσιο. Χρειάζεται μόνο να περάσετε στο πλαίσιο.

const contextValue = useContext (Context)

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

Ξεκινήστε δημιουργώντας ένα νέο αρχείο, AuthContext.js, και προσθέστε τα παρακάτω.

εισαγωγή {createContext } από το "react";
const AuthContext = createContext();
εξαγωγή προεπιλεγμένου AuthContext.

Στη συνέχεια, δημιουργήστε AuthProvider.js και προσθέστε τη λειτουργία παροχής.

εισαγωγή { useState, useEffect } από το 'react';
εισαγωγή { getUser } από το './auth.js'
εισαγωγή AuthContext από το './AuthContext'
εξαγωγή const AuthProvider = ({ παιδιά }) => {
 const [χρήστης, setUser] = useState (null);
 useEffect(() => {
 const currentUser = getUser()
 setUser (τρέχων χρήστης)
 }, []);
ΕΠΙΣΤΡΟΦΗ (
{παιδιά}
 );
 };

Εδώ, ανακτάτε τον τρέχοντα χρήστη από ένα ψεύτικο getUser() λειτουργία. Σε μια πραγματική εφαρμογή, αυτή θα ήταν η υπηρεσία backend σας.

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

AuthProvider.js δέχεται επίσης τα παιδιά με πρόσβαση στο πλαίσιο.

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

Δημιουργήστε ένα νέο αρχείο useAuthContext.js και προσθέστε τα παρακάτω.

εισαγωγή AuthContext από το "./AuthContext";
const useAuthContext.js = () => {
 const user = useContext (AuthContext);
 εάν (απροσδιόριστο χρήστη) {
 ρίχνει νέο Σφάλμα ("useAuthContext μπορεί να χρησιμοποιηθεί μόνο εντός του AuthProvider");
 }
 επιστροφή χρήστη?
};

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

Το τελευταίο βήμα είναι να τυλίξετε τα στοιχεία χρησιμοποιώντας το περιβάλλον με AuthProvider.js.

εισαγωγή { AuthProvider } από το "./AuthContext";
ReactDOM.render(




,
 rootElement
);

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

εισαγωγή useAuthContext από το "./useAuthContext";
εισαγωγή { Navigate } από το "react-router-dom";
const Προφίλ = () => {
 const { χρήστης } = useAuthContext();
 αν (!χρήστης) {
 ΕΠΙΣΤΡΟΦΗ ;
 }
 ΕΠΙΣΤΡΟΦΗ (
 <>
Προφίλ

 );
};

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

Πότε δεν πρέπει να χρησιμοποιείται το React Context API

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

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

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

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