Status an untergeordnete Komponenten in React übergeben

1. Zweck des Zustandsobjekts
2. Übergeben Sie Daten von übergeordneten an untergeordnete Komponenten
3. Status an untergeordnete Komponenten in React übergeben
4. Kontext-API zum Übergeben des Status an untergeordnete Komponenten

Front-End-Entwickler müssen häufig ein Zustandsmuster auf der Clientseite einrichten, um die dynamischen Funktionen ihrer Webanwendung aufrechtzuerhalten. Das ist ohne Frameworks möglich, aber mit viel Aufwand verbunden.

React verfügt über ein internes Statussystem und beseitigt viele Probleme im Zusammenhang mit der Statusverwaltung.

Zweck des Zustandsobjekts

In React verwenden wir den Status, um externe Daten, Benutzereingaben und andere Werte zu speichern, die sich ändern können. Beispielsweise können wir eine Texteingabe haben, die einen bestimmten Statuswert aktualisiert und dann den Statuswert in JSX referenziert und anzeigt.

Daher aktualisiert die Eingabe den Zustand, und dann verweisen wir auf den Zustand, um Werte anzuzeigen. Änderungen an Werten im Zustand lösen ein erneutes Rendern aus.

Übergeben Sie Daten von übergeordneten an untergeordnete Komponenten

Der gebräuchlichste und einfachste Weg, den Zustand von Eltern an Kinder zu übergeben, ist die manuelle Verwendung von Requisiten. Von der Komponente an der Spitze des Baums zu seinen direkten Kindern, dann empfängt dieses Kind es und gibt es über Requisiten an seine eigenen Kinder weiter, und so weiter, bis es das endgültige Ziel erreicht.

Schauen wir uns ein Beispiel an:

export default function App() {
  return (
    <div className="App">
      <Box number={11} />
      <Box number={15} />
      <Box number={18} />
    </div>
  );
}
function Box(props) {
  return <div>{props.number}</div>;
}

Wir haben den Wert von den Eltern an die Kinder weitergegeben. In diesem Fall müssen wir es nur eine Ebene weitergeben – vom Elternteil zum direkten Kind.

Wenn die untergeordnete Komponente über eine eigene untergeordnete Komponente verfügt, die wiederum über eigene untergeordnete Komponenten verfügt, kann es zeitaufwändig sein, Daten von der übergeordneten Komponente an die untergeordnete Komponente weiterzugeben.

In einigen Fällen können Sie Daten an untergeordnete Komponenten weitergeben, die diese Daten nicht verwenden. Dies nennt man Prop Drilling.

Wenn Sie feststellen, dass Sie dies häufig tun, sollten Sie nach Alternativen suchen.

Status an untergeordnete Komponenten in React übergeben

Die offizielle React-Dokumentation empfiehlt, dass Entwickler alle Zustandsdaten in der übergeordneten Komponente speichern; diese Praxis wird Single Source of Truth genannt. Eine untergeordnete Komponente kann ein Eingabeelement wie ein Textfeld haben.

Mit React können Sie die Referenz an die Funktion weitergeben, die den Status in der übergeordneten Komponente aktualisiert. Sie können die Referenz auf diese Funktion in der untergeordneten Komponente aufrufen, um den Status in der übergeordneten Komponente basierend auf dem lokalen Wert dieser untergeordneten Komponente zu aktualisieren.

Meistens sind React-Web-Apps als Komponentenbäume strukturiert. Es gibt eine Elternkomponente mit mehreren Kindern.

Jedes dieser untergeordneten Elemente kann mehrere eigene untergeordnete Elemente haben, und es kann Dutzende von Ebenen in einem Komponentenbaum geben. Und der Schlüssel ist die Wiederverwendbarkeit von Komponenten, sodass eine Komponente Dutzende von Instanzen haben kann.

In React wird der Zustand (und andere Werte) mithilfe des Objekts props vom Elternteil an die Kinder weitergegeben. Es funktioniert ähnlich wie das Setzen eines Attributs für ein normales HTML-Element.

Stattdessen macht das Festlegen dieses benutzerdefinierten Attributs in JSX diesen Wert für die untergeordnete Komponente verfügbar.

Sehen wir uns ein Beispiel für die Weitergabe einer Zustandsvariablen an eine untergeordnete Komponente an:

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [text, setText] = useState("");
  return (
    <div className="App">
      <input type="Text" onChange={(e) => setText(e.target.value)} />
      <Box paragraph={text} />
    </div>
  );
}
function Box(props) {
  return <div>{props.paragraph}</div>;
}

Live-Demo

Kinderkomponenten können keine Daten an die Eltern weitergeben. Dieses Muster wird als unidirektionaler Datenfluss bezeichnet.

Zustandsdaten werden im Elternelement gespeichert und an die untergeordneten Komponenten weitergegeben.

