Implementierung der kollaborativen Nutzung von React-Komponenten

Entwickler müssen den Implementierungsdetails auf UI-Ebene nicht allzu viel Aufmerksamkeit schenken. Was sie vor allem berücksichtigen müssen, ist die Datenkommunikation zwischen Komponenten. Was sind also die Szenarien, in denen Komponenten bei der React-Entwicklung zusammenarbeiten? Wie erreicht man einen koordinierten Einsatz der Komponenten?

Bei der Komponentenzusammenarbeit handelt es sich im Wesentlichen um eine Möglichkeit, Komponenten zu organisieren und zu verwalten.

Ziel ist es, die Systemlogik klar, den Code modular, die Details gekapselt und den Code wiederverwendbar zu machen.

Es gibt zwei Möglichkeiten der Komponentenzusammenarbeit: verschachtelter, extrahierter und Publish-Subscribe-Modus.

Verschachtelung

Das Wesentliche bei der Verschachtelung von Komponenten ist die Eltern-Kind-Beziehung, also die Kommunikation zwischen übergeordneten und untergeordneten Komponenten.

Im Allgemeinen gibt es zwei Szenarien:

• Kommunikation zwischen übergeordneten und untergeordneten Komponenten
• Brother-Komponentenkommunikation

Kommunikation zwischen übergeordneten und untergeordneten Komponenten

Sehen wir uns zunächst die am häufigsten verwendete Methode anhand des Props-Attributs an. Am Beispiel der übergeordneten und untergeordneten Komponente muss die übergeordnete Komponente die Daten nur in Form von Requisiten an die untergeordnete Komponente übergeben, und die untergeordnete Komponente kann sie direkt über this.props abrufen, beispielsweise:

// Übergeordnete Komponente
exportiere Standardklasse Parent erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);

    dieser.Zustand = {
      Nachricht: „Nachricht an untergeordnete Komponenten weitergegeben“
    }
  }

  //Nachrichtenrückruf onMessage(messageFromChildren) {
    console.log(Nachricht von Kindern);
  }

  rendern() {
    const { Nachricht } = dieser.Zustand;
    zurückkehren (
      <div>
        <Untergeordnete Nachricht={ Nachricht } beiNachricht={ diese.beiNachricht.binden(diese) } />
      </div>
    );
  }
}

//Kinder
exportiere Standardklasse Children erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
  }

  handleKlick() {
    this.props.onMessage('Nachricht von untergeordneter Komponente');
  }

  rendern() {
    const { Nachricht } = diese.props;
    zurückkehren (
      <div>
        <p>{ Nachricht }</p>
        <button onClick={ this.handleClick.bind(this) }>klicken</button>
      </div>
    );
  }
}

Wenn die untergeordnete Komponente Daten an die übergeordnete Komponente übergeben muss, können Sie natürlich die Rückrufmethode verwenden. Die übergeordnete Komponente übergibt den Verweis auf die Methode über Requisiten an die untergeordnete Komponente, z. B. durch Aufrufen von onMessage in handleClick im obigen Code. Wenn der Status der übergeordneten Komponente aktualisiert wird, wird die untergeordnete Komponente neu gerendert und verwendet die neuesten Nachrichtendaten.

Die Funktion von bind besteht darin, der Funktion Standardparameter hinzuzufügen. Der erste Parameter ersetzt diese in der Methode.

Brother-Komponentenkommunikation

Brother-Komponenten können nicht direkt miteinander kommunizieren und müssen zur Statusverbesserung über die übergeordnete Komponente übertragen werden. Geschwisterkomponenten leiten die Daten, die geteilt werden müssen, an die gemeinsame direkte übergeordnete Komponente weiter und kommunizieren dann wie gewöhnliche übergeordnete und untergeordnete Komponenten miteinander. Zum Beispiel:

