Advertisement
  1. Code
  2. React

Eine sanfte Einführung in HOC in React: Lernen Sie anhand eines Beispiels

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called A Gentle Introduction to Higher Order Components in React.
A Gentle Introduction to Higher-Order Components in React

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Dies ist der zweite Teil der Reihe über Komponenten höherer Ordnung (HOCs). Heute werde ich verschiedene Komponentenmuster höherer Ordnung behandeln, die nützlich und implementierbar sind. Mit HOCs können Sie redundanten Code in eine Schicht höherer Ordnung abstrahieren. Wie bei allen anderen Mustern wird es jedoch einige Zeit dauern, bis Sie sich an HOCs gewöhnt haben. Dieses Tutorial hilft Ihnen, diese Lücke zu schließen.

Voraussetzung

Ich empfehle Ihnen, dem ersten Teil der Serie zu folgen, falls Sie dies noch nicht getan haben. Im ersten Teil haben wir über die Grundlagen der HOC-Syntax und alles gesprochen, was Sie benötigen, um mit Komponenten höherer Ordnung zu beginnen.

In diesem Tutorial bauen wir auf den Konzepten auf, die wir bereits in Teil 1 behandelt haben. Ich habe mehrere Beispiel-HOCs erstellt, die praktisch nützlich sind, und Sie können diese Ideen in Ihr Projekt integrieren. In jedem Abschnitt finden Sie Codefragmente. Am Ende des Tutorials finden Sie eine funktionierende Demo aller in diesem Tutorial beschriebenen praktischen HOCs.

Sie können den Code auch aus meinem GitHub-Repo herausgeben.

Praktische Komponenten höherer Ordnung

Da HOCs eine neue abstrakte Containerkomponente erstellen, finden Sie hier eine Liste der Dinge, die Sie normalerweise damit tun können:

  • ein Element oder eine Komponente um eine Komponente wickeln.
  • Zustandsabstraktion.
  • Requisiten manipulieren, z. B. Hinzufügen neuer Requisiten und Ändern oder Entfernen vorhandener Requisiten.
  • Requisitenvalidierung erstellen.
  • refs verwenden, um auf Instanzmethoden zuzugreifen.

Lassen Sie uns eins nach dem anderen darüber sprechen.

HOC als Wrapper-Komponente

Wenn Sie sich erinnern, hat das letzte Beispiel in meinem vorherigen Tutorial gezeigt, wie ein HOC die InputComponent mit anderen Komponenten und Elementen umschließt. Dies ist nützlich für das Styling und die Wiederverwendung von Logik, wo immer dies möglich ist. Mit dieser Technik können Sie beispielsweise einen wiederverwendbaren Ladeindikator oder einen animierten Übergangseffekt erstellen, der durch bestimmte Ereignisse ausgelöst werden soll.

Ein Ladeindikator HOC

Das erste Beispiel ist eine mit HOC erstellte Ladeanzeige. Es prüft, ob eine bestimmte Requisite leer ist, und die Ladeanzeige wird angezeigt, bis die Daten abgerufen und zurückgegeben werden.

LoadIndicator/LoadIndicatorHOC.jsx

LoadIndicator/LoadIndicatorDemo.jsx

Dies ist auch das erste Mal, dass wir den zweiten Parameter als Eingabe für das HOC verwenden. Der zweite Parameter, den ich 'loadingProp' genannt habe, wird hier verwendet, um dem HOC mitzuteilen, dass es prüfen muss, ob diese bestimmte Requisite abgerufen und verfügbar ist. Im Beispiel prüft die Funktion isEmpty, ob der loadingProp leer ist, und es wird ein Indikator angezeigt, bis die Requisiten aktualisiert sind.

Sie haben zwei Möglichkeiten, Daten an das HOC weiterzugeben, entweder als Requisite (wie üblich) oder als Parameter an das HOC.

So wähle ich zwischen den beiden. Wenn die Daten keinen Bereich haben, der über den des HOC hinausgeht, und wenn die Daten statisch sind, übergeben Sie sie als Parameter. Wenn die Requisiten für das HOC und auch für die verpackte Komponente relevant sind, übergeben Sie sie wie gewohnt. Ich habe mehr darüber in meinem dritten Tutorial behandelt.

Zustandsabstraktion und Manipulation von Requisiten

Zustandsabstraktion bedeutet, den Zustand auf eine Komponente höherer Ordnung zu verallgemeinern. Die gesamte Statusverwaltung der WrappedComponent wird von der Komponente höherer Ordnung übernommen. Das HOC fügt einen neuen Status hinzu, und dann wird der Status als Requisiten an die WrappedComponent weitergegeben.

Ein generischer Container höherer Ordnung

Wenn Sie bemerkt haben, hatte das Loader-Beispiel oben eine Komponente, die eine GET-Anforderung mithilfe der Abruf-API stellte. Nach dem Abrufen der Daten wurden diese im Status gespeichert. Das Erstellen einer API-Anforderung beim Mounten einer Komponente ist ein häufiges Szenario, und wir könnten ein HOC erstellen, das perfekt in diese Rolle passt.

GenericContainer/GenericContainerHOC.jsx

GenericContainer/GenericContainerDemo.jsx

Der Staat wurde verallgemeinert und der Wert des Staates wird als Requisiten weitergegeben. Wir haben die Komponente auch konfigurierbar gemacht.

