Einführung

Reacts Kontext-API ermöglicht Ihnen die globale gemeinsame Nutzung von Daten in Ihrer Anwendung, während Hooks eine Möglichkeit bieten, Status und Nebenwirkungen zu verwalten, ohne dass Klassenkomponenten erforderlich sind. Zusammen optimieren sie die Datenverarbeitung und machen Ihren Code wartbarer. In diesem Artikel befassen wir uns mit React Context und Hooks und stellen ein detailliertes Schritt-für-Schritt-Beispiel bereit, das Ihnen hilft, diese Funktionen zu verstehen und nahtlos in Ihre Projekte zu implementieren.

Was ist Reaktionskontext?

React Context ist eine leistungsstarke Funktion zum Teilen von Werten zwischen Komponenten ohne Prop Drilling. Es bietet eine Möglichkeit, Daten durch den Komponentenbaum zu leiten, ohne Requisiten auf jeder Ebene manuell weitergeben zu müssen.

Hauptvorteile von React Context

• Vereinfacht die Statusverwaltung: Keine Notwendigkeit, Requisiten über mehrere Ebenen weiterzugeben.
• Verbessert die Lesbarkeit des Codes: Macht Ihren Komponentenbaum übersichtlicher.
• Fördert die Wiederverwendbarkeit: Kontextwerte können problemlos in verschiedenen Teilen der Anwendung wiederverwendet werden.

Was sind Reaktionshaken?

React Hooks ermöglichen Ihnen die Verwendung von Status- und anderen React-Funktionen, ohne eine Klasse zu schreiben. Hooks wurden in React 16.8 eingeführt und bieten eine direktere API für die React-Konzepte, die Sie bereits kennen.

Häufig verwendete Haken

• useState: Verwaltet den Status in einer Funktionskomponente.
• useEffect: Behandelt Nebenwirkungen in Funktionskomponenten.
• useContext: Greift auf den Wert eines Kontexts zu.

Einrichten eines Reaktionsprojekts

Bevor wir uns mit der Implementierung befassen, richten wir ein React-Projekt ein. Wenn Sie dies noch nicht getan haben, können Sie mit „React App erstellen“ eine neue React-App erstellen:

npx create-react-app context-hooks-example
cd context-hooks-example
npm start

Dadurch wird eine neue React-Anwendung eingerichtet und der Entwicklungsserver gestartet.

Einen Kontext schaffen

Beginnen wir mit der Erstellung eines neuen Kontexts. Für dieses Beispiel erstellen wir einen einfachen Kontext, um die Informationen eines Benutzers zu verwalten.

// src/UserContext.js
import React, { createContext, useState } from 'react';

export const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({ name: 'John Doe', age: 30 });

  return (
    
      {children}
    
  );
};

Im obigen Code erstellen wir eine UserContext- und eine UserProvider-Komponente. Die UserProvider-Komponente verwendet den useState-Hook zum Verwalten der Benutzerinformationen und übergibt den Benutzerstatus und die setUser-Funktion als Kontextwert.

Kontext in Komponenten verwenden

Da wir nun unseren Kontext eingerichtet haben, verwenden wir ihn in unseren Komponenten.

Auf Kontext in einer Komponente zugreifen

Um auf den Kontext in einer Komponente zuzugreifen, verwenden wir den useContext-Hook. So können Sie es machen:

// src/components/UserProfile.js
import React, { useContext } from 'react';
import { UserContext } from '../UserContext';

const UserProfile = () => {
  const { user } = useContext(UserContext);

  return (
    

      
User Profile
      
Name: {user.name}
      
Age: {user.age}
    
  );
};

export default UserProfile;

In diesem Beispiel greift die UserProfile-Komponente auf die Benutzerinformationen aus dem Kontext zu und zeigt sie an.

Kontextdaten aktualisieren

Um die Kontextdaten zu aktualisieren, verwenden wir die vom Kontext bereitgestellte setUser-Funktion.

// src/components/UpdateUser.js
import React, { useContext } from 'react';
import { UserContext } from '../UserContext';

const UpdateUser = () => {
  const { setUser } = useContext(UserContext);

  const updateUserInfo = () => {
    setUser({ name: 'Jane Doe', age: 25 });
  };

  return (
    

      
Update User
      Update
    
  );
};

export default UpdateUser;

In der UpdateUser-Komponente definieren wir eine Funktion updateUserInfo, die die Benutzerinformationen mithilfe der setUser-Funktion aus dem Kontext aktualisiert.

Kontext und Komponenten integrieren

Als nächstes integrieren wir unseren Kontext und unsere Komponenten in die Hauptanwendung.

// src/App.js
import React from 'react';
import { UserProvider } from './UserContext';
import UserProfile from './components/UserProfile';
import UpdateUser from './components/UpdateUser';

const App = () => {
  return (
    

        
React Context and Hooks Example
        
    
  );
};

export default App;

In der App-Komponente verpacken wir unsere UserProfile- und UpdateUser-Komponenten mit dem UserProvider. Dadurch wird der Kontext für alle Komponenten innerhalb des UserProviders verfügbar.

Häufig gestellte Fragen

Was sind die Hauptvorteile der Verwendung der Kontext-API?

Die Verwendung der Kontext-API vereinfacht die Zustandsverwaltung, indem die Notwendigkeit von Propellerbohrungen reduziert wird. Dadurch wird Ihr Code sauberer und wartbarer, sodass Sie den Status effizient über mehrere Komponenten hinweg teilen können.

Wie verbessern Hooks die Funktionalität von Kontext?

Hooks wie useState und useContext erleichtern die Verwaltung und den Zugriff auf Kontextwerte in Funktionskomponenten. Sie bieten im Vergleich zu Klassenkomponenten eine intuitivere und einfachere Möglichkeit, mit Zustands- und Nebeneffekten umzugehen.

Kann ich mehrere Kontexte in einer einzelnen Komponente verwenden?

Ja, Sie können mehrere Kontexte in einer einzelnen Komponente verwenden, indem Sie useContext mit verschiedenen Kontextobjekten aufrufen. Dadurch können Sie verschiedene Zustandsteile innerhalb derselben Komponente unabhängig verwalten.

Wie behebe ich kontextbezogene Probleme?

Um kontextbezogene Probleme zu beheben, können Sie React DevTools verwenden, das eine Möglichkeit bietet, die Kontextwerte und den Komponentenbaum zu überprüfen. Stellen Sie sicher, dass Ihr Anbieter die Komponenten, die Zugriff auf den Kontext benötigen, korrekt verpackt.

Abschluss

React Context und Hooks bieten eine leistungsstarke Kombination für die Statusverwaltung und die Weitergabe von Daten in Ihrer Anwendung. Wenn Sie diesem Schritt-für-Schritt-Beispiel folgen, können Sie diese Funktionen nutzen, um effizientere und wartbarere React-Anwendungen zu erstellen. Denken Sie daran, die Kontext-API zu verwenden, um Prop-Drilling zu vermeiden, und Hooks, um Status- und Nebeneffekte effektiv zu verwalten.