Speicherort für React Component-Daten: Status, Speicher, statisch und dies

Speicherort für React Component-Daten: Status, Speicher, statisch und dies

Mit dem Aufkommen von React und Redux ist eine häufig gestellte Frage aufgetaucht:

Was soll ich im Redux- Store aufbewahren und was soll ich im lokalen Bundesstaat speichern ?

Diese Frage ist jedoch zu einfach, da Sie Daten auf zwei andere Arten zur Verwendung in einer Komponente speichern können: statisch und dies .

Lassen Sie uns überlegen, was diese jeweils sind und wann Sie sie verwenden sollten.

Lokaler Staat

Als React zum ersten Mal vorgestellt wurde, wurde uns der lokale Staat vorgestellt . Die wichtige Sache , über lokale wissen Zustand ist , dass , wenn ein Zustand Wert ändert, löst es eine erneute zu machen.

Dieser Status kann als Requisiten an Kinder weitergegeben werden , sodass Sie Ihre Komponenten bei Bedarf zwischen intelligenten Datenkomponenten und dummen Präsentationskomponenten trennen können.

Hier ist eine grundlegende Zähler-App mit lokalem Status :

Ihre Daten (der Wert des Zählers) werden in der App- Komponente gespeichert und können an ihre untergeordneten Daten weitergegeben werden.

Anwendungsfälle

Angenommen, Ihr Zähler ist für Ihre App wichtig und speichert Daten, die für andere Komponenten nützlich wären, möchten Sie den lokalen Status nicht verwenden , um diesen Wert beizubehalten.

Die derzeit empfohlene Vorgehensweise besteht darin, den lokalen Status zu verwenden, um den Status Ihres Benutzeroberflächenstatus anstelle von Daten zu verarbeiten. Die Verwendung einer kontrollierten Komponente zum Ausfüllen eines Formulars ist beispielsweise eine absolut gültige Verwendung des lokalen Status .

Ein weiteres Beispiel für UI-Daten, die Sie im lokalen Status speichern könnten, wäre die aktuell ausgewählte Registerkarte aus einer Liste von Optionen.

Eine gute Möglichkeit, darüber nachzudenken, wann der lokale Status verwendet werden soll, besteht darin, zu prüfen, ob der von Ihnen gespeicherte Wert von einer anderen Komponente verwendet wird. Wenn ein Wert nur für eine einzelne Komponente (oder möglicherweise für ein einzelnes untergeordnetes Element dieser Komponente) spezifisch ist, kann dieser Wert sicher im lokalen Status beibehalten werden .

Imbiss: Halten Sie den UI-Status und vorübergehende Daten (z. B. Formulareingaben) im lokalen Status .

Redux speichern

Nachdem einige Zeit vergangen war und sich alle mit der Idee des unidirektionalen Datenflusses vertraut gemacht hatten, erhielten wir Redux.

Mit Redux erhalten wir ein globales Geschäft . Dieser Shop befindet sich auf der höchsten Ebene Ihrer App und gibt Daten an alle Kinder weiter. Sie stellen mit dem Connect- Wrapper und einer mapStateToProps- Funktion eine Verbindung zum globalen Speicher her .

Zuerst legen die Leute alles in den Redux- Laden . Benutzer, Modalitäten, Formulare, Steckdosen ... Sie nennen es.

Unten ist die gleiche Zähler-App, aber mit Redux. Die wichtige Sache zu beachten ist , dass Zähler jetzt herkommt this.props.counter , nachdem sie von kartiert mapStateToProps in der Connect - Funktion, die den nimmt Zählerwertes aus dem globalen Speicher und ordnet sich die aktuelle Komponente Requisiten .

Wenn Sie nun auf die Schaltfläche klicken, wird eine Aktion ausgelöst und der globale Speicher aktualisiert. Die Daten werden außerhalb unserer lokalen Komponente verarbeitet und weitergegeben.

Es ist erwähnenswert, dass beim Aktualisieren von Requisiten auch ein erneutes Rendern ausgelöst wird - genau wie beim Aktualisieren des Status .

Anwendungsfälle

Der Redux- Speicher eignet sich hervorragend, um den Anwendungsstatus und nicht den UI-Status beizubehalten. Ein perfektes Beispiel ist der Anmeldestatus eines Benutzers. Viele Ihrer Komponenten benötigen Zugriff auf diese Informationen. Sobald sich der Anmeldestatus ändert, müssen alle Komponenten (zumindest die gerenderten) mit den aktualisierten Informationen neu gerendert werden.

Redux ist auch nützlich, um Ereignisse auszulösen, für die Sie Zugriff auf mehrere Komponenten oder über mehrere Routen benötigen. Ein Beispiel hierfür wäre ein Anmeldemodal, das über eine Vielzahl von Schaltflächen in Ihrer App ausgelöst werden kann. Anstatt ein Modal an einem Dutzend Stellen bedingt zu rendern, können Sie es auf der obersten Ebene Ihrer App bedingt rendern und mithilfe einer Redux-Aktion auslösen, indem Sie einen Wert im Store ändern .

Imbiss : Bewahren Sie Daten, die Sie für mehrere Komponenten freigeben möchten, im Geschäft auf .

Dies.

Eine der am wenigsten genutzten Funktionen bei der Arbeit mit React ist diese . Die Leute vergessen oft, dass React nur JavaScript mit ES2015-Syntax ist. Alles, was Sie in JavaScript tun können, können Sie auch in React tun.

