Teilen Sie Beispiele für den Einstieg mit React-Komponenten höherer Ordnung

In diesem Artikel wird hauptsächlich die Einführung in React-Komponenten höherer Ordnung vorgestellt. In diesem Artikel stellen wir detailliert vor, was Komponenten höherer Ordnung sind Ich werde es mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Definition von Komponenten höherer Ordnung

HoC ist keine API von React, sondern ein Implementierungsmuster, das im Wesentlichen eine Funktion ist akzeptiert Eine oder mehrere React-Komponenten werden als Parameter verwendet und geben eine brandneue React-Komponente zurück, anstatt die vorhandene Komponente zu ändern. Solche Komponenten werden als Komponenten höherer Ordnung bezeichnet. Wenn während des Entwicklungsprozesses einige Funktionen in mehreren Komponentenklassen wiederverwendet werden müssen, kann ein Hoc erstellt werden.

Grundlegende Verwendung

Verpackungsmethode

const HoC = (WrappendComponent) => {
 const WrappingComponent = (props) => (
  <p className="container">
   <WrappendComponent {...props} />
  </p>
 );
 return WrappingComponent;
};

Oben Im Code wird WrappingComponent als Parameter akzeptiert, der von HoC verpackt werden soll, und ihm das Attribut className zuweisen. Die resultierende WrappingComponent und die übergebene WrappendComponent sind zwei völlig unterschiedliche Komponenten.

In WrappingComponent können Sie die an WrappendComponent übergebenen Requisiten lesen, hinzufügen, bearbeiten und löschen. Sie können WrappendComponent auch mit anderen Elementen umschließen, um Kapselungsstile zu implementieren, Layout hinzuzufügen oder andere Vorgänge durchzuführen.

Kombinationsmethode

const HoC = (WrappedComponent, LoginView) => {
 const WrappingComponent = () => {
  const {user} = this.props; 
  if (user) {
   return <WrappedComponent {...this.props} />
  } else {
   return <LoginView {...this.props} />
  }
 };
 return WrappingComponent;
};

Der obige Code enthält zwei Komponenten, WrappedComponent und LoginView, wenn sie in Requisiten übergeben werden Wenn ein Benutzer vorhanden ist, wird die WrappedComponent-Komponente normal angezeigt, andernfalls wird die LoginView-Komponente angezeigt, um dem Benutzer die Anmeldung zu ermöglichen. Die von HoC übergebenen Parameter können mehrere Komponenten übergeben, um das Verhalten der neuen Komponente anzupassen. Beispielsweise wird die Hauptseite angezeigt, wenn der Benutzer angemeldet ist, und die Anmeldeschnittstelle wird angezeigt. Übergeben Sie beim Rendern der Liste die Komponenten „Liste“ und „Laden“, um das neue Verhalten der Komponente hinzuzufügen.

Vererbungsmethode

const HoC = (WrappendComponent) => {
 class WrappingComponent extends WrappendComponent {
  render() (
   const {user, ...otherProps} = this.props;
   this.props = otherProps;
   return super.render();
  }
 }
 return WrappingComponent;
};

WrappingComponent ist eine neue Komponente, die von WrappendComponent erbt und die Funktionen und Eigenschaften der übergeordneten Komponente teilt . Sie können super.render() oder super.componentWillUpdate() verwenden, um die Lebenszyklusfunktion des übergeordneten Elements aufzurufen. Dies koppelt jedoch die beiden Komponenten miteinander und verringert die Wiederverwendbarkeit der Komponente.

Die Verpackung von Komponenten in React basiert auf der Idee der kleinsten verfügbaren Einheit. Im Idealfall macht eine Komponente nur eine Sache, was dem Prinzip der Einzelverantwortung in OOP entspricht. Wenn Sie die Funktionalität einer Komponente erweitern müssen, erweitern Sie die Komponente, indem Sie sie kombinieren oder Code hinzufügen, anstatt den ursprünglichen Code zu ändern.

Hinweise

Verwenden Sie in der Renderfunktion keine Komponenten höherer Ordnung

render() {
 // 每一次render函数调用都会创建一个新的EnhancedComponent实例
 // EnhancedComponent1 !== EnhancedComponent2
 const EnhancedComponent = enhance(MyComponent);
 // 每一次都会使子对象树完全被卸载或移除
 return <EnhancedComponent />;
}

Der Diff-Algorithmus in React vergleicht die alten und neuen Unterobjektbäume, um zu bestimmen, ob der vorhandene Unterobjektbaum aktualisiert oder der vorhandene Unterobjektbaum verworfen und erneut bereitgestellt werden soll.

Statische Methoden müssen kopiert werden

// 定义静态方法
WrappedComponent.staticMethod = function() {/*...*/}
// 使用高阶组件
const EnhancedComponent = enhance(WrappedComponent);

// 增强型组件没有静态方法
typeof EnhancedComponent.staticMethod === 'undefined' // true

Refs-Attribut kann nicht übergeben werden

in HoC-Referenz angegeben wird nicht an die untergeordnete Komponente übergeben und muss mithilfe von Requisiten über die Rückruffunktion übergeben werden.

Verwandte Empfehlungen:

Verwendung von Store zur Optimierung der Kommunikation zwischen React-Komponenten

Beispiele für die Kommunikation zwischen React-Komponenten Tutorial

Vergleich von HTML-Tags und React-Komponenten_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für den Einstieg mit React-Komponenten höherer Ordnung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!