// Übergeordnete Komponente
exportiere Standardklasse Parent erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);

    dieser.Zustand = {
      Nachricht von A: '',
      Nachricht von B: ''
    }
  }

  beiNachricht(Nachricht von Kindern, von) {
    console.log(Nachricht von Kindern);

    dies.setState({
      [von == 'A' ? 'NachrichtVonA' : 'NachrichtVonB']: NachrichtVonKindern
    });
  }

  rendern() {
    const { Nachricht von A, Nachricht von B} = dieser.Zustand;
    zurückkehren (
      <div>
        <ChildrenA Nachricht={ Nachricht vonB } beiNachricht={ diese.beiNachricht.bind(diese) } />
        <ChildrenB Nachricht={ Nachricht vonA } beiNachricht={ diese.beiNachricht.bind(diese) } />
      </div>
    );
  }
}

//KinderA
exportiere Standardklasse ChildrenA erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
  }

  handleKlick() {
    this.props.onMessage('Nachricht von Unterkomponente A', 'A');
  }

  rendern() {
    const { Nachricht } = diese.props;
    zurückkehren (
      <div Klassenname="pa ba">
        <p>{ Nachricht }</p>
        <button onClick={this.handleClick.bind(this)}>KlickA</button>
      </div>
    );
  }
}

//KinderB
exportiere Standardklasse ChildrenB erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
  }

  handleKlick() {
    this.props.onMessage('Nachricht von untergeordneter Komponente B', 'B');
  }

  rendern() {
    const { Nachricht } = diese.props;
    zurückkehren (
      <div Klassenname="pa ba">
        <p>{ Nachricht }</p>
        <button onClick={this.handleClick.bind(this)}>KlickB</button>
      </div>
    );
  }
} 

Wenn auf KlickA geklickt wird, empfängt Unterkomponente B die Nachricht von Unterkomponente A und umgekehrt.

Die Komponentenkommunikation über Requisiten ist relativ einfach, hat aber auch ihre eigenen Nachteile. Wenn die Komponentenebene mehr als 3 Schichten umfasst, ist diese Methode nicht geeignet. Erstens ist die Übertragung auf tiefer Ebene einfach ein Albtraum für die Wartung. Sie müssen sich jede Schicht ansehen, um die Quelle und den Fluss der Daten zu kennen. Zweitens, wenn es nicht nur die Unterkomponenten A und B, sondern auch die Unterkomponente C gibt, löst die durch die Komponenten A und B verursachte Aktualisierung des Status der übergeordneten Komponente die Aktualisierung der Unterkomponente C aus. Tatsächlich empfängt die Unterkomponente C jedoch keine Daten, was leicht zu einer Verschwendung von Ressourcen führen kann.

// Übergeordnete Komponente render() {
    const { Nachricht von A, Nachricht von B} = dieser.Zustand;
    zurückkehren (
      <div>
        <ChildrenA Nachricht={ Nachricht vonB } beiNachricht={ diese.beiNachricht.bind(diese) } />
        <ChildrenB Nachricht={ Nachricht vonA } beiNachricht={ diese.beiNachricht.bind(diese) } />
        <KinderC />
      </div>
    );
  }

//KinderC
exportiere Standardklasse ChildrenC erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
  }

  KomponenteDidUpdate() {
    console.log('ChildrenC aktualisiert');
  }


  rendern() {
    zurückkehren (
      <div>KinderC</div>
    );
  }
}

Zurückziehen

Mischen

Die hier vorgestellte Extraktion bezieht sich hauptsächlich auf Mixin.

Unter der Annahme, dass mehrere Komponenten dieselbe getDefaultProps-Methode verwenden, können wir das folgende Mixin definieren:

var DefaultNameMixin = {
    getDefaultProps: Funktion () {
        gibt {name: "Tom"} zurück;
    }
};

Mixin entspricht einer Erweiterung einer Komponente. Sein Wesen ist eine Sammlung von Methoden. Komponenten, die dieses Mixin verwenden, können diese Methoden frei verwenden (genau wie in der Komponente definiert). Der Zweck der Verwendung von Mixin besteht darin, ähnliche Komponentencodes horizontal zu extrahieren.

