Kontext-API verstehen

In einem React.js-Projekt erstellen wir Komponenten und geben dann Requisiten an diese Komponenten weiter. Wir können diese Requisiten an unendliche Ebenen verschachtelter Komponenten weitergeben. Wenn es jedoch viele Komponenten gibt und alle unterschiedliche gemeinsame Requisiten benötigen, wird das Projekt unüberschaubar. Hier kommt die Kontext-API ins Spiel. Sie ermöglicht es uns, Requisiten auf tief verschachtelten Ebenen zu verwenden, ohne Requisitenbohren zu müssen.

Wir verwenden es, indem wir zuerst einen Kontext erstellen und dafür den createContext-Hook von React verwenden. Wir können ihm auch einen Standardwert übergeben, wenn wir möchten. Dann erstellen wir eine Anbieterkomponente für diesen Kontext. Das Kontextobjekt hat eine Provider-Komponente, wo wir den Wert des Kontexts als Prop übergeben. Hier habe ich sowohl den Kontextwert als auch eine Funktion übergeben, die es den Verbraucherkomponenten ermöglicht, den Wert zu ändern.

Jede im Anbieter verschachtelte Komponente hat Zugriff auf den Wert dieses bestimmten Kontexts. Wir können eine Komponente sogar in mehrere Anbieter verschachteln und sie wird die Werte von allen verbrauchen.

Hier verbrauchen die Player- und die Match-Komponente auch die Werte von FootballProvider und OtherProvider.

Um den Wert vom Anbieter zu verwenden, müssen wir den useContext-Hook verwenden.

Dies ermöglicht die Verwendung gemeinsamer Werte zwischen tief verschachtelten Komponenten ohne Zwischenkomponenten, die Werte wie Brücken enthalten. Ein Nachteil der Kontext-API besteht darin, dass immer dann, wenn sich der Wert des Kontexts ändert, alle darunter liegenden Komponenten neu gerendert werden. Es wäre jedoch nicht ganz fair, dies als Nachteil zu bezeichnen, da dieses Verhalten in einigen Szenarien auch von Vorteil ist.