Cârligul useContext a fost introdus ca parte a API-ului React Hooks în React 16.8. Înainte de introducerea sa, gestionarea stării globale în aplicațiile React necesita de obicei biblioteci precum Redux sau Context API cu abordarea furnizor/consumator bazată pe clasă.

React a simțit nevoia de a oferi o modalitate alternativă mai simplă de a partaja valori precum teme, datele utilizatorului și alte informații între componente, deoarece soluția anterioară era destul de greoaie și uneori simțea că trebuie să transferați la nesfârșit elementele de recuzită în ierarhiile profunde ale componentelor. useContext oferă o metodă mult mai intuitivă de accesare a stării globale a aplicației noastre fără abordarea mai complexă bazată pe Redux.

Ce este un context?

Pentru a folosi UseContext, trebuie mai întâi să creăm un fișier de context în aplicația noastră React. În React, „contextului” i se dă o semnificație specifică: oferă o modalitate de a trece date prin arborele componente fără a fi nevoie să transmiteți recuzita manual la fiecare nivel. Poate reprezenta diferite tipuri de informații:

  • Starea aplicației:informații despre starea actuală a unei aplicații, cum ar fi informații despre utilizator, preferințe și setări.
  • Date de mediu: detalii despre sistemul sau mediul actual, cum ar fi punctele finale API, configurațiile sistemului sau capabilitățile dispozitivului.
  • Starea operațională: reprezintă starea actuală într-un anumit domeniu, cum ar fi utilizatorul curent, modalul activ sau tema selectată.

Cum se creează un fișier context

În practică, un fișier de context este pur și simplu un fișier .js pe care îl stocați de obicei într-un folder „Contexte” din dosarul dvs. React apps src. Seamănă foarte mult cu o componentă tipică, funcțională. Să ne uităm la un exemplu despre cum ar trebui implementat:

import React, { createContext, useContext, useState } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children }) => {
    const [user, setUser] = useState({
        name: 'Jane',
        surname: 'Doe',
        address: '123 React St, Hooks City',
        //...other details
    });

    return (
        <UserContext.Provider value={{ user, setUser }}>
            {children}
        </UserContext.Provider>
    );
};

Aici, creăm un nou context folosind createContext(). Aceasta va returna un obiect cu un Provider și un Consumer. În contextul modern React with hooks, Consumer nu este folosit la fel de des, deoarece useContext hook oferă o modalitate mai simplă de a consuma valori de context.

Apoi declarăm și exportăm UserProvider. Această componentă este în esență un înveliș. Când componentele sunt împachetate în interiorul acestuia (copii), ele dobândesc capacitatea de a accesa și de a modifica potențial starea user, în funcție de modul în care este implementată în componentele copil. În interior, există o variabilă de stare. În această stare creăm un obiect pentru a stoca și a ține evidența tuturor variabilelor pe care dorim să le furnizăm tuturor componentelor copil care sunt abonate la acesta.

‹UserContext.Provider› returnat este ceea ce furnizează de fapt datele componentelor sale fii. Ia un valueprop care determină în mod specific ce date să furnizeze. În acest context, sunt furnizate atât user, cât și setUser, astfel încât să putem citi și modifica contextul.

Cum se utilizează UseContect

Pentru a folosi un Context, cum ar fi cel creat anterior, trebuie să împachetăm componentele care au nevoie de acces la aceste informații în interiorul componentei UserProvider. Aceasta ar putea fi fie întreaga noastră componentă a aplicației, fie ar putea fi o subcomponentă într-o parte a aplicației în care aceste informații sunt necesare în ierarhia sa de copii. Să ne uităm la un exemplu:

import React from 'react';
import { UserProvider } from './contexts/UserContext'; 
import BioCard from './components/BioCard'; 

function App() {
  return (
    <UserProvider>
      <header>
        <h1>Welcome to My App</h1>
      </header>
      <main>
        <BioCard />
        {/* Maybe some routes or other components */}
      </main>
      <footer>
        App Footer
      </footer>
    </UserProvider>
  );
}

export default App;

Aici, am împachetat întreaga rădăcină a aplicației noastre în UserProvider. Aceasta înseamnă că orice componentă are acum acces la informațiile userContext. Importăm și o componentă personalizată numită BioCard. Să ne uităm la modul în care această componentă poate consuma informații din context:

import React, { useContext } from 'react';
import { UserContext } from '../contexts/UserContext';

function BioCard() {
  const { user } = useContext(UserContext); // Destructure user from the context value

  return (
    <div className="bio-card">
      <h2>{user.name} {user.surname}</h2>
      <p>Address: {user.address}</p>
      {/* Display other user details as required */}
    </div>
  );
}

export default BioCard;

Aici, am importat useContext din React și UserContext din fișierul în care l-ați definit. În cadrul componentei, folosim apelul useContext(UserContext) pentru a obține acces la datele utilizatorului (și orice alte valori pe care le-ați furnizat în context). Componenta BioCard afișează apoi informațiile utilizatorului folosind acele date.

Când aplicația dvs. rulează, BioCard va avea acces la datele utilizatorului furnizate de UserProvider și va afișa un card cu informațiile utilizatorului respectiv.

Concluzie

În acest ghid, am aprofundat în cârligul useContext, evidențiind rolul său în managementul global al statului în React. Am parcurs crearea unui UserContext, am demonstrat implementarea acestuia prin includerea App-ului nostru principal în UserProvider și am arătat cum componenta BioCard poate accesa și afișa cu ușurință informațiile utilizatorului din context.