Zrozumienie interfejsu API kontekstu

W projekcie React.js tworzymy komponenty, a następnie przekazujemy im rekwizyty. Możemy przekazać te rekwizyty do nieskończonych poziomów zagnieżdżonych komponentów. Ale jeśli istnieje wiele komponentów i wszystkie wymagają różnych wspólnych rekwizytów, projekt staje się niemożliwy do zarządzania. Tu właśnie wkracza Context API. Pozwala nam używać rekwizytów na głęboko zagnieżdżonych poziomach bez konieczności ich wiercenia.

Sposób, w jaki go używamy, polega na utworzeniu najpierw kontekstu, a do tego używamy haka createContext z reakcji. Możemy również przekazać do niego wartość domyślną, jeśli chcemy. Następnie tworzymy komponent dostawcy dla tego kontekstu. Obiekt context ma komponent provider, w którym przekazujemy wartość kontekstu jako prop. Tutaj przekazałem zarówno wartość kontekstową, jak i funkcję, która pozwoli komponentom konsumenckim na modyfikację wartości.

Każdy komponent zagnieżdżony w dostawcy będzie miał dostęp do wartości tego konkretnego kontekstu. Możemy nawet zagnieździć komponent w wielu dostawcach i będzie on zużywał wartości z nich wszystkich.

W tym przypadku komponenty Player i Match będą również wykorzystywać wartości z FootballProvider i OtherProvider.

Aby użyć wartości od dostawcy, musimy użyć hooka useContext.

Pozwala to na używanie wspólnych wartości między głęboko zagnieżdżonymi komponentami bez pośrednich komponentów przechowujących wartości, takie jak mosty. Wadą korzystania z interfejsu API kontekstu jest to, że za każdym razem, gdy zmienia się wartość kontekstu, wszystkie znajdujące się pod nim komponenty będą ponownie renderowane. Ale nie byłoby całkiem uczciwe nazwanie tego minusem, ponieważ takie zachowanie jest również korzystne w niektórych scenariuszach.