Im obigen Beispiel haben wir nur einen Elternteil und ein Kind. In einfachen Komponentenbäumen wie diesem macht es Sinn, props zu verwenden; Dieser Ansatz wird jedoch umständlich, wenn zu viele untergeordnete Komponenten mit ihren eigenen untergeordneten Elementen vorhanden sind.

Glücklicherweise bietet React eine Alternative, mit der Sie Werte der Eltern sofort in den Komponenten der Kinder verfügbar machen können, ohne sie auf jeder Ebene weiterzugeben.

Kontext-API zum Übergeben des Status an untergeordnete Komponenten

Die Kontext-API in React ermöglicht es Entwicklern, Zustandswerte an untergeordnete Komponenten zu übergeben, ohne props zu verwenden. Die Daten werden für alle Kinder zugänglich.

Dies ist viel einfacher, als ein einzelnes Datenstück einzeln an viele untergeordnete Komponenten weiterzugeben.

Stellen Sie sich vor, wir müssten diese Werte an viele untergeordnete Komponenten weitergeben. Wir müssen so etwas tun:

export default function App() {
  return (
    <>
      <Child darkMode={true} />
      <Child darkMode={true} />
      <Child darkMode={true} />
    </>
  );
}

function Child ({ darkMode }) {
  return (
    <>
      <Text darkMode={theme} />
      <Video darkMode={theme} />
      <Visual darkMode={theme} />
      <Card darkMode={theme} />
    </>
  );
}

In dieser Komponente hat die übergeordnete Komponente ganz oben drei <Child>-Komponenten, die wiederum untergeordnete Komponenten wie <Text>, <Video>, <Visual>, <Card> und mehr haben . Wir müssen diese Daten an diese Kinder und alle Kinder, die sie haben könnten, weitergeben.

Betrachtet man den Code, wird deutlich, dass dieser Ansatz ineffizient ist.

Zustandswerte wie Designdaten (Dunkelmoduseinstellungen) und Benutzerdaten (Authentifizierungsinformationen) können erforderlich sein, um die Darstellung und Funktionalität der untergeordneten Komponenten anzupassen. Anstatt ihn einzeln manuell weiterzugeben, können React-Entwickler die Context-API verwenden, um den Status an untergeordnete Komponenten zu übergeben, ohne dies über props zu tun.

Verwenden Sie den Kontext, um den Status an untergeordnete Komponenten zu übergeben

Die React-Bibliothek enthält eine createContext()-Methode, mit der React-Entwickler Kontext erstellen können. Es ist einfacher, wenn wir die Implementierung der Kontext-API in vier einfache Schritte unterteilen:

1. Kontext mit der Methode createContext() erstellen.
2. Wickeln Sie den Kontextanbieter um den Komponentenbaum.
3. Setzen Sie den Wertprop auf dem Kontextanbieter auf den Wert, den Sie im gesamten Komponentenbaum freigeben möchten.
4. Greifen Sie auf den Wert in untergeordneten Komponenten zu, indem Sie einen useContext()-Hook verwenden.

Lassen Sie uns einen Beispielcode erstellen und jeden Schritt durchgehen.

Zuerst definieren wir eine funktionale Komponente, die anderen Komponenten übergeordnet ist. Wir verwenden die Methode createContext(), um Kontext in dieser übergeordneten Komponente zu erstellen, und speichern die Referenz in der Variablen dataContext.

import "./styles.css";
import React from "react";
import { useState, useContext } from "react";
const dataContext = React.createContext();

export default function App() {
  const [darkMode, setDarkMode] = useState(true);
  return (
    <dataContext.Provider value={darkMode}>
      <div>
        <Child />
      </div>
    </dataContext.Provider>
  );
}
function Child() {
  return (
    <div>
      <Grandchild />
    </div>
  );
}
function Grandchild() {
  const setting = useContext(dataContext);
  console.log(setting);
  return (
    <div
      style={{
        width: 300,
        height: 300,
        backgroundColor: setting ? "black" : "white",
        color: setting ? "white" : "black"
      }}
    >
      Hello, World
    </div>
  );
}

In der übergeordneten Komponente App haben wir eine untergeordnete Komponente, die eine eigene untergeordnete Komponente hat.

Wir hüllen den gesamten Komponentenbaum in die übergeordnete Komponente mit einem Kontextanbieter ein und setzen das Attribut darkMode auf den Kontextanbieter. Dieser Wert steht allen Kindern zur Verfügung.

Wir müssen den Haken useContext() in den untergeordneten Komponenten verwenden. Dies ist erforderlich, um den für den Kontextanbieter in der übergeordneten Komponente festgelegten Wert zu verwenden.

In diesem Fall verwenden wir den Wert darkMode, um bedingte Stile in der untergeordneten Komponente festzulegen. Sie können versuchen, diesen Wert in der übergeordneten Komponente zu ändern (ändern Sie den an den useState()-Hook übergebenen Anfangswert).

Gehen Sie auch zur Konsole und sehen Sie sich die Bestätigung an, dass der Zustand darkMode erfolgreich vom Elternteil an das Kind über die Kontext-API weitergegeben wurde.