Übersicht über die React Context API

Die React Context API ist eine Funktion, die es Ihnen ermöglicht, Zustände (Daten) über mehrere Komponenten hinweg zu teilen, ohne Requisiten manuell auf jeder Ebene des Komponentenbaums weiterzugeben. Es vereinfacht die Zustandsverwaltung, insbesondere in großen Anwendungen, bei denen viele Komponenten Zugriff auf dieselben Daten benötigen.

Schlüsselkonzepte:

1. Kontexterstellung: Sie erstellen einen Kontext mit React.createContext().

   const MyContext = React.createContext();

1. Anbieter: Die Anbieterkomponente wird verwendet, um den Teil Ihrer App zu umschließen, in dem der Kontext zugänglich sein soll. Es gibt den Kontextwert an seine untergeordneten Elemente weiter.

   <MyContext.Provider value={someValue}>
     {children}
   </MyContext.Provider>

1. Verbraucher: Komponenten, die Zugriff auf den Kontext benötigen, können entweder den Context.Consumer- oder den useContext-Hook verwenden (häufiger bei Funktionskomponenten).

   const someValue = useContext(MyContext);

Beispielverwendung:

1. Erstellen Sie einen Kontext:

   const ThemeContext = React.createContext();

1. Geben Sie den Kontext in einer übergeordneten Komponente an:

   const App = () => {
     const theme = 'dark';

     return (
       <ThemeContext.Provider value={theme}>
         <ChildComponent />
       </ThemeContext.Provider>
     );
   };

1. Verwenden Sie den Kontext in einer untergeordneten Komponente:

   const ChildComponent = () => {
     const theme = useContext(ThemeContext);

     return <div>Current theme: {theme}</div>;
   };

Wann sollte die Kontext-API verwendet werden:

• Globaler Status: Nützlich für die Freigabe des Status, auf den viele Komponenten zugreifen müssen, z. B. Authentifizierungsstatus, Themen oder Spracheinstellungen.
• Vermeidung des Bohrens von Stützen:Vermeidet das Durchführen von Stützen durch mehrere Komponentenschichten.

Das obige ist der detaillierte Inhalt vonÜbersicht über die React Context API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!