Hallo👋🏻,  Dieser Artikel richtet sich speziell an Anfänger, die effektivere Methoden zur Verwaltung des Status zwischen mehreren Komponenten erlernen möchten. Er befasst sich auch mit dem häufigen Problem des Prop Drilling, das die Wartung und das Verständnis Ihres Codes erschweren kann. Beginnen wir mit der Frage, welche Art von Problem die Context-API löst.  Wenn Sie das Videoformat bevorzugen, finden Sie hier das Tutorial, das Sie auf meinem YouTube-Kanal ansehen können.👇🏻   https://youtu.be/4p_VWn1AEvg?embedable=true  Was ist Propellerbohren?  Sie wissen, dass Sie manchmal Daten von einer übergeordneten Komponente an eine untergeordnete Komponente weitergeben müssen und dabei Props durch eine Reihe von Komponenten dazwischen übergeben müssen? Das nennt man   und kann schnell unübersichtlich werden. Lassen Sie uns dies anhand eines Beispiels verdeutlichen. Prop Drilling    Stellen Sie sich vor, Sie haben, wie im Diagramm gezeigt, einige Daten in der   Komponente abgerufen, die sich an der Wurzel Ihrer Anwendung befindet. Wenn nun eine tief verschachtelte Komponente, beispielsweise die   Komponente, auf diese Daten zugreifen muss, würden Sie sie normalerweise als Props durch die   und   Komponenten weiterreichen, bevor sie   erreichen. Dies kann unschön werden, wenn Ihre App wächst. App Grandchild Parent Child Grandchild  Hier ist eine weitere visuelle Darstellung:    Im obigen Beispiel benötigt die   Benutzerdaten, aber diese Daten müssen zuerst durch die   und   , obwohl diese Zwischenkomponenten die Daten selbst nicht verwenden. Wie können wir das also bereinigen? Hier kommt die Context API ins Spiel. Profile App Navigation  Stützenbohrungen:  Erhöht das erneute Rendern von Komponenten  Erhöht den Boilerplate-Code  Erstellt Komponentenabhängigkeiten  Verringert die Leistung  React Context-API  Mit der Context API in React.js können Sie Daten zwischen Komponenten weitergeben, ohne sie als Props durch jede Ebene des Komponentenbaums weitergeben zu müssen. Es funktioniert wie ein globales Statusverwaltungssystem, in dem Sie Ihren Status in einem Kontextobjekt definieren und dann überall im Komponentenbaum problemlos darauf zugreifen können. Lassen Sie uns dies anhand eines Beispiels verstehen.    Wie Sie im Diagramm sehen können, haben wir ein Kontextobjekt, das Daten speichert, auf die mehrere Komponenten zugreifen können. Diese Daten werden von APIs oder Diensten von Drittanbietern abgerufen. Bevor wir in einer Komponente auf diese Kontextdaten zugreifen können, müssen wir alle Komponenten, die diese Daten benötigen, in eine Kontextanbieterkomponente einbinden.  Wenn wir nur auf Daten in den Navigations- und Profilkomponenten zugreifen müssen, müssen wir die App-Komponente nicht umschließen. Sobald Sie die relevanten Komponenten mit dem   umschlossen haben, können Sie direkt auf die Kontextdaten in jeder Komponente zugreifen, die sie verwendet. Keine Sorge, wenn Sie es noch nicht verstehen; lassen Sie uns in den Code eintauchen und ihn in Aktion sehen. ContextProvider  Wie verwende ich die Context-API?  Lassen Sie uns zunächst eine React-App mit   erstellen. Kopieren Sie einfach die folgenden Befehle, um das Projekt einzurichten. Vite.js   npm create vite@latest  Fügen Sie Ihren Projektnamen hinzu  Wählen Sie React  Wählen Sie Typescript aus den Optionen   cd project_name // to change to project directory npm install npm run dev  Anschließend können Sie Ihren Entwicklungsserver   in Ihrem Browser öffnen. http://localhost:5173  Lassen Sie uns zunächst die erforderlichen Ordner erstellen. Hier ist die Ordnerstruktur unseres Projekts.   src | components | context  Erstellen wir im Komponentenordner die Datei   und fügen den folgenden Code hinzu. Profile.jsx   import React from 'react' const Profile = () => { return ( <div>Profile</div> ) } export default Profile  Erstellen Sie eine weitere Komponente namens   im Komponentenordner. Navbar.jsx   import Profile from './Profile' const Navbar = () => { return ( <nav style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "90%", height: "10vh", backgroundColor: theme === "light" ? "#fff" : "#1b1b1b", color: theme === "light" ? "#1b1b1b" : "#fff", border: "1px solid #fff", borderRadius: "5px", padding: "0 20px", marginTop: "40px", }}> <h1>LOGO</h1> <Profile /> </nav> ) } export default Navbar  Importieren wir diese   -Komponente in die Datei   . <Navbar /> App.jsx   import Navbar from "./components/Navbar"; function App() { return ( <main style={{ display: "flex", flexDirection: "column", justifyContent: "start", alignItems: "center", height: "100vh", width: "100vw", }} > <Navbar /> </main> ); } export default App;  Grundsätzlich ist die Komponente   das untergeordnete Element der Komponente   und   ist das untergeordnete Element der Komponente   . <Profile /> <Navbar /> <Navbar /> <App />  Hinzufügen der Context-API  Erstellen wir die Datei   im   . Fügen Sie der Datei den folgenden Code hinzu. UserContext.jsx context   import { createContext, useEffect, useState } from "react"; export const UserContext = createContext(); export const UserProvider = ({ children }) => { const [user, setUser] = useState(null); const fetchUserData = async (id) => { const response = await fetch( `https://jsonplaceholder.typicode.com/users/${id}` ).then((response) => response.json()); console.log(response); setUser(response); }; useEffect(() => { fetchUserData(1); }, []); return ( <UserContext.Provider value={{ user, fetchUserData }} > {children} </UserContext.Provider> ); };  Zuerst erstellen wir mit   ein leeres   Objekt. Wir stellen sicher, dass wir es aus   importieren. Wir können dem Kontextobjekt Standardwerte hinzufügen, aber wir lassen es vorerst null. createContext UserContext react  Als nächstes erstellen wir   , der einen Provider mit   zurückgibt, wie etwa   . Er umschließt die untergeordneten Komponenten und im Wert können wir alles übergeben, was wir in den untergeordneten Komponenten verwenden möchten. UserProvider UserContext UserContext.Provider  Im Moment verwenden wir   um die Benutzerdaten abzurufen. Der   stellt zu Testzwecken gefälschte API-Endpunkte bereit. Die Funktion   akzeptiert   und verwendet diese ID, um die Benutzerdaten abzurufen. Dann speichern wir die Antwort im   . die JSON-Placeholder-API, JSON-Placeholder fetchUserData id user  Wir rufen die Funktion   im   auf, sodass beim Laden der Seite die Funktion aufgerufen wird und die Daten in   eingefügt werden. fetchUserData useEffect user  Lassen Sie uns nun diesen Kontext in der Komponente   verwenden. Umschließen Sie die Komponente   mit   ; dasselbe wie im folgenden Code: <App /> <NavBar /> <UserProvider />   <UserProvider> <Navbar /> </UserProvider>  Lassen Sie uns den   in der Komponente   verwenden. Dazu verwenden wir   Hook. Dieser nimmt   und stellt die Werte bereit, die wir im   übergeben haben, wie z. B.   und   -Funktion. Denken Sie daran, dass wir die Komponente   nicht umschließen müssen, da sie sich bereits in der Komponente   befindet, die bereits mit dem Provider umschlossen ist. user <Profile /> useContext UserContext UserProvider user fetchUserData <Profile /> <Navbar />  Öffnen Sie   und fügen Sie den folgenden Code hinzu. Profile.jsx  const { user } = useContext(UserContext); if (user) { return ( <span style={{ fontWeight: "bold", }} > {user.name} </span> ); } else { return <span>Login</span>; }  Hier verwenden wir den   aus dem   . Wir zeigen den Benutzernamen an, wenn   vorhanden ist, andernfalls zeigen wir nur eine Anmeldenachricht an. Wenn Sie jetzt die Ausgabe sehen, sollte in der Navigationsleistenkomponente ein Benutzername vorhanden sein. Auf diese Weise können wir jeden Status direkt verwenden, der im Kontext einer beliebigen Komponente steht. Die Komponente, die diesen Status verwendet, sollte in   eingeschlossen werden. user UserContext user <Provider />  Sie können auch mehrere Kontexte verwenden. Sie müssen die Anbieterkomponenten lediglich in eine andere Anbieterkomponente einbinden, wie im folgenden Beispiel gezeigt.   <ThemeProvider> <UserProvider> <Navbar /> </UserProvider> </ThemeProvider>  Im obigen Beispiel verwenden wir   , das den Designstatus verwaltet. <ThemeProvider />  Sie können sich das obige YouTube-Video ansehen, um das vollständige Beispiel der Verwendung mehrerer Kontextanbieter zu sehen.  Optimieren des erneuten Renderns in der React Context API  Es gibt ein Problem, das auftritt, wenn Sie die Context API in mehreren Komponenten verwenden. Immer wenn sich der Status oder Wert in der Context API ändert, werden alle Komponenten, die diesen bestimmten Kontext abonniert haben, neu gerendert, auch wenn nicht alle Komponenten den geänderten Status verwenden. Um dieses Problem des erneuten Renderings zu verstehen, erstellen wir eine   Komponente, die Kontext zum Speichern und Anzeigen von Zählwerten verwendet. <Counter />  Schauen Sie sich das folgende Beispiel an. Sie können eine Datei   im Komponentenordner erstellen und den folgenden Code einfügen. Counter.jsx   import { createContext, memo, useContext, useState } from "react"; const CountContext = createContext(); const CountProvider = ({ children }) => { const [count, setCount] = useState(0); return ( <CountContext.Provider value={{ count, setCount }}> {children} </CountContext.Provider> ); }; function CountTitle() { console.log("This is Count Title component"); return <h1>Counter Title</h1>; } function CountDisplay() { console.log("This is CountDisplay component"); const { count } = useContext(CountContext); return <div>Count: {count}</div>; } function CounterButton() { console.log("This is CounterButton component"); const { count, setCount } = useContext(CountContext); return ( <> <CountTitle /> <CountDisplay /> <button onClick={() => setCount(count + 1)}>Increase</button> </> ); } export default function Counter() { return ( <CountProvider> <CounterButton /> </CountProvider> ); }  Im obigen Code:  Zuerst erstellen wir ein   Objekt mit  CountContext createContext.  Im   haben wir einen Status zum Speichern von Zählwerten. Wir senden   und die   Methode über value prop an die untergeordneten Komponenten. CountProvider, count setCount  Wir haben Komponenten separat erstellt, um zu sehen, wie oft einzelne Komponenten erneut gerendert werden.    : Diese Komponente zeigt nur den Titel an und verwendet keine Werte aus dem Kontext. <CountTitle />    : Diese Komponente zeigt Zählwerte an und verwendet   aus dem Kontext. <CountDisplay /> count    : Diese Komponente rendert sowohl die obige Komponente als auch eine Schaltfläche, die die Zählwerte mit   erhöht. <CounterButton /> setCount  Am Ende kapseln wir die Komponente   in die Komponente   ein, damit die anderen Komponenten auf die Zählwerte zugreifen können. <CounterButton /> CountProvider  Wenn Sie nun den Code ausführen und auf die Schaltfläche   klicken, sehen Sie in den Protokollen, dass jede Komponente bei jeder Statusänderung neu gerendert wird.   verwendet nicht einmal Zählwerte, wird aber neu gerendert. Dies geschieht, weil die übergeordnete Komponente von   also   den Wert von count verwendet und aktualisiert und deshalb neu gerendert wird. Increase <CountTitle /> <CountTitle /> <CounterButton />  Wie können wir dieses Verhalten optimieren? Die Antwort lautet   . Mit dem React-   können Sie das erneute Rendern einer Komponente überspringen, wenn ihre Eigenschaften unverändert bleiben. Fügen wir nach der Komponente   die folgende Zeile hinzu. memo memo <CountTitle />   const MemoizedCountTitle = React.memo(CountTitle)  Ersetzen Sie nun in der Komponente   , in der wir die Komponente   rendern,   durch   wie im folgenden Code: <CounterButton /> <CountTitle /> <CountTitle /> <MemoizedCountTitle />   <> <MemoizedCountTitle /> <CountDisplay /> <button onClick={() => setCount(count + 1)}>Increase</button> </>  Wenn Sie jetzt die Anzahl erhöhen und die Protokolle überprüfen, sollten Sie feststellen können, dass die Komponente   nicht mehr gerendert wird. <CountTitle />  Redux vs. Context-API    ist eine State-Management-Bibliothek für komplexes State-Management mit besser vorhersehbaren State-Übergängen. Die Context-API hingegen ist für einfaches State-Management und die Weitergabe von Daten durch den Komponentenbaum ohne Prop Drilling konzipiert. Also, wann soll man was wählen? Redux  Verwenden Sie   für eine einfache, lokalisierte Statusverwaltung, wenn sich der Status nicht häufig ändert. die React Context API  Verwenden Sie   für komplexe Anforderungen an die Statusverwaltung, insbesondere bei größeren Anwendungen, bei denen die Vorteile der strukturierten Statusverwaltung den zusätzlichen Einrichtungsaufwand überwiegen. Redux  Es gibt außerdem noch eine weitere Bibliothek, die ebenfalls eine beliebte Option für die Statusverwaltung ist:   . React Recoil    ist eine Statusverwaltungsbibliothek für React, die die Einfachheit der Context API mit der Leistungsfähigkeit und Performance von Redux vereinen soll. React Recoil  Wenn Sie mehr über   erfahren möchten, lassen Sie es mich in den Kommentaren wissen und ich werde basierend auf Ihrem Feedback ausführliche Tutorials zu diesem Thema erstellen. React Recoil  Abschluss  Die Context API   bietet eine leistungsstarke und effiziente Möglichkeit, Zustände über mehrere Komponenten hinweg zu verwalten und löst damit effektiv das Problem des Prop Drilling. Durch die Verwendung der Context API können Sie Ihren Code vereinfachen, unnötige Neurendervorgänge reduzieren und die Gesamtleistung der Anwendung verbessern. React.js  Während die Context API ideal für einfaches Statusmanagement ist, können komplexere Anwendungen von der Verwendung von   oder anderen Statusmanagement-Bibliotheken wie   profitieren. Wenn Sie wissen, wann und wie Sie diese Tools verwenden, können Sie besser wartbare und skalierbare React-Anwendungen erstellen. Redux React Recoil  Vielen Dank für das Lesen dieses Artikels. Ich hoffe, Sie fanden ihn hilfreich. Wenn Sie daran interessiert sind, React, Redux und Next.js zu lernen und Projekte damit zu erstellen, können Sie meinen YouTube-Kanal hier besuchen:  CodeBucks  Hier sind meine anderen Artikel, die Sie vielleicht lesen möchten:   So implementieren Sie sanftes Scrollen in Next.js mit Lenis und GSAP   So ermitteln Sie den Standort des Benutzers in React.js   Top 10 der beliebtesten VS Code-Themen, die Sie ausprobieren sollten  Besuchen Sie meinen persönlichen Blog:  DevDreaming

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Helping you to learn code! 
here you'll find tutorials around web development. Keep Coding...😜

2021 - HackerNoon Contributor of the Year - CSS3

Checkout my new website🤩

Portfolio

Hire Me

Buy Me a Coffee

2021 - HackerNoon Contributor of the Year - REDUX

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Zu lang; Lesen

Make resilience your competitive advantage

So vereinfachen Sie die Statusverwaltung mit der React.js Context API – Ein Tutorial

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

HackerNoon Decoded 2024: Wir feiern unsere Gaming-Community!

Genuine Content Creation in the Age of AI: Why Startups Need Quality Content

HackerNoon's DeFi Writing Contest with SORA Network: XSTUSD Use Cases

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

HackerNoon Decoded 2024: Wir feiern unsere Gaming-Community!

Genuine Content Creation in the Age of AI: Why Startups Need Quality Content

HackerNoon's DeFi Writing Contest with SORA Network: XSTUSD Use Cases

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps