Detaillierte Einführung in Komponenten höherer Ordnung in React

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 und wie sie verwendet werden. Jetzt teilen wir sie mit Ihnen und geben ihnen eine Referenz .

Definition von Komponenten höherer Ordnung

HoC gehört nicht zur API von React, sondern ist im Wesentlichen eine Funktion, die eine oder mehrere React-Komponenten akzeptiert Geben Sie als Parameter 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

Wrapping-Methode

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

Im obigen Code wird WrappendComponent als Parameter akzeptiert Was wird HoC sein? Für gewöhnliche verpackte Komponenten wickeln Sie ein p in render ein und geben ihm das className-Attribut. 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. Außerdem können Sie WrappendComponent mit anderen Elementen umschließen, um Kapselungsstile zu implementieren, Layout hinzuzufügen oder andere Vorgänge auszufü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 der Benutzer in den eingehenden Requisiten vorhanden ist, wird die WrappedComponent-Komponente normal angezeigt. Andernfalls wird die LoginView-Komponente angezeigt, damit sich der Benutzer anmelden kann. 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 Listen- und Ladekomponenten, um das neue Komponente hinzuzufügen.

Vererbungsmodus

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 keine Komponenten höherer Ordnung in der Renderfunktion

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

Der Diff-Algorithmus in React vergleicht die alten und neuen Unter- Objektbäume, um zu bestimmen, ob der vorhandene Unterobjektbaum aktualisiert oder der vorhandene Unterobjektbaum gelöscht und erneut bereitgestellt wird.

Statische Methoden müssen kopiert werden

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

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

Das Refs-Attribut kann nicht übergeben werden

Die im HoC angegebene Referenz wird nicht an die Sub- übergeben. Komponente, die mithilfe von Requisiten über die Rückruffunktion übergeben werden muss.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie eine kreisförmige Nodelist-Dom-Liste mit JS

So erreichen Sie eine Änderung der Textfarbe nach dem Klicken in Vue

So legen Sie die Hintergrundfarbe für eine separate Seite in Vue-cli fest

Aktualisieren und Tab-Wechsel in Vue

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Komponenten höherer Ordnung in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!