Hook useContext

Dzięki najnowszej aktualizacji do Reacta, użycie hooków może być niezwykle przydatne w twoim programowaniu. Może nawet sprawić, że zaczniesz myśleć o rzeczach w bardziej funkcjonalny sposób, w przeciwieństwie do programowania obiektowego. Zamiast używać komponentu klasy, możesz „zahaczyć się” bezpośrednio o cechy stanu i cyklu życia komponentów funkcjonalnych. Zwiększanie możliwości ponownego wykorzystania kodu.

Wiercenie rekwizytów

Przed hookami te wspólne dane musiałyby być przekazywane jako „rekwizyty” (skrót od właściwości) z każdego komponentu, niezależnie od tego, czy konkretny z nich musiał ich użyć. Daleko w dół linii, od elementu najwyższego poziomu do dołu.

Cóż, przez większość czasu te komponenty w środku nigdy nie będą potrzebowały dostępu do danych. Pomagają tylko w przekazywaniu danych. Możemy to zwizualizować w poniższym przykładzie kodu:

Jak widać, ChildComponent nie musi mieć dostępu do żadnych szczegółów książki, takich jak tytuł, autor lub kiedy została opublikowana. Przekazuje tylko te szczegóły do SubChildComponent w postaci obiektu, z którego można następnie wyciągnąć każdą indywidualną wartość za pomocą konkretnego klucza.

useContext

W kolejnej części mojej serii Hooks and Ladders zamierzam sięgnąć po hak useContext . W tym sensie kontekst jest sposobem przekazywania wspólnych danych w hierarchii komponentów od rodzica do dzieci.

Hak useContext umożliwia dostęp do tych wspólnych danych z dowolnego miejsca w drzewie komponentów bez konieczności przekazywania danych przez drzewo komponentów jako „rekwizyty”. UseContext udostępnia kontener do przechowywania danych i udostępniania go wszystkim znajdującym się poniżej komponentom.

Jest to dość prosty i łatwy proces, aby było to możliwe.

Będziesz musiał utworzyć zmienną (w tym przypadku dobrze ustawimy ją na „bookDetailContext”) i ustawić ją równą „React.createContext” na najwyższym poziomie hierarchii . Tworzy to kontekst obiektu, do którego możemy dodać wspólne dane.

Następnie komponent zwróci „bookDetailContext” z dołączonym „.Provider” wraz z obiektem, do którego chcesz przekazać jako wartość.

Pamiętaj, aby zaimportować hook useContext u góry strony wraz z useState.

Teraz wszystko, co musisz zrobić, to utworzyć kolejną zmienną w dowolnym komponencie, z którego chcesz uzyskać dostęp do danych, i ustawić ją na wartość „useContext(bookDetailContext)”.

Z naszego poprzednio użytego przykładu nazwijmy tę zmienną „contextData” w SubChildComponent . Możemy teraz pobrać dowolne dane obiektu, które chcemy, wywołując „contextData” i parę klucz/wartość, do której chcesz się odwołać.

— Widać, że nie musieliśmy przekazywać żadnych właściwości przez ChildComponent do SubChildComponent .

Końcowe przemyślenia

Ten hak jest dość łatwy do zrozumienia i jest to dobry sposób, aby nie musieć przekazywać danych przez tonę różnych komponentów. Gorąco polecam hak useEffect w każdej aplikacji React. To zdecydowanie pomaga w poprawie czytelności i może zachęcić do ponownego wykorzystania. Dziękuję za przeczytanie i koniecznie sprawdź kilka moich innych blogów lub połącz się ze mną na LinkedIn.