React Context: Der ausführliche Leitfaden

Dead Simple Chat bietet eine leistungsstarke JavaScript-Chat-API, mit der Sie in wenigen Minuten Chat in jede React- oder Webanwendung hinzufügen können. Dead Simple Chat ist hochgradig anpassbar und kann für jeden Chat-Anwendungsfall verwendet werden.

Wenn Sie Daten von der übergeordneten Komponente an die untergeordneten Komponenten übergeben möchten, verwenden Sie normalerweise Requisiten.

Wenn die Daten jedoch tiefgreifend von mehreren Komponenten übergeben werden müssen und mehrere Komponenten dieselben Daten benötigen, wird es umständlich, Requisiten zum Übergeben der Daten im Komponentenbaum zu verwenden.

Der Kontext kann als Alternative zur Datenübergabe mithilfe von Requisiten verwendet werden. Durch den Kontext kann die übergeordnete Komponente Daten an den gesamten Baum der darunter liegenden untergeordneten Komponenten weitergeben.

Dadurch wird die Aufgabe, die Requisiten manuell an alle untergeordneten Komponenten weiterzugeben, die dieselben Daten benötigen, erheblich reduziert.

Schauen wir uns ein kurzes Beispiel mit React Context an.

Javascript-Chat-API und SDK | DeadSimpleChat

Fügen Sie innerhalb von Sekunden ganz einfach Chat zu Ihrer Website oder App hinzu. Vorgefertigter Chat mit API und Javascript SDK | DeadSimpleChat.

Beispiel für einen Schnellreaktionskontext

Wir werden eine sehr einfache React-Anwendung mit React Context erstellen, um die zu übergeben theme Wert im Komponentenbaum nach unten.

Mit der App können Benutzer zwischen hellen und dunklen Themen wechseln

  1. Ein … kreieren ThemeProvider.jsx Datei zum Speichern der Logik unseres ThemeContext.
import { createContext, useState } from 'react';

export const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    
      {children}
    
  );
};

export default ThemeProvider;

Wir haben das verwendet createContext() Methode zum Erstellen eines Kontexts mit dem Namen ThemeContext

Dann erstellen wir eine ThemeProvider und in der ThemeProvider Methode fügen wir den Status und die Methoden hinzu, die wir an alle untergeordneten Komponenten weitergeben möchten.

In der Rückgabemethode legen wir offen theme Zustandsvariable und toggleTheme Methode für alle untergeordneten Komponenten mithilfe der Requisite value={{ theme, toggleTheme }}

Der theme Staat und die toggleTheme Die Variable steht allen untergeordneten Komponenten zur Verfügung.

2. Importieren Sie die ThemeProvider in dein App.js und wickeln Sie das ein ThemeProvider um Ihre Root-Komponente herum. Dadurch können alle untergeordneten Komponenten auf den Kontext zugreifen.

import React from 'react';
import ThemeProvider from './ThemeProvider';
import MainComponent from './MainComponent';

function App() {
  return (
    
      
    
  );
}

export default App;

3. Jetzt erstellen wir das MainComponent.js Datei, um den Kontext zu nutzen

import { useContext } from 'react';
import { ThemeContext } from './ThemeProvider';

const MainComponent = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  const themeStyles = {
    backgroundColor: theme === 'light' ? '#fff' : '#333',
    color: theme === 'light' ? '#333' : '#fff',
  };

  return (
    

Main Component

Current Theme: {theme}

); }; export default MainComponent;

Im obigen Code verwenden wir die useContext Haken zum Abrufen der theme Zustandsvariable und die toggleTheme Methode aus dem Kontext.

useContext

Der useContext Die Methode wird verwendet, um den Kontext in den untergeordneten Komponenten zu verwenden. Der useContext Die Methode akzeptiert den Kontext, den die untergeordnete Komponente verwenden möchte, und wir können die vom Kontext bereitgestellten Methoden und Variablen extrahieren.

  const { theme, toggleTheme } = useContext(ThemeContext);

Weitere Beispiele mit React Context

Schauen wir uns einige weitere Beispiele für die Verwendung von React Context an und zeigen, wo es sinnvoll ist, React Context in Ihrer Anwendung zu verwenden.

