React-Denken

React kann verändern, wie du über die Designs nachdenkst, die du betrachtest, und die Apps, die du baust. Wenn du eine Benutzeroberfläche mit React erstellst, zerlegst du sie zunächst in Teile, dieKomponentengenannt werden. Dann beschreibst du die verschiedenen visuellen Zustände für jede deiner Komponenten. Schließlich verbindest du deine Komponenten miteinander, sodass die Daten durch sie fließen. In diesem Tutorial führen wir dich durch den Denkprozess beim Erstellen einer durchsuchbaren Produktdatentabelle mit React.

Beginne mit dem Mockup

Stell dir vor, du hast bereits eine JSON-API und ein Mockup von einem Designer.

Die JSON-API gibt einige Daten zurück, die so aussehen:

Das Mockup sieht so aus:

Um eine Benutzeroberfläche in React zu implementieren, folgst du normalerweise denselben fünf Schritten.

Schritt 1: Zerlege die Benutzeroberfläche in eine Komponentenhierarchie

Beginne damit, um jede Komponente und Unterkomponente im Mockup Kästchen zu zeichnen und ihnen Namen zu geben. Wenn du mit einem Designer zusammenarbeitest, hat dieser diese Komponenten möglicherweise bereits in seinem Designtool benannt. Frag ihn!

Je nach deinem Hintergrund kannst du dir auf verschiedene Weisen vorstellen, ein Design in Komponenten aufzuteilen:

• Programmierung– verwende dieselben Techniken, um zu entscheiden, ob du eine neue Funktion oder ein neues Objekt erstellen solltest. Eine solche Technik ist dasTrennen von Zuständigkeiten, das heißt, eine Komponente sollte idealerweise nur eine Sache betreffen. Wenn sie wächst, sollte sie in kleinere Unterkomponenten zerlegt werden.
• CSS– überlege, wofür du Klassenselektoren erstellen würdest. (Komponenten sind jedoch etwas weniger granular.)
• Design– überlege, wie du die Ebenen des Designs organisieren würdest.

Wenn dein JSON gut strukturiert ist, wirst du oft feststellen, dass es natürlich auf die Komponentenstruktur deiner Benutzeroberfläche abgebildet werden kann. Das liegt daran, dass Benutzeroberfläche und Datenmodelle oft dieselbe Informationsarchitektur haben – also dieselbe Form. Teile deine Benutzeroberfläche in Komponenten auf, wobei jede Komponente einem Teil deines Datenmodells entspricht.

Auf diesem Bildschirm gibt es fünf Komponenten:

1. FilterableProductTable(grau) enthält die gesamte App.
2. SearchBar(blau) empfängt die Benutzereingabe.
3. ProductTable(lila) zeigt die Liste an und filtert sie gemäß der Benutzereingabe.
4. ProductCategoryRow(grün) zeigt eine Überschrift für jede Kategorie an.
5. ProductRow(gelb) zeigt eine Zeile für jedes Produkt an.

Wenn du dirProductTable(lila) ansiehst, wirst du feststellen, dass der Tabellenkopf (der die Beschriftungen „Name“ und „Preis“ enthält) keine eigene Komponente ist. Das ist eine Frage der Präferenz, und du könntest beides tun. In diesem Beispiel ist er Teil vonProductTable, weil er innerhalb der Liste vonProductTableerscheint. Wenn dieser Kopf jedoch komplexer wird (z. B. wenn du Sortierung hinzufügst), kannst du ihn in eine eigeneProductTableHeader-Komponente verschieben.

Nachdem du die Komponenten im Mockup identifiziert hast, ordne sie in eine Hierarchie an. Komponenten, die im Mockup innerhalb einer anderen Komponente erscheinen, sollten in der Hierarchie als Kind erscheinen:

• FilterableProductTable
  • SearchBar
  • ProductTable
    • ProductCategoryRow
    • ProductRow

Schritt 2: Erstelle eine statische Version in React

Nachdem du deine Komponentenhierarchie hast, ist es an der Zeit, deine App zu implementieren. Der einfachste Ansatz ist, eine Version zu erstellen, die die Benutzeroberfläche aus deinem Datenmodell rendert, ohne zunächst Interaktivität hinzuzufügen. Oft ist es einfacher, zuerst die statische Version zu bauen und später Interaktivität hinzuzufügen. Das Erstellen einer statischen Version erfordert viel Tippen und kein Nachdenken, aber das Hinzufügen von Interaktivität erfordert viel Nachdenken und nicht viel Tippen.

Um eine statische Version deiner App zu erstellen, die dein Datenmodell rendert, solltest duKomponentenerstellen, die andere Komponenten wiederverwenden und Daten überPropsübergeben. Props sind eine Möglichkeit, Daten von Eltern- zu Kindkomponenten zu übergeben. (Wenn du mit dem Konzept vonStatevertraut bist, verwende für diese statische Version überhaupt keinen State. State ist nur für Interaktivität reserviert, also für Daten, die sich im Laufe der Zeit ändern. Da dies eine statische Version der App ist, brauchst du ihn nicht.)

