Architekt komplexer UI-Komponenten in React

Foto von Ash Edmonds auf Unsplash

"React" ist nur der "V" -Teil von MVC und hat daher keine Meinung dazu, wie Sie Ihre Benutzeroberfläche gestalten.

Wenn nicht die richtige Aufmerksamkeit auf sich gezogen wird, kann eine einigermaßen große Reaktions-App schnell einem Durcheinander zustandsbehafteter Komponenten erliegen, von denen jede ihren eigenen Verstand hat und schnell die Reaktionsmethode verletzt.

Es gibt mehrere wichtige Punkte, die Sie beim Bauen mit React beachten müssen:

  1. Zustandslose Komponenten
  2. Komposition
  3. Zentrales State Management mit Redux

Zustandslose Komponenten

Ihre Komponenten müssen so zustandslos wie möglich sein. Nach wie vor sollten Ihre Komponenten nicht in ihrem eigenen Status ausgeführt werden, sondern von übergebenen Requisiten abhängen.

Dies macht Ihre Komponenten vorhersehbar und leicht testbar, da sie sich wie reine Funktionen verhalten. Daten einlesen und JSX ausspucken.

Komposition

Dies ist ein zweiteiliger Ansatz:

  1. Zerlegen einer komplexen Komponente in kleinere, handhabbare Teile
  2. Erstellen einer komplexen Benutzeroberfläche aus allgemeinen benutzerdefinierten Komponenten

Zerlegen einer komplexen Komponente in kleinere, handhabbare Teile

Angenommen, Sie haben eine Komponente wie diese:

Dies ist aus der Vogelperspektive nicht ganz klar. Zu viele Divs mit Klassennamen.

Wenn wir eine andere Chat-Sprechblase für Systemnachrichten mit einer ähnlichen Fußzeile rendern müssen, können wir dies auch nicht. Ist alles eng gekoppelt.

Und um das Ganze abzurunden, verwenden wir die obige Komponente wie folgt:

Bei Aktualisierungen des Chat-Bubble-Headers müssen wir mit der gesamten Komponentendatei herumspielen.

Ohne unsere Nutzung zu aktualisieren, können wir ChatBubble einfach wie folgt aufteilen:

Die Kopf- und Fußzeile kann in einer eigenen Datei gespeichert und hier importiert werden. Ein kurzer Blick auf ChatBubble zeigt jedoch, dass die Änderung jetzt viel besser lesbar ist.

Wir wissen, dass es einen Kopf- und Fußzeilenteil gibt. So weit, ist es gut.

Erstellen einer komplexen Benutzeroberfläche aus allgemeinen benutzerdefinierten Komponenten

Angenommen, wir haben zwei Arten von Nachrichten: eine, die Benutzer sich gegenseitig als Text senden. Andere, die eine Galerie von Bildern enthält. Alle anderen Details wie Kopf- und Fußzeile bleiben gleich.

Bei unserer derzeitigen Implementierung ist dies erheblich schwierig.

Wir könnten eine komplexe Logik schreiben, um zu verstehen, ob messageContent Bilder enthält, und sie aufteilen und alle möglichen Arten von dunkler Magie anwenden, um sie zum Laufen zu bringen.

Oder vielleicht könnten wir so etwas machen:

Überprüfen Sie den Körperteil. Wir haben {props.children} gemacht. Dies bedeutet, dass hier ein beliebiges untergeordnetes Element der Komponente übergeben wird.

Und am Anrufstandort machen Sie Folgendes:

Jetzt können wir Chatnachrichten nach Belieben rendern.

Morgen, wenn es eine dritte Art von Chatnachricht von einem Bot gibt, während Kopf- und Fußzeile gleich bleiben, aktualisieren wir einfach die Art und Weise, wie der Body-Inhalt von der Komponente gerendert wird, die ChatBubble verwendet.

Code wiederverwendet :)

Zentrales State Management mit Redux

Redux macht unseren Anwendungsstatus vorhersehbar, indem es an einem zentralen Ort / Speicherort aufbewahrt wird.

Die einzige Möglichkeit, den Status zu aktualisieren, besteht darin, Aktionen im folgenden Format auszuführen:

{
    Typ: Zeichenfolge,
    Nutzlast: Beliebig
}

Beispiel:

{
    Typ: "SET_USER_DETAILS",
    Nutzlast: {
        Benutzer: {
            _id: 1,
            Name: "John Doe"
        }
    }
}

Diese Aktionen werden an reine Funktionen übergeben, die Reduzierer genannt werden, die die Aktion verbrauchen und eine neue Version des Status zurückgeben. Dies bleibt dann im Speicher erhalten, und alle Funktionen, die diesen Teil des Statusbaums abonnieren, werden benachrichtigt.

Beispiel UsersReducer.js

Diese Daten können von der Benutzeroberfläche folgendermaßen verarbeitet werden:

Bei jeder Änderung des Speicherwerts erhält die Benutzerkomponente Aktualisierungen.

Erfahren Sie mehr über Redux in diesem Egghead-Kurs von Dan Abramov.

Danke fürs Lesen.

Drücke * klatsch *, wenn du denkst, dass es sich gelohnt hat :)

Finde mich auf LinkedIn oder kehre bei Kommentaren zu mir zurück.

Stellen Sie die besten ReactJs Frontend-Entwickler auf Prolanceer.com ein

Prolanceer.com ist eine kostengünstige, vorgeprüfte Marktplatzplattform, mit der unabhängige Software-Experten auf freiberuflicher oder vertraglicher Basis eingestellt werden können