Verwenden von React Context mit React Toastify

React Toastify ist eine Bibliothek, die zum Anzeigen von Toastbenachrichtigungen in Ihrer Anwendung verwendet wird.

Wenn Sie ein ausführliches Tutorial zu React Toastify erfahren möchten, können Sie sich unseren Blogbeitrag „React Toastify Complete Guide“ ansehen.

Zunächst erstellen wir mit React Toastify eine Basis-App. Unser Ziel ist es, der Anwendung das Auslösen von Toastbenachrichtigungen von jeder Komponente aus zu ermöglichen.

Wir könnten eine Methode erstellen, um eine Toast-Benachrichtigung auszulösen und sie an untergeordnete Komponenten weiterzugeben, aber das würde umständlich werden, wenn der Komponentenbaum mit vielen untergeordneten Komponenten wächst.

Lesen Sie auch  Warum glückliche Teams der Erfolgsfaktor schlechthin sind

Um dieses Problem zu lösen, könnten wir einen Kontext erstellen und die Methode hinzufügen, um die Toastbenachrichtigung im Kontext anzuzeigen, und die untergeordneten Komponenten könnten den Kontext verwenden und die Methode aufrufen, um die Toastbenachrichtigung anzuzeigen.

  1. Zuerst installieren wir das react-toastify Paket
npm install --save react-toastify

2. Als nächstes erstellen wir eine Datei mit dem Namen „as“. ToastProvider.js Diese Datei enthält unsere ToastContext Und ToastProvider

import { createContext } from "react";
import { toast } from "react-toastify";

export const ToastContext = createContext();

const ToastProvider = ({ children }) => {
  const showToast = (message, type) => {
    toast[type](message);
  };

  return (
    
      {children}
    
  );
};

export default ToastProvider;

3. Wickeln Sie das ein ToastProvider um die Root-Komponente in Ihrem App.js Datei

import React from 'react';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import ToastProvider from './ToastProvider';
import MainComponent from './MainComponent';

function App() {
  return (
    
      
      
    
  );
}

export default App;

3. Erstellen Sie die MainComponent.js Datei zum Speichern der MainComponent. Im MainComponent Wir werden den Kontext verwenden, um die Toastbenachrichtigung auszulösen

import { useContext } from "react";
import ChildComponent from "./ChildComponent";
import { ToastContext } from "./ToastProvider";

const MainComponent = () => {
  const { showToast } = useContext(ToastContext);

  const handleShowToast = (type) => {
    const message = `This is a ${type} toast!`;
    showToast(message, type);
  };

  return (
    

Main Component

); }; export default MainComponent;

4. Erstellen Sie eine Komponente mit dem Namen ChildComponent.js Dadurch können wir den Kontext auch in der untergeordneten Komponente verwenden

import { useContext } from "react";
import AnotherChildComponent from "./AnotherChildComponent";

import { ToastContext } from "./ToastProvider";

function ChildComponent() {
  const { showToast } = useContext(ToastContext);

  function triggerToast() {
    showToast("Toast tiggered from child component", "success");
  }

  return (
    

Child Componenet

); } export default ChildComponent;

5. Wir werden weitere Komponenten hinzufügen, die das untergeordnete Element der „ChildComponent“ namens „ChildComponent“ sind AnotherChildComponent.js

import { useContext } from "react";

import { ToastContext } from "./ToastProvider";

function AnotherChildComponent() {
  const { showToast } = useContext(ToastContext);

  function triggerToast() {
    showToast("Toast tiggered from AnotherChild component", "success");
  }

  return (
    

Another Child Componenet

); } export default AnotherChildComponent;

Hier ist der vollständige Code, der die CodeSandbox ausführt:

Javascript-Chat-API und SDK | DeadSimpleChat

Fügen Sie innerhalb von Sekunden ganz einfach Chat zu Ihrer Website oder App hinzu. Vorgefertigter Chat mit API und Javascript SDK | DeadSimpleChat.

Beispiel mit mehreren Kontexten

