Welche Methoden gibt es für die Komponentenkommunikation in React?-js-Tutorial-php.cn

Dieser Artikel stellt Ihnen hauptsächlich verschiedene Möglichkeiten der Komponentenkommunikation vor. Der Artikel stellt ihn anhand von Beispielcodes ausführlich vor. Er hat einen bestimmten Referenz-Lernwert für alle, die ihn beim Lernen oder Arbeiten benötigen. Lassen Sie uns gemeinsam lernen .

Vorwort

Wenn Sie neu bei React sind, kann es aufgrund der unidirektionalen Datenflussfunktion von zu Problemen bei der Kommunikation zwischen Komponenten kommen Reagieren. Hier ist der folgende Artikel. Bevor wir beginnen, werfen wir einen Blick auf ein Bild:

Reaktionskomponentenkommunikation

Mehrere Situationen, in denen Komponenten kommunizieren müssen
Übergeordnete Komponente kommuniziert mit untergeordneter Komponente
Untergeordnete Komponente kommuniziert mit übergeordneter Komponente
Ebenenübergreifende Komponentenkommunikation
Keine verschachtelte Beziehungskommunikation zwischen Komponenten

1. Übergeordnete Komponente kommuniziert mit untergeordneten Komponenten

Der Reaktionsdatenfluss erfolgt in eine Richtung, und die Kommunikation von der übergeordneten Komponente zur untergeordneten Komponente ist auch die am häufigsten verwendete Weitergabe der erforderlichen Informationen Untergeordnete Komponente über Requisiten
Child.jsx

import React from &#39;react&#39;;
import PropTypes from &#39;prop-types&#39;;
export default function Child({ name }) {
 return <h1>Hello, {name}</h1>;
}
Child.propTypes = {
 name: PropTypes.string.isRequired,
};

Nach dem Login kopieren

Parent.jsx

import React, { Component } from &#39;react&#39;;
import Child from &#39;./Child&#39;;
class Parent extends Component {
 render() {
  return (
   <p>
    <Child name="Sara" />
   </p>
  );
 }
}
export default Parent;

Nach dem Login kopieren

2. Untergeordnete Komponente kommuniziert mit übergeordneter Komponente

Rückruffunktion verwenden
Benutzerdefinierten Ereignismechanismus verwenden

Rückruffunktion

Implementieren Sie die Funktion, sich zu verstecken, indem Sie auf die Schaltfläche „Versteckte Komponente“ in einer Unterkomponente klicken

List3.jsx

import React, { Component } from &#39;react&#39;;
import PropTypes from &#39;prop-types&#39;;
class List3 extends Component {
 static propTypes = {
  hideConponent: PropTypes.func.isRequired,
 }
 render() {
  return (
   <p>
    哈哈,我是List3
    <button onClick={this.props.hideConponent}>隐藏List3组件</button>
   </p>
  );
 }
}
export default List3;

Nach dem Login kopieren

App,jsx

import React, { Component } from &#39;react&#39;;
import List3 from &#39;./components/List3&#39;;
export default class App extends Component {
 constructor(...args) {
  super(...args);
  this.state = {
   isShowList3: false,
  };
 }
 showConponent = () => {
  this.setState({
   isShowList3: true,
  });
 }
 hideConponent = () => {
  this.setState({
   isShowList3: false,
  });
 }
 render() {
  return (
   <p>
    <button onClick={this.showConponent}>显示Lists组件</button>
    {
     this.state.isShowList3 ?
      <List3 hideConponent={this.hideConponent} />
     :
     null
    }
   </p>
  );
 }
}

Nach dem Login kopieren

Sehen Sie sich die an Implementierungsmethode und Sie können sie finden. Die Implementierungsmethode der herkömmlichen Rückruffunktion ist dieselbe und setState wird im Allgemeinen in Paaren mit der Rückruffunktion angezeigt, da die Rückruffunktion eine Funktion ist, die den internen Status konvertiert 🎜>

3. Ebenenübergreifende Komponentenkommunikation

Schicht-für-Schicht-Komponentenübertragungs-Requisiten

Zum Beispiel für die Kommunikation zwischen Komponente A und Komponente B finden zuerst die Gemeinsamkeiten zwischen A und B. Die übergeordnete Komponente A kommuniziert zuerst mit der C-Komponente und die C-Komponente kommuniziert mit der B-Komponente über Requisiten. Zu diesem Zeitpunkt spielt die C-Komponente die Rolle der Middleware

Kontext verwenden

Kontext ist eine globale Variable, wie ein großer Container, auf den überall zugegriffen werden kann. Wir können die zu kommunizierenden Informationen im Kontext platzieren und dann darauf zugreifen wird in anderen Komponenten verwendet;

Offiziell wird jedoch nicht empfohlen, eine große Anzahl von Kontexten zu verwenden. Wenn die Komponentenstruktur jedoch komplex ist, wissen wir nicht, wo Der Kontext wird von übergeben und der Kontext ist eine globale Variable, und globale Variablen führen zu Verwirrung in der Anwendung.

Kontext verwenden

Die Komponente Beziehung im folgenden Beispiel: ListItem ist eine Unterkomponente von List und List ist eine Unterkomponente von app

ListItem.jsx

import React, { Component } from &#39;react&#39;;
import PropTypes from &#39;prop-types&#39;;
class ListItem extends Component {
 // 子组件声明自己要使用context
 static contextTypes = {
  color: PropTypes.string,
 }
 static propTypes = {
  value: PropTypes.string,
 }
 render() {
  const { value } = this.props;
  return (
   <li style={{ background: this.context.color }}>
    <span>{value}</span>
   </li>
  );
 }
}
export default ListItem;

