Dlaczego warto korzystać z API kontekstowego?

• Aby zrozumieć, dlaczego używać Context-API Najpierw zobaczymy Co to jest wiercenie rekwizytów .

• Spójrz na lewy obraz drzewa komponentów.
• Może zaistnieć sytuacja, w której komponent potomny na dole drzewa będzie potrzebował danych .ale komponenty kontenera lub komponenty potomne w środku mogą nie potrzebować tych danych.
• W tym przypadku, nawet jeśli środkowy Component nie potrzebuje danych, muszą je otrzymać tylko po to, aby przekazać je do składnika potomnego.
• Jeśli Twoja aplikacja jest zbyt duża, spowoduje to duży problem. Deweloperzy muszą przekazywać dane z jednego do następnego komponentu.
• Ten problem jest znany jako wiercenie rekwizytów.

• W Context-API tworzona jest osobna przestrzeń do przechowywania poza drzewem komponentów, w której musimy przechowywać dane.
• Teraz, jeśli potrzebujemy tych danych w dowolnym komponencie, możemy bezpośrednio uzyskać dostęp do danych z Context-API.
• Zobaczmy teraz, jak to działa na przykładzie.

• Do CreateContext możemy użyć metody createContext() z React .
• Po utworzeniu UserContext musimy go wyeksportować.
• Teraz, aby dodać dane wewnątrz kontekstu, musimy owinąć element nadrzędny za pomocą <UserContext.Provider> lub <UserProvider>.
• gdy opakowujemy się za pomocą Wrappera, to musimy przekazać dane do atrybutu wartości .

1) W komponencie funkcyjnym.

2) W metodach cyklu życia składnika klasy.

3) W metodzie renderowania komponentu klasy.

1) W komponencie funkcyjnym:-

• Wewnątrz komponentu funkcjonalnego lub hooków musimy użyć hooka useContext() dostarczanego przez pakiet React.
• Teraz musimy zaimportować UserContext i przekazać go do useContext() .
• useContext(UserContext) zwróci dane użytkownika wewnątrz Context.których możemy użyć dalej.

• Najpopularniejszym sposobem uzyskania dostępu do Context z komponentu klasy jest użycie static contextType.
• Jeśli potrzebujesz wartości z Context poza renderlub w metodzie cyklu życia, użyjesz jej w ten sposób.

• Tradycyjnym sposobem pobierania wartości Context było zawijanie komponentu podrzędnego w Consumer.
• Stamtąd będziesz mógł uzyskać dostęp do właściwości wartości jako props.
• Możesz to nadal widzieć, ale jest to bardziej tradycyjny sposób uzyskiwania dostępu do kontekstu.