Schauen wir uns nun ein Beispiel an, das mehrere React-Kontexte verwendet. Wir werden eine mehrseitige React-Anwendung erstellen mit react-router-dom und wird zwei Kontexte erstellen, einer wird der sein ThemeContext um das Thema zu verwalten und ein anderes wird das sein UserContext.

  1. Erstellen Sie eine neue Reaktionsanwendung mit create-react-app
npx create-react-app multi-context-app
cd multi-context-app

2. Jetzt installieren react-router-dom Paket, das es uns ermöglicht, Routing in unserer Anwendung zu erstellen

npm install react-router-dom

3. Jetzt erstellen wir unsere ThemeContext. Erstellen Sie einen Ordner namens contexts im Ordner src und erstellen Sie dort eine Datei namens ThemeContext.js

// src/contexts/ThemeContext.js

import { createContext, useState } from "react";

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };

  return (
    
      {children}
    
  );
};

export { ThemeContext, ThemeProvider };

Der ThemeContext ähnelt dem ThemeContext, den wir in unserem ersten Beispiel erstellt haben.

4. Erstellen Sie als Nächstes einen weiteren Kontext mit dem Namen „ UserContext, in unserem Kontextordner. Der UserContext speichert die Informationen über den angemeldeten Benutzer.

// src/contexts/UserContext.js

import { createContext, useState } from "react";

const UserContext = createContext();

const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (username, password) => {
    // perform login logic and set the user object
    setUser({ username, email: "[email protected]" });
  };

  const logout = () => {
    // perform logout logic and set the user object to null
    setUser(null);
  };

  return (
    
      {children}
    
  );
};

export { UserContext, UserProvider };

Wir werden einige Komponenten erstellen, die den Kontext verwenden würden.

Wir werden schaffen Header Komponente, die das aktuelle Thema anzeigt und es dem Benutzer ermöglicht, es umzuschalten, und wir werden auch eine erstellen Profile Komponente, die Informationen über den aktuell angemeldeten Benutzer anzeigt und ihm auch die Abmeldung ermöglicht.

Lesen Sie auch  Südkalifornien bekommt Schnee, Regen und kleine Tornados im Frühlingssturm

Sie haben es vielleicht schon erraten Header Die Komponente verwendet die ThemeContext und das Profile Komponente würde die verwenden UserContext.

5. Erstellen Sie eine Datei mit dem Namen src/Header.js Dies enthält unsere Header-Komponente und fügt dieser Datei den folgenden Code hinzu:

// src/Header.js

import { useContext } from "react";
import { ThemeContext } from "./contexts/ThemeContext";
import { Link } from "react-router-dom";

const Header = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    
); }; export default Header;

Im obigen Code verwenden wir die ThemeContext und rufen Sie die aktuellen Theme-Informationen ab und legen Sie das aktuelle Theme als fest className für den Header.

Wir rufen auch an toggleTheme Methode, die uns von der zur Verfügung gestellt wurde ThemeContext wenn der Benutzer auf klickt Toggle Theme Taste.

6. Erstellen Sie eine weitere Datei mit dem Namen „as“. src/Profile.js Dies wird den Code für uns enthalten Profile Komponente.

// src/Profile.js

import { useContext } from "react";
import { UserContext } from "./contexts/UserContext";

const Profile = () => {
  const { user, login, logout } = useContext(UserContext);

  const handleLogin = () => {
    login("myusername", "mypassword");
  };

  const handleLogout = () => {
    logout();
  };

  return (
    
{user ? ( <>

{user.username}

{user.email}

) : ( <> )}
); }; export default Profile;

Der Profile Komponente verwendet die UserContext. Wir haben das An- und Abmelden vereinfacht und zeigen die Benutzerinformationen an. In der Profilkomponente haben wir außerdem die Anmelde- und Abmeldeschaltflächen hinzugefügt, die beim Drücken die Kontextmethoden aufrufen, um die Anmeldung und Abmeldung zu simulieren.

7. Nun richten wir das Routing in unserer Anwendung ein und erstellen zwei Seiten Home Und Dashboard das würde unsere nutzen Header Und Profile Komponenten.

Erstellen Sie eine Datei mit dem Namen „as“. src/Home.js das würde unsere Homepage enthalten.

// src/Home.js

import React from "react";
import Profile from "./Profile";

