ReactJS lernen

Zustandslose funktionale Komponenten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Es ist bewährte Praxis, den Zustand möglichst klein und den Code möglichst übersichtlich zu halten. Sehen Sie, wie Sie React-Komponenten funktional beschreiben können, um diese Ziele zu erreichen.
05:07

Transkript

Als Entwickler ist man stets bestrebt, seinen Code möglichst sauber und übersichtlich zu halten. Seit React Version 0.14 ist man unter bestimmten Voraussetzungen nicht mehr dazu verpflichtet, seine React-Komponente von React.Component erben zu lassen. Wenn die Komponente keinen eigenen Zustand verwaltet, kann man eine sogenannte stateless functional component schreiben, also eine zustandslose funktionale Komponente. Wie so etwas aussehen kann, werden Sie im folgenden Video erfahren. Unsere App besteht aus drei Modulen, die sich nur mit der Anzeige von Informationen befassen. Einerseits die App.js, und zum anderen die AddProductForm.js, sowie die Product.js. Beginnen wir mit der App.js. Wir schreiben nun keine Klasse mehr, die von React.Component erbt, sondern die App wird zu einer einfachen JavaScript-Funktion, in diesem Fall in der ES6-Arrow-Function-Schreibweise. Diese JavaScript-Funktion nimmt ein Argument entgegen, nämlich die Props. Was hier also schonmal syntaktisch wegfällt, ist die Deklaration einer Klasse, das Erben von React.Component, und auch der Constructor, der hier nicht mehr existiert, da wir eine einfache Funktion haben. Wir benutzen hier sogar eine besonders kurze Schreibweise aus ES6. Wir müssen hier nicht mit einer geschweiften Klammer einen Funktionsrumpf beginnen und ein return-Statement schreiben, sondern wir können direkt mit einer runden Klammer das return-Statement implizit beginnen. Da die Props nicht mehr eine Eigenschaft auf unserer Objektinstanz sind, sondern direkt als Eingabeparameter definiert sind, können wir im Folgenden direkt auf die Props zugreifen und müssen nicht mehr this.props schreiben. Das gilt hier sowohl für den onProductRemove-Handler, als auch für die props.products. Das sind im Fall der App.js auch schon die einzigen Änderungen. Gehen wir also einen Schritt weiter zu AddProductForm.js. Und wir sehen, auch hier beginnen wir, damit dass die AddProductForm nicht mehr als Klasse, sondern als einfache Funktion definiert wird. Hier können wir aber keine Kurzschreibweise mehr anwenden, und beginnen direkt mit einer geschweiften Klammer. Das liegt daran, dass unsere Funktion nicht nur aus einem einzigen großen return-Statement besteht, das beginnt nämlich erst hier, sondern wir vorher in dieser Funktion noch eine andere Funktion definieren, nämlich addProduct. addProduct bereitet einige Daten auf. Diese Daten gibt es dann schließlich weiter an props.onProductAdd. addProduct wird dann später hier unten aufgerufen. Ansonsten sind die Änderungen auch analog zu App.js. Wir haben einfach keinen this-Kontext mehr und können direkt auf die Props zugreifen. Wir können also einen Schritt weiter zur Product.js gehen. Auch hier das gleiche Spiel. Das Product ist ab jetzt eine einfache Funktion, die nur props entgegennimmt. Auch hier können wir keine Kurzschreibweise anwenden, weil wir vorher noch einige Deklarationen machen. Wir setzen hier watched, zusätzlich einen neuen Handler toggleWatch. Und kurz danach kommt auch schon das return-Statement, in dem unsere Render-Ausgabe definiert wird. Da wir es hier nicht mit einer Klasse, sondern mit einer Funktion zu tun haben, können wir natürlich keine Methoden wie bei einer ES6-Klasse definieren, sondern nur innerhalb dieser Funktion. Was wir aber trotzdem machen können, ist, defaultProps und propTypes zu definieren. Dazu definieren wir einfach an oberer Stelle das Product. Und anschließend schreiben wir auf dem Product die defaultProps direkt als Objekt fest. Wenn wir damit fertig sind, können wir noch das Product ganz nochmal exportieren. Weiterhin ist zu beachten, dass wenn Sie eine funktionale Schreibweise für Ihre React-Komponenten verwenden, Sie nicht den React Component Lifecycle zur Verfügung haben. Den haben Sie nämlich nur dann zur Verfügung, wenn Sie eine ganz normale Klasse benutzen und von React.Component erben. Damit haben wir auch schon das Refactoring abgeschlossen und wir können unsere Anwendung kompilieren und testen, um sicherzustellen, dass die Funktionalität erhalten geblieben ist. Wir lassen Babel darüberlaufen. Und wir aktualisieren den Browser. Die Anwendung wird richtig initialisiert mit prod1, prod2. Wir können mal ein zweites Produkt hinzufügen. Und Add Product. Und wir sehen, es wurde hinzugefügt mit dem richtigen Titel, der Beschreibung, und in der richtigen Kategorie. Auch Watch! funktioniert weiterhin. In diesem Video haben Sie gesehen, dass Sie zustandslose Komponenten durch eine funktionale Schreibeweise optisch verkleinern können und so die Übersichtlichkeit des Codes erhöhen können. Sie haben außerdem gelernt, dass Sie in diesem Fall auf die Methoden des Component Lifecycle verzichten müssen.

ReactJS lernen

Sehen Sie, wie Ihre Anwendung mit der Hilfe von ReactJS von einem virtuellen DOM (Document Object Model) profitiert.

2 Std. 20 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:05.08.2016
Laufzeit:2 Std. 20 min (19 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!