Das folgende Beispiel ist eine funktionale Zähler-App, ähnlich den beiden obigen Beispielen.

Wir sind die Speicherung von Zählerwert in der Komponente und mit Forceupdate () , um wieder zu machen , wenn der Wert ändert. Dies liegt daran, dass Änderungen an etwas anderem als Status und Requisiten kein erneutes Rendern auslösen .

Dies ist eigentlich ein Beispiel dafür , wie sollten Sie nicht verwenden diese . Wenn Sie forceUpdate () verwenden , machen Sie wahrscheinlich etwas falsch. Für Werte, für die eine Änderung ein erneutes Rendern auslösen sollte, sollten Sie den lokalen Status oder den Requisiten- / Redux- Speicher verwenden .

Anwendungsfälle

Der Anwendungsfall hierfür ist das Speichern von Werten, für die eine Änderung kein erneutes Rendern auslösen sollte. Zum Beispiel Steckdosen sind eine perfekte Sache auf speichern diese .

Auch wissen viele Menschen nicht erkennen , sie sind bereits mit dieser die ganze Zeit in ihrer Funktionsdefinitionen. Wenn Sie render () definieren , definieren Sie this.prototype.render = function () wirklich , aber es ist hinter der ES2015-Klassensyntax verborgen.

Imbiss: Verwenden Sie diese Option , um Dinge zu speichern, die kein erneutes Rendern auslösen sollten.

Statisch

Statische Methoden und Eigenschaften sind vielleicht der am wenigsten bekannte Aspekt von ES2015-Klassen (beruhigen Sie sich, ja, ich weiß, dass sie nicht wirklich Klassen unter der Haube sind) , hauptsächlich weil sie nicht allzu häufig verwendet werden. Aber sie sind eigentlich nicht besonders kompliziert. Wenn Sie PropTypes verwendet haben , haben Sie bereits eine statische Eigenschaft definiert .

Die folgenden zwei Codeblöcke sind identisch. Das erste ist, wie die meisten Leute PropTypes definieren. Die zweite ist, wie Sie sie mit statisch definieren können .

Wie Sie sehen können, ist statisch nicht allzu kompliziert. Es ist nur eine andere Möglichkeit, einer Klasse einen Wert zuzuweisen. Der Hauptunterschied zwischen statisch und diesem besteht darin, dass Sie die Klasse nicht instanziieren müssen, um auf den Wert zuzugreifen.

Im obigen Beispiel können Sie sehen, dass wir den staticProperty- Wert direkt aus der Klasse aufrufen können, ohne ihn zu instanziieren. Um prototypeProperty zu erhalten , mussten wir ihn jedoch mit der neuen App () instanziieren .

Anwendungsfälle

Statische Methoden und Eigenschaften werden selten verwendet und sollten für Dienstprogrammfunktionen verwendet werden, die alle Komponenten eines bestimmten Typs benötigen würden.

PropTypes sind ein Beispiel für eine Dienstprogrammfunktion, bei der Sie an eine Schaltflächenkomponente anhängen, da jede von Ihnen gerenderte Schaltfläche dieselben Werte benötigt.

Ein weiterer Anwendungsfall ist, wenn Sie über das Abrufen von Daten besorgt sind. Wenn Sie GraphQL oder Falcor verwenden, können Sie angeben, welche Daten Sie von Ihrem Server zurückgeben möchten. Auf diese Weise erhalten Sie nicht viel mehr Daten, als Sie tatsächlich für Ihre Komponente benötigen.

In der obigen Beispielkomponente können Sie also vor dem Anfordern der Daten für eine bestimmte Komponente mit App.requiredData schnell ein Array erforderlicher Werte für Ihre Abfrage abrufen. Auf diese Weise können Sie eine Anfrage ohne Überabruf stellen.

Takeaway: Sie werden wahrscheinlich nie statische Aufladung verwenden .

Diese andere Option ...

Es gibt tatsächlich eine andere Option, die ich absichtlich aus dem Titel herausgelassen habe, weil Sie sie sparsam verwenden sollten: Sie können Dinge in einer Variablen mit Modulbereich speichern .

Es gibt bestimmte Situationen, in denen es sinnvoll ist, aber zum größten Teil sollten Sie es einfach nicht tun.

Sie können sehen, dass dies fast dasselbe ist wie die Verwendung , außer dass wir den Wert außerhalb unserer Komponente speichern. Dies kann zu Problemen führen, wenn Sie mehr als eine Komponente pro Datei haben. Möglicherweise möchten Sie dies zum Festlegen von Standardwerten verwenden, wenn die Werte nicht an Ihr Geschäft gebunden sind. Andernfalls ist es besser , eine Statik für Standard-Requisiten zu verwenden.

Wenn Sie Daten zwischen Komponenten austauschen müssen und Daten für alles im Modul verfügbar halten möchten, ist es fast immer besser, Ihren Redux- Speicher zu verwenden .

Imbiss: Verwenden Sie keine Variablen mit Modulbereich, wenn Sie dies vermeiden können.

Sam Corcos ist der Hauptentwickler und Mitbegründer von Sightline Maps, der intuitivsten Plattform für den 3D-Druck topografischer Karten, sowie von LearnPhoenix.io, einer Tutorial-Site für Fortgeschrittene zum Erstellen skalierbarer Produktions-Apps mit Phoenix und React. Mit dem Gutscheincode free_code_camp erhalten Sie 20 US-Dollar Rabatt auf LearnPhoenix