const Home = () => {
  return (
    

Welcome to My App

This is the home page of my app

); }; export default Home;

Der Home Die Komponente verwendet die Profilkomponente, um die Profilinformationen anzuzeigen.

Erstellen Sie eine weitere Datei mit dem Namen „as“. Dashboard.js Dadurch wird die Dashboard-Route angezeigt.

// src/Dashboard.js

import { useContext } from "react";
import { UserContext } from "./contexts/UserContext";

const Dashboard = () => {
  const { user, login, logout } = useContext(UserContext);

  function handleLogin() {
    login("username", "password");
  }

  return (
    
{user ? ( <>

Dashboard

Welcome to your dashboard, {user.username}

) : ( <>

You need to be logged in to access the dashboard

)}
); }; export default Dashboard;

Im Dashboard In der Komponente verwenden wir den Kontext direkt, um die Benutzerinformationen abzurufen, und wir haben außerdem eine Anmeldeschaltfläche hinzugefügt, um dem Benutzer die Anmeldung zu ermöglichen, wenn der Benutzer nicht angemeldet ist.

8. Aktualisieren Sie die App.js-Datei, um die Anbieter, Header und Router zu importieren

// src/App.js

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Header from "./Header";
import Home from "./Home";
import Dashboard from "./Dashboard";
import { ThemeProvider } from "./contexts/ThemeContext";
import { UserProvider } from "./contexts/UserContext";
import "./App.css";

const App = () => {
  return (
    
      
        
          
} /> } />
); }; export default App;

Hier ist der vollständige Code, der in Code Sandbox ausgeführt wird:

Nachdem wir nun ein umfassendes Beispiel für die Verwendung von React Context gesehen haben, wollen wir nun besprechen, wo die Verwendung von React Context sinnvoll ist und in welchen Szenarien React Context vermieden werden sollte.

Sie können die JavaScript-Chat-API von Dead Simple Chat verwenden, um Chat einfach in Ihre React-Anwendungen hinzuzufügen.

Szenarien zur Verwendung von React Context

Der Reaktionskontext ist besonders nützlich, wenn es einen globalen anwendungsweiten Status gibt, der mit vielen Komponenten geteilt werden muss. Hier sind einige der Szenarien, in denen es sinnvoll ist, React Context zu verwenden.

  1. Management des globalen Staates: Wenn Sie einen globalen Status haben, der von vielen Komponenten gemeinsam genutzt werden muss, z. B. Thema, Anpassung, App-Konfiguration, Benutzerauthentifizierung usw., ist React Context eine gute Wahl.
  2. Verhindern von Propellerbohrungen: Wir haben auch die Beispiele besprochen und gesehen. Wenn Sie die Daten durch mehrere Komponenten leiten müssen, ist es sehr umständlich, die Daten durch Requisiten zu leiten. Mit React Context können Sie die Daten sauber durch Ihren Komponentenbaum leiten, was zu wartbarem Code führt.
  3. Wiederverwendbarkeit zum Code hinzufügen: Mit React Context können Sie Logik in Ihrer Anwendung wiederverwenden. Wie wir im folgenden Beispiel gesehen haben, verwenden wir React Context, um Toast zu starten und Benachrichtigungen von überall im Komponentenbaum anzuzeigen.
Lesen Sie auch  Zwei Kampfflugzeuge greifen am Himmel über Washington ein, um einen Privatjet abzufangen, der in Virginia abstürzt

Es ist wichtig zu beachten, dass Sie den Kontext nicht überbeanspruchen sollten. In der offiziellen Reaktionsdokumentation heißt es: „Nur weil Sie einige Requisiten mehrere Ebenen tief weitergeben müssen, heißt das nicht, dass Sie diese Informationen in einen Kontext setzen sollten.“

Beginnen Sie zunächst mit der Weitergabe von Requisiten nach unten und wenn es zu umständlich wird, dann überarbeiten Sie es in die Verwendung von React Context.

Die Weitergabe von Requisiten nach unten ist vorzuziehen, da dadurch der Codebasis ein gewisses Maß an Transparenz verliehen wird.