Andere Konzepte, die Mixin ähnlich sind, sind: AOP, Plug-Ins usw.

In diesem Beispiel enthält DefaultNameMixin die Methode getDefaultProps. Neben der direkten Definition kann Mixin auch verschachtelt werden, d. h., Sie können beim Definieren eines Mixins ein anderes Mixin verwenden:

var DefaultCommonMixin = {
    mixins:[StandardnameMixin], //Mixin verwenden
    getDefaultProps: Funktion () {
        returniere {Essen: "Reis"};
    }
};

Im Beispiel ist DefaultNameMixin in der Definition von DefaultCommonMixin verschachtelt, sodass DefaultCommonMixin die in DefaultNameMixin definierte Methode getDefaultProps enthält. Derzeit gibt es in DefaultCommonMixin zwei Methoden. Wenn Sie Mixin verwenden, fügen Sie Mixin einfach dem Array hinzu, das dem Mixin-Attribut entspricht. Die Syntax für die Verwendung von Mixin lautet mixins:[Mixin1, Mixin2…].

Wenn Sie Mixin verwenden, fügen Sie Mixin einfach dem Array hinzu, das dem Mixin-Attribut entspricht. Die Syntax für die Verwendung von Mixin lautet mixins:[Mixin1, Mixin2…].

var Komponente = React.createClass({
    mixins:[DefaultCommonMixin], //Mixin verwenden
    rendern:Funktion(){
        gibt <h1>{this.props.name} zurück wie {this.props.food}</h1>;
    }
}); 

ReactDOM.render(
    <Komponente/>,
    document.getElementById("Beispiel")
);

Eine Komponente kann mehrere Mixins verwenden und Mixins können auch in mehreren Komponenten verwendet werden.

Achten Sie bei der Verwendung von Mixin darauf, dass Sie nicht die gleiche Eigenschaft und den gleichen Status an mehreren Stellen festlegen. Gleichzeitig wird eine Ausnahme ausgelöst, wenn dieselbe Methode in verschiedenen Mixins definiert ist oder dieselbe Methode in Mixin und Komponente enthalten ist. Diese Situation gilt jedoch nicht für Lebenszyklusmethoden wie componentDidMount (mit Ausnahme der Rendermethode, die auch eine Ausnahme auslöst, wenn sie mehrfach definiert ist).

Wenn dieselbe Lebenszyklusmethode an mehreren Stellen in einer Komponente definiert ist, lautet die Ausführungsreihenfolge dieser Methoden: Zuerst wird die Methode im Mixin ausgeführt (von links nach rechts entsprechend der Reihenfolge in den Mixins), dann wird die in der Komponente definierte Methode ausgeführt.

Vorteile von Mixin:

Code-Wiederverwendung: Gemeinsamen Code extrahieren, Entwicklungskosten senken und Entwicklungseffizienz verbessern

Plug and Play: Sie können viele vorhandene Mixins direkt verwenden, um Ihre eigenen Komponenten zu schreiben

Starke Anpassungsfähigkeit: Einmaliges Ändern des Codes wirkt sich auf mehrere Komponenten aus

Nachteile von Mixin:

Hoher Schreibaufwand: Mixin kann in verschiedenen Umgebungen verwendet werden. Die Kompatibilität mit mehreren Umgebungen erfordert mehr Logik und Code. Der Preis der Universalität ist eine erhöhte Komplexität.

Reduzierte Lesbarkeit des Codes: Der Vorteil von Komponenten besteht darin, dass sie Logik und Schnittstelle direkt kombinieren. Mixin zerstreut im Wesentlichen die Logik und ist schwieriger zu verstehen.

LinkedStateMixin von React

„streng verwenden“;  
  
// Objekt {value, requestChange} konstruieren, value ist der Anfangswert, requestChange ist eine Methode, die manuell aufgerufen werden muss // In diesem Modul ist value der Anfangswert von state[key], requestChange wird verwendet, um state[key] zu aktualisieren  
var ReactLink = erfordern('./ReactLink');  
  