Du kannst entweder „von oben nach unten“ vorgehen, indem du mit dem Erstellen der Komponenten höher in der Hierarchie beginnst (wieFilterableProductTable), oder „von unten nach oben“, indem du von den unteren Komponenten ausgehst (wieProductRow). Bei einfacheren Beispielen ist es normalerweise einfacher, von oben nach unten vorzugehen, und bei größeren Projekten ist es einfacher, von unten nach oben vorzugehen.

(Wenn dieser Code einschüchternd wirkt, durchlaufen Sie zuerst denSchnellstart!)

Nachdem Sie Ihre Komponenten erstellt haben, verfügen Sie über eine Bibliothek wiederverwendbarer Komponenten, die Ihr Datenmodell rendern. Da es sich um eine statische App handelt, geben die Komponenten nur JSX zurück. Die Komponente an der Spitze der Hierarchie (FilterableProductTable) nimmt Ihr Datenmodell als Prop entgegen. Dies wird alsunidirektionaler Datenflussbezeichnet, da die Daten von der obersten Komponente zu denen am unteren Ende der Baumstruktur fließen.

Schritt 3: Finden Sie die minimale, aber vollständige Darstellung des UI-State

Um die Benutzeroberfläche interaktiv zu gestalten, müssen Sie Benutzern ermöglichen, Ihr zugrundeliegendes Datenmodell zu ändern. Dafür verwenden SieState.

Stellen Sie sich State als den minimalen Satz sich ändernder Daten vor, den Ihre App sich merken muss. Das wichtigste Prinzip für die Strukturierung von State ist, ihnDRY (Don’t Repeat Yourself) zu halten.Finden Sie die absolute minimale Darstellung des State heraus, die Ihre Anwendung benötigt, und berechnen Sie alles andere bei Bedarf. Wenn Sie beispielsweise eine Einkaufsliste erstellen, können Sie die Artikel als Array im State speichern. Wenn Sie auch die Anzahl der Artikel in der Liste anzeigen möchten, speichern Sie die Anzahl nicht als weiteren State-Wert – lesen Sie stattdessen die Länge Ihres Arrays.

Denken Sie nun an alle Datenteile in dieser Beispielanwendung:

1. Die ursprüngliche Produktliste
2. Der Suchtext, den der Benutzer eingegeben hat
3. Der Wert der Checkbox
4. Die gefilterte Produktliste

Welche davon sind State? Identifizieren Sie diejenigen, die es nicht sind:

• Bleibt esüber die Zeit unverändert? Wenn ja, ist es kein State.
• Wird esvon einem Elternteil über Props übergeben? Wenn ja, ist es kein State.
• Können Sie esbasierend auf vorhandenem State oder Props in Ihrer Komponente berechnen? Wenn ja, ist esdefinitivkein State!

Was übrig bleibt, ist wahrscheinlich State.

Gehen wir sie noch einmal einzeln durch:

1. Die ursprüngliche Produktliste wirdals Props übergeben, also ist sie kein State.
2. Der Suchtext scheint State zu sein, da er sich im Laufe der Zeit ändert und nicht aus etwas anderem berechnet werden kann.
3. Der Wert der Checkbox scheint State zu sein, da er sich im Laufe der Zeit ändert und nicht aus etwas anderem berechnet werden kann.
4. Die gefilterte Produktlisteist kein State, da sie berechnet werden kann, indem die ursprüngliche Produktliste genommen und gemäß dem Suchtext und dem Wert der Checkbox gefiltert wird.

Das bedeutet, nur der Suchtext und der Wert der Checkbox sind State! Gut gemacht!

Schritt 4: Bestimmen, wo dein State leben sollte

Nachdem du die minimalen State-Daten deiner App identifiziert hast, musst du bestimmen, welche Komponente für die Änderung dieses States verantwortlich ist oder diesen Statebesitzt. Denke daran: React verwendet einen unidirektionalen Datenfluss, bei dem Daten in der Komponentenhierarchie von der Eltern- zur Kindkomponente weitergegeben werden. Es ist möglicherweise nicht sofort klar, welche Komponente welchen State besitzen sollte. Dies kann eine Herausforderung sein, wenn du mit diesem Konzept neu bist, aber du kannst es mit den folgenden Schritten herausfinden!

Für jedes Stück State in deiner Anwendung:

