Ich fange an, Facebook React in einem Backbone-Projekt zu verwenden, und bis jetzt läuft es wirklich gut.
Ich bemerkte jedoch einige Duplikate in meinem React-Code.
Zum Beispiel habe ich mehrere form wie Widgets mit Staaten wie INITIAL
, SENDING
und SENT
. Wenn eine Schaltfläche gedrückt wird, muss das Formular validiert, eine Anforderung gestellt und der Status aktualisiert werden. Der Status bleibt this.state
natürlich zusammen mit den Feldwerten in React .
Wenn dies Backbone-Ansichten wären, hätte ich eine Basisklasse namens aufgerufen, FormView
aber ich hatte den Eindruck, dass React Unterklassen für die gemeinsame Ansichtslogik weder unterstützt noch unterstützt (korrigieren Sie mich, wenn ich falsch liege).
Ich habe in React zwei Ansätze zur Wiederverwendung von Code gesehen:
- Mixins (wie LinkedStateMixin , das mit React geliefert wird );
- Containerkomponenten (z. B. React-Infinite-Scroll ).
Stimmt es, dass Mixins und Container der Vererbung in React vorgezogen werden? Ist das eine bewusste Designentscheidung? Wäre es sinnvoller, ein Mixin oder eine Containerkomponente für mein Beispiel „Formular-Widget“ aus dem zweiten Absatz zu verwenden?
Hier ist ein Kern mit FeedbackWidget
und JoinWidget
in ihrem aktuellen Zustand . Sie haben eine ähnliche Struktur, eine ähnliche beginSend
Methode und beide benötigen eine gewisse Validierungsunterstützung (noch nicht vorhanden).
quelle
Antworten:
Zuerst versuchte ich Subkomponenten für dieses und Extrakt zu verwenden
FormWidget
undInputWidget
. Ich habe diesen Ansatz jedoch auf halbem Weg aufgegeben, weil ich eine bessere Kontrolle über die generierteninput
s und ihren Zustand haben wollte.Zwei Artikel, die mir am meisten geholfen haben:
Es stellte sich heraus, dass ich nur zwei (verschiedene) Mixins schreiben musste:
ValidationMixin
undFormMixin
.So habe ich sie getrennt.
ValidationMixin
Das Validierungsmixin fügt praktische Methoden hinzu, mit denen Sie Ihre Validierungsfunktionen für einige Eigenschaften Ihres Staates ausführen und "fehlerhafte" Eigenschaften in einem
state.errors
Array speichern können, damit Sie entsprechende Felder hervorheben können.Quelle ( Kern )
Verwendung
ValidationMixin
drei Methoden hat:validate
,hasError
undresetError
.Es wird erwartet, dass die Klasse ein
validators
Objekt definiert , ähnlich wiepropTypes
:Wenn der Benutzer die Übermittlungstaste drückt, rufe ich an
validate
. Bei einem Aufruf vonvalidate
wird jeder Validator ausgeführt undthis.state.errors
mit einem Array gefüllt, das Schlüssel der Eigenschaften enthält, bei denen die Validierung fehlgeschlagen ist.In meiner
render
MethodehasError
generiere ich die richtige CSS-Klasse für Felder. Wenn der Benutzer den Fokus in das Feld legt, rufe ichresetError
an, um die Fehlerhervorhebung bis zum nächstenvalidate
Aufruf zu entfernen .FormMixin
Das Formular-Mixin behandelt den Formularstatus (bearbeitbar, übermittelnd, übermittelt). Sie können es verwenden, um Eingaben und Schaltflächen zu deaktivieren, während eine Anforderung gesendet wird, und um Ihre Ansicht beim Senden entsprechend zu aktualisieren.
Quelle ( Kern )
Verwendung
Es wird erwartet, dass die Komponente eine Methode bereitstellt :
sendRequest
, die ein Bluebird-Versprechen zurückgeben sollte. (Es ist trivial, es so zu ändern, dass es mit Q oder einer anderen Versprechungsbibliothek funktioniert.)Es bietet komfortable Methoden wie
isFormEditable
,isFormSubmitting
undisFormSubmitted
. Es bietet auch eine Methode zum Starten der Anforderung :submitForm
. Sie können es über denonClick
Handler der Formularschaltflächen aufrufen .quelle
FormInput
das Gespräche mit seinem Besitzer überformLink
.formLink
ist wievalueLink
und wird vonFormMixin
derlinkValidatedState(name, validator)
Methode zurückgegeben.FormInput
erhält seinen Wert vonformLink.value
und ruft aufformLink.requestBlur
undformLink.requestFocus
- sie verursachen eine Validierung inFormMixin
. Um die tatsächliche Komponente anzupassen, die für die Eingabe verwendet wird, kann ich sie schließlich anFormInput
folgende<FormInput component={React.DOM.textarea} ... />
done
Bluebird nicht anrufen und der Code funktioniert wie in Q (oder nativen Versprechungen) - natürlich ist Bluebird besser. Beachten Sie auch, dass sich die Syntax in React seit der Antwort geändert hat.Ich baue ein SPA mit React (seit 1 Jahr in Produktion) und verwende fast nie Mixins.
Der einzige Anwendungsfall, den ich derzeit für Mixins habe, ist, wenn Sie Verhalten teilen möchten, das die Lebenszyklusmethoden von React (
componentDidMount
usw.) verwendet. Dieses Problem wird durch die Komponenten höherer Ordnung gelöst, die Dan Abramov in seinem Link spricht (oder durch Verwendung der ES6-Klassenvererbung).Mixins werden auch häufig in Frameworks verwendet, um die Framework-API allen Komponenten zur Verfügung zu stellen, indem die "versteckte" Kontextfunktion von React verwendet wird. Dies wird auch bei der Vererbung von ES6-Klassen nicht mehr benötigt.
In den meisten anderen Fällen werden Mixins verwendet, die jedoch nicht wirklich benötigt werden und durch einfache Helfer ersetzt werden könnten.
Beispielsweise:
Sie können
LinkedStateMixin
Code sehr einfach umgestalten , sodass die Syntax wie folgt lautet:Gibt es einen großen Unterschied?
quelle