Detaillierte Erklärung, wie Komponenten in React kommunizieren

1. Was ist

Wir können die Kommunikation zwischen Komponenten in zwei Worten zusammenfassen:

• Komponenten
• Kommunikation

Wenn man auf die Vue-Artikelserie zurückblickt, sind Komponenten eine der leistungsstärksten Funktionen von vue , und die Komponentisierung ist auch die Kernidee von React

Im Vergleich zu vue sind React Komponenten flexibler und vielfältiger und können auf unterschiedliche Weise in viele Komponententypen unterteilt werden.

Kommunikation bezeichnet den Vorgang, bei dem ein Sender Informationen in einem bestimmten Format über ein bestimmtes Medium an einen Empfänger überträgt, um einen bestimmten Zweck zu erreichen. Im weiteren Sinne ist jeder Informationsverkehr Kommunikation.

Kommunikation zwischen Komponenten bedeutet, dass Komponenten auf irgendeine Weise Informationen übermitteln, um einen bestimmten Zweck zu erreichen.

2. Wie kommuniziert man?

Für die Übertragung von Bauteilen gibt es viele Möglichkeiten, die sich je nach Absender und Empfänger in folgende Varianten unterteilen lassen:

• Übergabe von der übergeordneten Komponente an die untergeordnete Komponente
• Untergeordnete Komponente wird an übergeordnete Komponente übergeben
• Kommunikation zwischen Geschwisterkomponenten
• Übergabe von der übergeordneten Komponente an die untergeordnete Komponente
• Nicht-relationale Komponentenübertragung

Übergabe von der übergeordneten Komponente an die untergeordnete Komponente

Da der Datenfluss von React einseitig ist, ist die Übergabe von der übergeordneten Komponente zur untergeordneten Komponente der gebräuchlichste Weg

Wenn die übergeordnete Komponente die untergeordnete Komponente aufruft, muss sie nur Parameter im Tag der untergeordneten Komponente übergeben, und die untergeordnete Komponente kann die von der übergeordneten Komponente übergebenen Parameter über props empfangen.

Funktion EmailInput(Eigenschaften) {
  zurückkehren (
    <Bezeichnung>
      E-Mail: <input value={props.email} />
    </Bezeichnung>
  );
}

const-Element = <EmailInput email="[email protected]" />;

Untergeordnete Komponente wird an übergeordnete Komponente übergeben

Die Grundidee der Kommunikation zwischen untergeordneten Komponenten und übergeordneten Komponenten besteht darin, dass die übergeordnete Komponente eine Funktion an die untergeordnete Komponente übergibt und dann den von der untergeordneten Komponente übergebenen Wert durch den Rückruf dieser Funktion abruft.

Der entsprechende Code der übergeordneten Komponente lautet wie folgt:

Klasse Eltern erweitert Komponente {
  Konstruktor() {
    super();
    dieser.Zustand = {
      Preis: 0
    };
  }

  getItemPrice(e) {
    dies.setState({
      Preis:
    });
  }

  rendern() {
    zurückkehren (
      <div>
        <div>Preis: {this.state.price}</div>
        {/* Übergeben Sie eine Funktion an die untergeordnete Komponente*/}
        <Untergeordneter getPrice={dies.getItemPrice.bind(dies)} />
      </div>
    );
  }
}

Der entsprechende Code der Unterkomponente lautet wie folgt:

Klasse Child erweitert Komponente {
  KlickWaren(e) {
    // Übergeben Sie den Wert an diese Funktion this.props.getPrice(e);
  }

  rendern() {
    zurückkehren (
      <div>
        <button onClick={this.clickGoods.bind(this, 100)}>Ware1</button>
        <button onClick={this.clickGoods.bind(this, 1000)}>Waren2</button>
      </div>
    );
  }
}

Kommunikation zwischen Geschwisterkomponenten

Wenn die Daten zwischen Geschwisterkomponenten übertragen werden, fungiert die übergeordnete Komponente als Zwischenschicht, um die Datenkommunikation sicherzustellen.

Klasse Parent erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten)
    dieser.Zustand = {Anzahl: 0}
  }
  setCount = () => {
    dies.setState({Anzahl: dieser.state.count + 1})
  }
  rendern() {
    zurückkehren (
      <div>
        <GeschwisterA
          Anzahl = {dieser.Zustand.Anzahl}
        />
        <GeschwisterB
          beiKlick={this.setCount}
        />
      </div>
    );
  }
}

Übergabe von der übergeordneten Komponente an die untergeordnete Komponente

Es ist üblich, dass eine übergeordnete Komponente Daten an ihre untergeordneten Komponenten weitergibt, genau wie globale Daten.

Durch die Verwendung context können Komponenten miteinander kommunizieren, sodass Daten ausgetauscht werden können und andere Komponenten die entsprechenden Daten lesen können.

Erstellen Sie einen context mit React.createContext

 const PriceContext = React.createContext('Preis')

Nachdem context erfolgreich erstellt wurde, existiert darunter Provider Komponente, um die Datenquelle zu erstellen, und Consumer Komponente wird zum Empfangen von Daten verwendet. Die Verwendungsbeispiele sind wie folgt:

Provider verwendet value Wertattribut, um Daten an untergeordnete Komponenten zu übergeben:

<PriceContext.Provider-Wert={100}>
</PreisContext.Provider>

Wenn Sie die vom Provider übergebenen Daten abrufen möchten, können Sie diese über die Consumer Komponente empfangen oder contextType Eigenschaft verwenden, die wie folgt lautet:

Klasse MyClass erweitert React.Component {
  statischer Kontexttyp = Preiskontext;
  rendern() {
    lass Preis = diesen.Kontext;
    /* Rendering basierend auf diesem Wert durchführen*/
  }
}

Verbraucherkomponente:

<Preiskontext.Verbraucher>
    { /* Dies ist eine Funktion */ }
    {
        Preis => <div>Preis: {Preis}</div>
    }
</PreisKontext.Verbraucher>

Nicht-relationale Komponentenübertragung

Wenn die Beziehung zwischen Komponenten komplex ist, wird empfohlen, die Daten als globale Ressource zu verwalten, um eine Kommunikation zu erreichen, z. B. redux . Die Verwendung von redux wird später ausführlich beschrieben

Abschluss

Da React ein einseitiger Datenfluss ist, besteht die Grundidee darin, dass Komponenten die empfangenen Daten nicht ändern, sondern nur auf Änderungen in den Daten warten. Wenn sich die Daten ändern, verwenden sie den neuen Wert, den sie empfangen haben, anstatt den vorhandenen Wert zu ändern.

Daher ist ersichtlich, dass während des Kommunikationsprozesses der Speicherort der Daten am übergeordneten Standort gespeichert wird

Damit ist dieser Artikel über die Kommunikation von Komponenten in React abgeschlossen. Weitere Informationen zur Kommunikation zwischen React-Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!