1. IdentifizierejedeKomponente, die etwas basierend auf diesem State rendert.
2. Finde ihre nächste gemeinsame Elternkomponente – eine Komponente, die in der Hierarchie über ihnen allen steht.
3. Entscheide, wo der State leben sollte:
   1. Oft kannst du den State direkt in ihre gemeinsame Elternkomponente setzen.
   2. Du kannst den State auch in eine Komponente oberhalb ihrer gemeinsamen Elternkomponente setzen.
   3. Wenn du keine Komponente findest, für die es sinnvoll ist, den State zu besitzen, erstelle eine neue Komponente, die ausschließlich den State hält, und füge sie irgendwo in der Hierarchie über der gemeinsamen Elternkomponente ein.

Im vorherigen Schritt hast du zwei State-Stücke in dieser Anwendung gefunden: den Suchtext und den Wert der Checkbox. In diesem Beispiel treten sie immer zusammen auf, daher ist es sinnvoll, sie an denselben Ort zu setzen.

Lass uns nun unsere Strategie für sie durchgehen:

1. Identifiziere Komponenten, die State verwenden:
   • ProductTablemuss die Produktliste basierend auf diesem State filtern (Suchtext und Checkbox-Wert).
   • SearchBarmuss diesen State anzeigen (Suchtext und Checkbox-Wert).
2. Finde ihre gemeinsame Elternkomponente:Die erste Elternkomponente, die beide Komponenten teilen, istFilterableProductTable.
3. Entscheide, wo der State lebt: Wir werden den Filtertext und den Checked-State inFilterableProductTablebehalten.

Die State-Werte werden also inFilterableProductTableleben.

Füge der Komponente State mit demuseState()-Hook hinzu.Hooks sind spezielle Funktionen, die es dir ermöglichen, dich in React „einzuhaken“. Füge zwei State-Variablen am Anfang vonFilterableProductTablehinzu und gib ihren Anfangszustand an:

Übergib dannfilterTextundinStockOnlyanProductTableundSearchBarals Props:

Du kannst nun sehen, wie sich deine Anwendung verhalten wird. Ändere den Anfangswert vonfilterText von useState('')zuuseState('fruit')im Sandbox-Code unten. Du wirst sehen, dass sich sowohl der Suchtext als auch die Tabelle aktualisieren:

Beachten Sie, dass das Bearbeiten des Formulars noch nicht funktioniert. Im obigen Sandbox gibt es einen Konsolenfehler, der erklärt warum:

In der obigen Sandbox lesenProductTableundSearchBardie PropsfilterTextundinStockOnly, um die Tabelle, das Eingabefeld und die Checkbox zu rendern. Hier ist beispielsweise, wieSearchBarden Eingabewert befüllt:

Allerdings haben Sie noch keinen Code hinzugefügt, um auf Benutzeraktionen wie das Tippen zu reagieren. Dies wird Ihr letzter Schritt sein.

Schritt 5: Gegengerichteten Datenfluss hinzufügen

Derzeit wird Ihre App korrekt gerendert, wobei Props und State die Hierarchie hinunterfließen. Um den State gemäß der Benutzereingabe zu ändern, müssen Sie jedoch den Datenfluss in die andere Richtung unterstützen: Die Formularkomponenten tief in der Hierarchie müssen den State inFilterableProductTableaktualisieren.

React macht diesen Datenfluss explizit, aber es erfordert etwas mehr Tipparbeit als bidirektionales Data Binding. Wenn Sie versuchen, im obigen Beispiel zu tippen oder die Checkbox anzuklicken, werden Sie sehen, dass React Ihre Eingabe ignoriert. Das ist beabsichtigt. Durch das Schreiben von<input value={filterText} />haben Sie dievalue-Prop desinputso gesetzt, dass sie immer gleich demfilterText-State ist, der vonFilterableProductTableDa derfilterText-State nie gesetzt wird, ändert sich die Eingabe nie.

Sie möchten erreichen, dass sich der State immer dann aktualisiert, wenn der Benutzer die Formulareingaben ändert, um diese Änderungen widerzuspiegeln. Der State gehörtFilterableProductTable, daher kann nur diese KomponentesetFilterTextundsetInStockOnlyaufrufen. UmSearchBarzu ermöglichen, den State vonFilterableProductTablezu aktualisieren, müssen Sie diese Funktionen anSearchBarweitergeben:

Innerhalb vonSearchBarfügen Sie dieonChange-Eventhandler hinzu und setzen von dort aus den übergeordneten State:

Jetzt funktioniert die Anwendung vollständig!

Alles über die Behandlung von Ereignissen und die Aktualisierung des States erfahren Sie im AbschnittInteraktivität hinzufügen.

Wie geht es weiter?

Dies war eine sehr kurze Einführung in die Denkweise beim Erstellen von Komponenten und Anwendungen mit React. Sie könnensofort ein React-Projekt starten oder tiefer in die gesamte Syntaxeintauchen, die in diesem Tutorial verwendet wurde.