Nach dem Login kopieren

List.jsx

import ListItem from &#39;./ListItem&#39;;
class List extends Component {
 // 父组件声明自己支持context
 static childContextTypes = {
  color: PropTypes.string,
 }
 static propTypes = {
  list: PropTypes.array,
 }
 // 提供一个函数,用来返回相应的context对象
 getChildContext() {
  return {
   color: &#39;red&#39;,
  };
 }
 render() {
  const { list } = this.props;
  return (
   <p>
    <ul>
     {
      list.map((entry, index) =>
       <ListItem key={`list-${index}`} value={entry.text} />,
      )
     }
    </ul>
   </p>
  );
 }
}
export default List;

Nach dem Login kopieren

app.jsx

import React, { Component } from &#39;react&#39;;
import List from &#39;./components/List&#39;;
const list = [
 {
  text: &#39;题目一&#39;,
 },
 {
  text: &#39;题目二&#39;,
 },
];
export default class App extends Component {
 render() {
  return (
   <p>
    <List
     list={list}
    />
   </p>
  );
 }
}

Nach dem Login kopieren

4. Komponentenkommunikation ohne verschachtelte Beziehung

Benutzerdefinierten Ereignismechanismus verwenden

In der KomponenteDidMount Wenn die Komponente gemountet ist, abonnieren Sie das Ereignis. Wenn die Komponente nicht gemountet ist, brechen Sie das Abonnement von Ereignissen im ComponentWillUnmount ab.

Nehmen Sie das häufig verwendete Publish/Subscribe-Modell als Beispiel und leihen Sie sich den Browser aus Version des Node.js-Ereignismoduls zum Implementieren von

Benutzerdefinierte Ereignisse verwenden

Die Komponentenbeziehung im folgenden Beispiel: List1 und List2 haben keine Verschachtelungsbeziehung, App ist ihre übergeordnete Komponente;

Um eine solche Funktion zu erreichen: Klicken Sie auf eine Schaltfläche in Liste2, um die Informationen in Liste1 zu ändern. Um

anzuzeigen, müssen Sie zuerst das Ereignispaket im Projekt installieren:

npm install events --save

Nach dem Login kopieren

Erstellen Sie ein neues Util-Verzeichnis unter src und erstellen Sie eine events.js

import { EventEmitter } from &#39;events&#39;;
export default new EventEmitter();

Nach dem Login kopieren

list1.jsx

import React, { Component } from &#39;react&#39;;
import emitter from &#39;../util/events&#39;;
class List extends Component {
 constructor(props) {
  super(props);
  this.state = {
   message: &#39;List1&#39;,
  };
 }
 componentDidMount() {
  // 组件装载完成以后声明一个自定义事件
  this.eventEmitter = emitter.addListener(&#39;changeMessage&#39;, (message) => {
   this.setState({
    message,
   });
  });
 }
 componentWillUnmount() {
  emitter.removeListener(this.eventEmitter);
 }
 render() {
  return (
   <p>
    {this.state.message}
   </p>
  );
 }
}
export default List;

Nach dem Login kopieren

List2.jsx

import React, { Component } from &#39;react&#39;;
import emitter from &#39;../util/events&#39;;
class List2 extends Component {
 handleClick = (message) => {
  emitter.emit(&#39;changeMessage&#39;, message);
 };
 render() {
  return (
   <p>
    <button onClick={this.handleClick.bind(this, &#39;List2&#39;)}>点击我改变List1组件中显示信息</button>
   </p>
  );
 }
}

Nach dem Login kopieren

APP.jsx

import React, { Component } from &#39;react&#39;;
import List1 from &#39;./components/List1&#39;;
import List2 from &#39;./components/List2&#39;;
export default class App extends Component {
 render() {
  return (
   <p>
    <List1 />
    <List2 />
   </p>
  );
 }
}

Nach dem Login kopieren

Benutzerdefinierte Ereignisse sind ein typisches Veröffentlichungs- und Abonnementmodell, das die Kommunikation zwischen Komponenten durch das Hinzufügen von Listenern und das Auslösen von Ereignissen zu Ereignisobjekten implementiert Komponente kommuniziert mit untergeordneter Komponente: Requisiten

Untergeordnete Komponente kommuniziert mit übergeordneter Komponente: Rückruffunktion/Selbst Ereignisse definieren

Komponentenübergreifende Kommunikation: Schicht-für-Schicht-Komponenten übergeben Requisiten/Kontext
Keine Verschachtelungsbeziehung Kommunikation zwischen Komponenten: Benutzerdefinierte Ereignisse
Bei der Kommunikation mit Komponenten verwenden wir hauptsächlich Schauen Sie sich die spezifischen Anforderungen des Unternehmens an und wählen Sie die am besten geeignete aus.
Wenn die Geschäftslogik bis zu einem gewissen Grad komplex ist, können Sie die Einführung von Mobx, Redux und anderen Statusverwaltungstools in Betracht ziehen
Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.
Verwandte Artikel:

Detaillierte Interpretation der Kartendatenstruktur in Javascript

So implementieren Sie einen benutzerdefinierten Ereignismechanismus mit Javascript

So verwenden Sie Vue, um die Anmelderegistrierung und die Token-Überprüfung zu implementieren

So verwenden Sie Vue, um die Token-Überprüfung zu implementieren

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es für die Komponentenkommunikation in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!