Wenn Ihre Anwendung außerdem eine komplexe Zustandsverwaltung erfordert, können Sie die Verwendung einer dedizierten Zustandsverwaltungsbibliothek wie Redux oder MobX in Betracht ziehen.

Szenarien, in denen React Context nicht verwendet wird

Hier sind einige der Szenarien, in denen Sie die Verwendung von React Context vermeiden sollten.

  1. Lokal verwandter Staat: Wenn der Zustand nur für wenige eng verwandte Komponenten relevant ist, ist die Verwendung von React Context übertrieben und würde zu unnötiger Komplexität führen.
  2. Status wird häufig aktualisiert: Der Reaktionskontext rendert alle Komponenten mithilfe des Status neu. Wenn ein Statuswert häufig aktualisiert wird und nicht für alle Komponenten relevant ist, würde dies zu Leistungsproblemen und unnötigem Neu-Rendering der Komponenten führen.
  3. Komplexes Staatsmanagement: Der Reaktionskontext eignet sich zum Verwalten eines einfachen globalen Status. Wenn Ihre Anwendung eine komplexe Zustandsverwaltung und erweiterte Funktionen erfordert, wäre die Verwendung von Redux oder MobX sinnvoller.
  4. Komponente-zu-Komponenten-Kommunikation: Wenn Sie möchten, dass zwei untergeordnete Komponenten miteinander kommunizieren, ist der React-Kontext keine gute Wahl. In diesem Fall können Sie den Status erhöhen oder Rückruffunktionen übergeben.
  5. Komplexe Datenstrukturen: React Context eignet sich am besten für flache Datenstrukturen. Wenn Ihr Bundesstaat eine komplexe verschachtelte Datenstruktur erfordert, ist der React-Kontext möglicherweise nicht die beste Wahl. Außerdem wäre die Wartung schwierig und würde zu Leistungsproblemen führen.

Reagieren Sie auf Fallstricke im Kontext

Bei der Verwendung von React Context gibt es einige Fallstricke, die Sie beachten sollten, um Leistungsprobleme, Engpässe und die Erstellung von Code zu verhindern, der schwer zu warten ist.

  1. Überbeanspruchung des Kontexts: Es ist einfacher, React Context und sogar den React State zu überbeanspruchen. Das Hinzufügen von neuem Kontext und sogar neuem Status erhöht die Komplexität der Anwendung. Sie sollten daher bei der Verwendung von React Context vorsichtig sein und es Ihrer Anwendung hinzufügen, wenn es absolut notwendig erscheint.
  2. Enge Kopplung der Komponenten: Die Verwendung von zu viel Kontext in Ihrer Anwendung würde dazu führen, dass Komponenten eng miteinander verbunden sind, und die Aktualisierung einer Komponente würde zu unnötigen Nebenwirkungen in anderen Komponenten führen. Um dies zu vermeiden, müssen die Komponenten klar abgegrenzt werden.
  3. Veränderbare Kontextwerte: Aktualisieren Sie die Kontextwerte niemals direkt, sondern verwenden Sie immer die setState Methode oder erstellen Sie eine Methode im Kontextanbieter, um den Status zu aktualisieren. Das direkte Aktualisieren des Kontextwerts würde zu unerwartetem Verhalten und schwer zu findenden Fehlern führen.
  4. Unnötige Renderings: Wenn sich ein Kontextwert ändert, werden alle Komponenten, die den Kontext nutzen, neu gerendert. Dies kann zu Leistungsproblemen führen, wenn viele Komponenten den Kontext nutzen. Daher sollten Sie den Kontext nicht verwenden, wenn sich sein Wert häufig ändert, oder Sie sollten den Kontext aufteilen und nur relevante Komponenten sollten den häufig aktualisierten Kontext nutzen.

Abschluss

In diesem Leitfaden haben wir die React Context API untersucht und sowohl einfachere als auch komplexere Beispiele gesehen, die mehrere Kontexte verwenden.

Wir haben auch die Szenarien besprochen, in denen die Verwendung des React Context sinnvoll ist und in denen dies vermieden werden sollte, und haben auch einige Fallstricke bei der Verwendung von React Context festgestellt.

Ich hoffe, dass dieser Leitfaden Ihnen ein gutes Verständnis von React Context vermittelt.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.