Was bedeutet reagierende Komponente höherer Ordnung?

In React ist eine Komponente höherer Ordnung eine Funktion, bei der es sich um eine fortschrittliche Technologie zur Wiederverwendung von Komponentenlogik handelt. Eine Komponente höherer Ordnung wird verwendet, um eine Komponente als Parameter zu akzeptieren und eine neue Komponente zurückzugeben An ihn übergebene Komponenten können als Unterkomponenten Eigenschaften-Proxy und umgekehrte Vererbung verwenden, um Komponenten höherer Ordnung zu implementieren.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Was bedeutet reagierende Komponente höherer Ordnung?

Eine Komponente höherer Ordnung ist eine Funktion (keine Komponente), die eine Komponente als Parameter akzeptiert und eine neue Komponente zurückgibt. Diese neue Komponente verwendet die Komponente, die Sie als untergeordnete Komponente übergeben – Zitat aus dem React.js-Buch

Komponenten höherer Ordnung sind eine fortschrittliche Technologie in React zur Wiederverwendung von Komponentenlogik. HOCs selbst sind nicht Teil der React-API. Sie sind ein Muster, das sich aus der Natur der Konzeption von React ergibt.

Bei der Verwendung des React-Redux-Frameworks in unserem Projekt gibt es ein Connect-Konzept. Hier handelt es sich tatsächlich um eine Komponente höherer Ordnung. Es enthält auch Konzepte, die denen von withRouter in React-Router-Dom ähneln Schauspiel. Komponenten höherer Ordnung betreiben Requisiten durch umschlossene React-Komponenten

umgekehrte Vererbung. Komponenten höherer Ordnung erben von den verpackten React-Komponenten

Als Nächstes erklären wir diese beiden Methoden separat.

Attribut-Proxy

• Attribut-Proxy ist die Implementierungsmethode allgemeiner höherwertiger Komponenten in unserer Reaktion. Lassen Sie es uns anhand eines Beispiels veranschaulichen:

function hello (){
    console.log("hello i  love react ")
}
function hoc(fn){
    return ()=>{
          console.log("first");
          fn();
          console.log("end");
    }
}
hello = hoc(hello);
hello();

• Der wichtigste Teil von hier ist, dass die Render-Methode die übergebene Reaktion zurückgibt WrappedComponent-Komponenten. Auf diese Weise können wir Requisiten durch Komponenten höherer Ordnung weiterleiten. Diese Methode wird als Attribut-Proxy bezeichnet.
  Natürlich wird es für uns sehr einfach, die höherwertige Komponente MyContainer zu verwenden:

import React,{Component} from 'react';
const MyContainer = (WraooedComponent) => 
    class extends Component {
        render(){
            return <WrappedComponent {...this.props} />
        }
    }

Auf diese Weise kann die Komponente Schicht für Schicht als Parameter aufgerufen werden, und die ursprüngliche Komponente wird durch die höherwertige Komponente modifiziert. Bestellkomponente. So einfach ist es, die Kapselung einer einzelnen Komponente beizubehalten und gleichzeitig die Benutzerfreundlichkeit beizubehalten. Natürlich können wir zum Konvertieren auch Decorator verwenden.

Beim Erstellen von Komponenten höherer Ordnung mithilfe von Eigenschafts-Proxys unterscheidet sich die Reihenfolge der Aufrufe von Mixins. Der obige Prozess der Ausführung des Lebenszyklus ähnelt einem Stapelaufruf:

import React,{Component} from 'react';
class MyComponent extends Component{
    //...
}
export default MyContainer(MyComponent);

Umgekehrte Vererbung

Eine andere Möglichkeit, Komponenten höherer Ordnung zu erstellen, ist die sogenannte umgekehrte Vererbung, die im wahrsten Sinne des Wortes mit der Vererbung zusammenhängen muss. Schauen wir uns auch eine einfache Implementierung an.

didmount ->HOC didmount ->(HOCs didmount)->(HOCs will unmount)->HOC will unmount -> unmount

Der Code oben. Die von Komponenten höherer Ordnung zurückgegebenen Komponenten erben von WrappedComponent. Da WrappedComponent passiv vererbt wird, werden alle Aufrufe umgekehrt, was auch der Ursprung dieser Methode ist.

Diese Methode ist nicht dasselbe wie der Attribut-Proxy. Es wird durch die Vererbung von WrappedComponent implementiert, und Methoden können sequentiell über super aufgerufen werden. Weil es auf dem Vererbungsmechanismus beruht. Die Aufrufreihenfolge von HOC ist dieselbe wie die der Warteschlange.

const MyContainer = (WrappedComponent)=>{
    class extends WrappedComponent {
        render(){
            return super.render();
        }
    }
}

Bei der umgekehrten Vererbungsmethode können Komponenten höherer Ordnung mithilfe von WrappedComponent referenziert werden, was bedeutet, dass sie den Status und die Eigenschaften von WrappedComponent verwenden können. Lebenszyklus und Rendermethode. Es garantiert jedoch nicht, dass der vollständige Unterkomponentenbaum analysiert wird. Es verfügt über zwei Hauptmerkmale, die wir im Folgenden besprechen werden.

Rendering-Hijacking

Rendering-Hijacking bedeutet, dass Komponenten höherer Ordnung den Rendering-Prozess von WrappedComponent steuern und verschiedene Ergebnisse rendern können. In diesem Prozess können wir Requisiten in den Ausgabeergebnissen jedes React-Elements lesen, hinzufügen, ändern und löschen oder den React-Elementbaum oder die bedingte Anzeige lesen oder ändern. Oder umschließen Sie den Elementbaum mit Stilen

Kontrollzustand

Komponenten höherer Ordnung können den Zustand in der WrappedComponent-Instanz lesen, ändern oder löschen und bei Bedarf einen Zustand hinzufügen.

Komponentenbenennung

Beim Umschließen einer Komponente höherer Ordnung verlieren wir den Anzeigenamen der ursprünglichen WrappedComponent, und der Komponentenname ist ein wichtiges Attribut, das unsere Entwicklung und das Debuggen erleichtert.

Komponentenparameter

Manchmal müssen wir beim Aufrufen von Komponenten höherer Ordnung einige Parameter übergeben, was auf sehr einfache Weise erreicht werden kann.

didmount -> HOC didmount ->(HOCs didmount) -> will unmount ->HOC will unmount ->(HOCs will unmount)

Wenn Sie es verwenden, können Sie schreiben:

import React from 'react'
function HOCFactoryFactory(...params){
    return function HOCFactory(WrappedComponent){
        return class HOC extends Component{
            render(){
                return <WrappedComponent {...this.props} />
            }
        }
    }
}

Dabei werden auch die Eigenschaften der funktionalen Programmierung genutzt. Es ist ersichtlich, dass im Prozess der React-Abstraktion sein Schatten überall zu sehen ist. Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonWas bedeutet reagierende Komponente höherer Ordnung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!