// Nach dem Festlegen des Attributschlüssels eine Funktion zurückgeben, die Werte akzeptiert und intern die Methode component.setState aufruft, um state[key]=value zu aktualisieren.  
var ReactStateSetters = erfordern('./ReactStateSetters');  
  
/** 
 * Bietet eine bidirektionale Bindung für den unidirektionalen Datenfluss beim manuellen Aufrufen der setState-Methode in React. * Ruft die setState-Methode automatisch auf, nachdem der Wert mit linkState(key).requestChange(value) übergeben wurde, um den Status zu aktualisieren. 
 * 
 * Beispiel * var LinkedStateMixin = require('react-addons-linked-state-mixin'); 
 
 * var OhneLink = React.createClass({ 
 * Mixins: [LinkedStateMixin], 
 * getInitialState: Funktion() { 
 * return {message: 'Hallo!'}; 
 * }, 
 * rendern: Funktion() { 
 * var valueLink = this.linkState('Nachricht'); 
 * var handleChange = Funktion(e) { 
 * valueLink.requestChange(e.ziel.wert); 
 * }; 
 * return <input type="text" value={valueLink.value} bei Änderung={handleChange} />; 
 * } 
 * }); 
 */  
var LinkedStateMixin = {  
  // Die Methode ReactStateSetters.createStateKeySetter wird verwendet, um die Methode requestChange des von linkState(key) zurückgegebenen Objekts zu konstruieren // Nach der Übergabe des Wertes wird automatisch die Methode setState aufgerufen, um den Status zu aktualisieren  
  linkState: Funktion (Schlüssel) {  
    gib einen neuen ReactLink zurück (diesen.Zustand[Schlüssel], ReactStateSetters.createStateKeySetter(diesen, Schlüssel));  
  }  
};  
  
module.exports = LinkedStateMixin;

Verwenden Sie das obige Mixin:

Importieren Sie LinkedStateMixin aus „react-addons-linked-state-mixin“.

Mixins: [React.addons.LinkedStateMixin],

LinkedStateMixin ist nur ein einfacher Wrapper und eine Konvention für onChange/setState() Muster. Es ändert nicht grundlegend, wie Daten in Ihrer React Anwendung fließen. Mit anderen Worten: LinkedStateMixin ist im Wesentlichen ein Einwegfluss. Es übergibt Datenänderungen einfach über onChange an React und ruft dann automatisch setState auf, um die internen Daten zu aktualisieren.

Anwendungsbeispiel:

var WithLink = React.createClass({
  Mixins: [LinkedStateMixin],
  getInitialState: Funktion() {
    return {message: 'Hallo!'};
  },
  rendern: Funktion() {
    gibt <input type="text" valueLink={this.linkState('message')} /> zurück;
  }
});

LinkedStateMixin fügt Ihren React Komponenten eine Methode namens linkState() hinzu. linkState() gibt ein valueLink -Objekt zurück, das den aktuellen Wert React state und eine Rückruffunktion zum Ändern enthält.

Das valueLink Objekt kann als props im Baum nach oben oder unten übergeben werden, daher ist es sehr einfach, eine bidirektionale Bindung auf Komponenten- und Statusebene herzustellen.

Beachten:

Für value Wertattribut checkbox gilt ein spezielles Verhalten. Wenn checkbox ausgewählt ist (standardmäßig on ), wird value Wert des Wertattributs gesendet, wenn das Formular übermittelt wird. Wenn checkbox aktiviert oder deaktiviert ist, wird value nicht aktualisiert. Für checkbox sollten Sie checkLink anstelle von valueLink verwenden.

<checkbox Typ="checkbox" checkedLink={this.linkState('booleanValue')} />

Referenz:

1. http://schifred.iteye.com/blog/2361478

2. http://blog.csdn.net/qq_18661257/article/details/68951561

Dies ist das Ende dieses Artikels über die kollaborative Nutzung von React-Komponenten. Weitere relevante Inhalte zur Zusammenarbeit mit React-Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!