Es akzeptiert ein Konfigurationsobjekt als Eingabe, das weitere Informationen zur API-URL, zur Methode und zum Namen des Statusschlüssels enthält, in dem das Ergebnis gespeichert ist. Die in componentWillMount() verwendete Logik demonstriert die Verwendung eines dynamischen Schlüsselnamens mit this.setState.

Ein Formular höherer Ordnung

Hier ist ein weiteres Beispiel, das die Zustandsabstraktion verwendet, um eine nützliche Formularkomponente höherer Ordnung zu erstellen.

CustomForm/CustomFormDemo.jsx

CustomForm/CustomFormHOC.jsx

Das Beispiel zeigt, wie die Zustandsabstraktion zusammen mit einer Präsentationskomponente verwendet werden kann, um die Formularerstellung zu vereinfachen. Hier ist das Formular eine Präsentationskomponente und eine Eingabe in das HOC. Der Anfangszustand des Formulars und der Name der Statuselemente werden ebenfalls als Parameter übergeben.

Beachten Sie jedoch, dass bei mehreren Requisiten mit demselben Namen die Reihenfolge wichtig ist und die letzte Deklaration einer Requisite immer gewinnt. Wenn in diesem Fall eine andere Komponente eine Requisite mit dem Namen contact oder contactList drückt, führt dies zu einem Namenskonflikt. Sie sollten Ihre HOC-Requisiten entweder mit einem Namespace versehen, damit sie nicht mit den vorhandenen Requisiten in Konflikt stehen, oder sie so bestellen, dass die Requisiten mit der höchsten Priorität zuerst deklariert werden. Dies wird im dritten Tutorial ausführlich behandelt.

Prop Manipulation mit HOC

Bei der Manipulation von Requisiten werden neue Requisiten hinzugefügt, vorhandene Requisiten geändert oder vollständig ignoriert. Im obigen CustomForm-Beispiel hat das HOC einige neue Requisiten weitergegeben.

Ebenso können Sie entscheiden, Requisiten vollständig zu ignorieren. Das folgende Beispiel zeigt dieses Szenario.

Mit dieser Technik können Sie auch einige Validierungs-/Filter-Requisiten durchführen. Die Komponente höherer Ordnung entscheidet, ob eine untergeordnete Komponente bestimmte Requisiten erhalten oder den Benutzer zu einer anderen Komponente weiterleiten soll, wenn bestimmte Bedingungen nicht erfüllt sind.

Eine Komponente höherer Ordnung zum Schutz von Routen

Hier ist ein Beispiel für den Schutz von Routen durch Umschließen der relevanten Komponente mit einer withAuth-Komponente höherer Ordnung.

ProtectedRoutes/ProtectedRoutesHOC.jsx

ProtectedRoutes/ProtectedRoutesDemo.jsx

withAuth prüft, ob der Benutzer authentifiziert ist, und leitet den Benutzer, falls nicht, zu /login um. Wir haben withRouter verwendet, eine React-Router-Entität. Interessanterweise ist withRouter auch eine Komponente höherer Ordnung, mit der die aktualisierten Requisiten für Übereinstimmung, Speicherort und Verlauf bei jedem Rendern an die umschlossene Komponente übergeben werden.

Beispielsweise wird das Verlaufsobjekt als Requisiten verschoben, sodass wir wie folgt auf diese Instanz des Objekts zugreifen können:

Weitere Informationen zu withRouter finden Sie in der offiziellen Dokumentation zum React-Router.

Zugriff auf die Instanz über Refs

React verfügt über ein spezielles Attribut, das Sie an eine Komponente oder ein Element anhängen können. Das ref-Attribut (ref steht für Referenz) kann eine Rückruffunktion sein, die an eine Komponentendeklaration angehängt ist.

Der Rückruf wird aufgerufen, nachdem die Komponente bereitgestellt wurde, und Sie erhalten eine Instanz der referenzierten Komponente als Parameter des Rückrufs. Wenn Sie sich nicht sicher sind, wie Refs funktionieren, wird in der offiziellen Dokumentation zu Refs und im DOM ausführlich darauf eingegangen.

In unserem HOC besteht der Vorteil der Verwendung von ref darin, dass Sie eine Instanz der WrappedComponent abrufen und ihre Methoden von der Komponente höherer Ordnung aufrufen können. Dies ist nicht Teil des typischen React-Datenflusses, da React die Kommunikation über Requisiten bevorzugt. Es gibt jedoch viele Stellen, an denen Sie diesen Ansatz möglicherweise als nützlich erachten.

RefsDemo/RefsHOC.jsx

RefsDemo/RefsDemo.jsx

Das ref callback-Attribut speichert einen Verweis auf die WrappedComponent.

this.instance hat einen Verweis auf die WrappedComponent. Sie können jetzt die Methode der Instanz aufrufen, um Daten zwischen Komponenten zu kommunizieren. Verwenden Sie dies jedoch sparsam und nur bei Bedarf.

Letzte Demo

Ich habe alle Beispiele in diesem Tutorial in eine einzige Demo integriert, die Sie unten verwenden können.

Zusammenfassung

Dies ist das Ende des zweiten Tutorials zu Komponenten höherer Ordnung. Wir haben heute viel über verschiedene HOC-Muster und -Techniken gelernt und praktische Beispiele durchgesehen, die zeigten, wie wir sie in unseren Projekten verwenden können.

Im dritten Teil des Tutorials können Sie sich auf einige bewährte Methoden und HOC-Alternativen freuen, die Sie kennen sollten. Bleib bis dahin dran. Teilen Sie Ihre Gedanken im Kommentarfeld mit.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.