Hak Reacta useContextto potężne narzędzie do udostępniania stanu między komponentami bez konieczności przekazywania danych przez długi łańcuch rekwizytów. Dzięki useContext, możesz łatwo udostępniać stan w całym drzewie komponentów, co czyni go użytecznym narzędziem do zarządzania stanem globalnym.

W tym artykule poznamy podstawy haka useContexti zobaczymy, jak możemy go użyć do zarządzania stanem w naszych aplikacjach React.

co to jest useContext?

useContextto wbudowany hak React, który pozwala konsumować dane z kontekstu utworzonego przez komponent nadrzędny. Kontekst to obiekt, który przechowuje pewne współdzielone dane o stanie, do których dostęp ma dowolny komponent będący potomkiem komponentu, który utworzył kontekst.

Hak useContextprzyjmuje obiekt kontekstu jako argument i zwraca bieżącą wartość tego kontekstu. Oznacza to, że wszelkie aktualizacje kontekstu automatycznie uruchomią ponowne renderowanie wszystkich komponentów, które go używają.

Jak używać useContext?

Aby użyć useContext, musimy najpierw utworzyć obiekt kontekstu. Możemy to zrobić za pomocą createContextmetody z Reactbiblioteki. Oto przykład:

import React from 'react';

const MyContext = React.createContext();

import React from 'react';

const MyContext = React.createContext();

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      <div>
        <h1>Count: {count}</h1>
        <Counter />
      </div>
    </MyContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = React.useContext(MyContext);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Komponent Appzawija swoje komponenty potomne w MyContext.Providerkomponencie i przekazuje bieżącą wartość stanu udostępnionego jako właściwość value. W tym przypadku wartością jest obiekt zawierający countstan i setCountfunkcję.

Komponent Counterzużywa MyContextobiekt za pomocą useContexthaka i wyodrębnia countstan oraz setCountfunkcję z obiektu kontekstu. Następnie używamy tej incrementfunkcji, aby zaktualizować udostępniony stan po kliknięciu przycisku.

Kiedy używać useContext?

useContextjest najbardziej przydatny do zarządzania stanem globalnym, do którego dostęp musi mieć wiele komponentów w całej aplikacji. Jest to dobry wybór w przypadkach, w których wiercenie podpór byłoby uciążliwe lub gdy chcesz uniknąć przechodzenia stanu przez wiele warstw komponentów.

useContextjest również dobrym wyborem w przypadkach, gdy konieczne jest przekazanie funkcji w dół drzewa komponentów. Przekazując funkcję przez obiekt kontekstu, można uniknąć konieczności przekazywania jej przez wiele warstw komponentów.

Wniosek

Hak useContextjest potężnym narzędziem do zarządzania stanem globalnym.

Mam nadzieję, że tyle wam wszystkim wyjaśnię.