Umieszczanie Context w useContext

Jestem wielkim fanem Reacta i React Hooks.

Zanim przewrócisz oczami i powiesz „To nie kolejny blog React Hooks”, wysłuchaj mnie.

Nic dziwnego, że standard branżowy odszedł od komponentów opartych na klasach i cykli życia. W tym poście nie będę omawiać komponentów opartych na funkcjach i komponentach klasowych - możesz przeczytać dziesiątki blogów na ten temat w Dev i Medium .

Chciałem jednak rzucić światło na jeden szczególnie przydatny hook, którego nauczyłem się, a jest nim useContext.

Co to jest useContext?

useContext to Hook React, który pozwala nam mieć i używać globalnego zarządzania stanem bez potrzeby stosowania komponentów klasowych.

Dla przypomnienia, komponenty, wirtualny DOM, rekwizyty i stan są kluczowymi cechami tego, co czyni React tak wyjątkowym i popularnym. Stan to sposób, w jaki śledzimy, w jaki sposób elementy i komponenty zostały renderowane i współdziałane z interfejsem użytkownika.

Na przykład, powiedzmy, że wypełniasz ankietę. Po kliknięciu pola wyboru może pojawić się zmienna, która śledzi, czy kliknąłeś to pole, czy nie. W przypadku kliknięcia przez Ciebie lub innego użytkownika stan komponentu - w tym przypadku pole wyboru - zostanie ustawiony na odwrotny od tego, jaki był poprzednio, a więc z false (nie został kliknięty) na true (obecnie jest ). Po odznaczeniu pola stan powinien być teraz ustawiony na wartość przeciwną do klikniętej - teraz, fałsz.

import {useState} from "react"
export default function Survey(){
  const [clicked, setClicked] = useState(false)
const clickHandler = () => {
    setClicked(!clicked)
}
return (
    <>
<label>Do you want to take our customer survey for a chance to win $10,000?</label>
    <input type="checkbox" onClick={clickHandler}></input>
</>
  )

Ogólnie rzecz biorąc, zarządzanie stanem jest przydatne, ale w Reakcie może być niezwykle złożone. Stan jest aktualizowany asynchronicznie w JavaScript, co oznacza, że ​​kod może działać, ale stan nie jest aktualizowany i rozpoznawany jako reszta kodu. Dlatego istnieje tak wiele metod zarządzania stanem, takich jak Redux, framework React, który zarządza stanem za pomocą magazynu i reduktorów, więc tylko niezbędne komponenty będą miały dostęp do wyświetlania i zmiany stanu (który jest ustawiony w sklepie ). Jednak Redux może być trudny do wdrożenia i debugowania, a nawet w tym konkretnym frameworku jest dużo miejsca na poprawę, jeśli chodzi o zarządzanie stanem.

W momencie publikacji tego, Recoil.js jest „eksperymentalną biblioteką zarządzania stanem dla aplikacji React”, zgodnie z GitHub . Ten ekscytujący framework Redux, wydany w 2020 roku, ma usprawnić zarządzanie stanem. To pokazuje, jak ważne i złożone jest zarządzanie stanem dla naszego Frontendu.

Czym różni się od useState?

useState i useContext mogą wydawać się podobne, ponieważ oba są związane z zarządzaniem stanem. useState jest moim zdaniem mniej stabilnym sposobem na utrzymanie stanu. Zaletą useContext jest to, że możemy utworzyć instancję zmiennej używanej w useContext i zaimportować ją bezpośrednio do dowolnego komponentu. Ponieważ jest to globalne zarządzanie stanem, nie możemy modyfikować tego, co jest ustawione w useContext. Jednak w przypadku useState musielibyśmy przekazać jego wartość jako rekwizyty, które można łatwo zmienić i utracić po odświeżeniu lub ponownym renderowaniu.

Nie korzystałem zbyt często z useContext. Jednak widzenie go w użyciu sprawiło, że doceniłem, jak przydatny jest ten konkretny hak reakcyjny. Praca ze stanem w React może być trudna, a useContext jest dobrym medium między komponentami klas a Redux. Jest to łatwe w obsłudze i zrozumiałe.

To powiedziawszy, zarządzanie państwem jest złożone, dlatego stale tworzone są nowe technologie w celu ulepszenia sposobu, w jaki je przechowujemy. Sam useContext nie jest pozbawiony wad, ale ogólnie nie mogę się doczekać użycia tego konkretnego React Hook w moich przyszłych produktach.

Dziękuję za przeczytanie. Gorąco zachęcam do zapoznania się z poniższymi linkami, jeśli chcesz dowiedzieć się więcej o useContext.

Zasoby