Warum Kontext-API verwenden?

• Um zu verstehen, warum Kontext-API verwendet werden soll, sehen wir uns zunächst an, was Props-Drilling ist .

• Betrachten Sie das linke Komponentenbaumbild.
• Es kann vorkommen, dass eine untergeordnete Komponente am Ende des Baums Daten benötigt, aber Containerkomponenten oder untergeordnete Komponenten in der Mitte benötigen diese Daten möglicherweise nicht.
• Obwohl die mittlere Komponente in diesem Fall keine Daten benötigt, müssen sie diese empfangen, nur um sie an die untergeordnete Komponente weiterzuleiten.
• Wenn Ihre Anwendung zu groß ist, wird dies ein großes Problem verursachen. Entwickler müssen Daten von einer Komponente zur nächsten weitergeben.
• Dieses Problem ist als Props Drilling bekannt.

• In der Context-API wird außerhalb des Komponentenbaums ein separater Speicherplatz erstellt, in dem wir die Daten speichern müssen.
• Wenn wir diese Daten jetzt in einer beliebigen Komponente benötigen, können wir direkt auf die Daten der Context-API zugreifen.
• Sehen wir uns nun anhand eines Beispiels an, wie das funktioniert.

• Um CreateContext zu erstellen, können wir createContext() von React verwenden.
• Sobald UserContext erstellt ist, müssen wir ihn exportieren.
• Um nun Daten innerhalb des Kontexts hinzuzufügen, müssen wir das übergeordnete Element mit <UserContext.Provider> oder <UserProvider> umschließen.
• Sobald wir mit Wrapper umschließen, müssen wir Daten an das Wertattribut übergeben .

1) In Funktionskomponente.

2) In LifeCycle-Methoden der Klassenkomponente.

3) In-Render-Methode der Klassenkomponente.

1) In Funktion Komponente:-

• Innerhalb von Functional Component oder Hooks müssen wir den Hook useContext() verwenden, der vom React-Paket bereitgestellt wird.
• Jetzt müssen wir UserContext importieren und an useContext() übergeben .
• useContext(UserContext) gibt Benutzerdaten innerhalb von Context. zurück, die wir weiter verwenden können.

• Der gebräuchlichste Weg, um von einer Klassenkomponente aus auf Context zuzugreifen, ist über die static contextType.
• Wenn Sie den Wert von Context außerhalb von renderoder in einer Lebenszyklusmethode benötigen, verwenden Sie ihn auf diese Weise.

• Die herkömmliche Methode zum Abrufen von Kontextwerten bestand darin, die untergeordnete Komponente in die Consumer.
• Von dort aus könnten Sie auf das Wertprop als zugreifen props.
• Möglicherweise sehen Sie dies immer noch, aber es ist eher eine veraltete Methode für den Zugriff auf Context.