Ich beginne mit React.js und möchte ein einfaches Formular erstellen, aber in der Dokumentation habe ich zwei Möglichkeiten gefunden, dies zu tun.
Der erste verwendet Refs :
var CommentForm = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var author = React.findDOMNode(this.refs.author).value.trim();
var text = React.findDOMNode(this.refs.text).value.trim();
if (!text || !author) {
return;
}
// TODO: send request to the server
React.findDOMNode(this.refs.author).value = '';
React.findDOMNode(this.refs.text).value = '';
return;
},
render: function() {
return (
<form className="commentForm" onSubmit={this.handleSubmit}>
<input type="text" placeholder="Your name" ref="author" />
<input type="text" placeholder="Say something..." ref="text" />
<input type="submit" value="Post" />
</form>
);
}
});
Und der zweite verwendet den Status innerhalb der React-Komponente:
var TodoTextInput = React.createClass({
getInitialState: function() {
return {
value: this.props.value || ''
};
},
render: function() /*object*/ {
return (
<input className={this.props.className}
id={this.props.id}
placeholder={this.props.placeholder}
onBlur={this._save}
value={this.state.value}
/>
);
},
_save: function() {
this.props.onSave(this.state.value);
this.setState({value: ''
});
});
Ich kann die Vor- und Nachteile der beiden Alternativen nicht erkennen, wenn es welche gibt. Vielen Dank.
Antworten:
Die Kurzversion: Vermeiden Sie Refs.
Sie sind schlecht für die Wartbarkeit und verlieren viel von der Einfachheit des WYSIWYG-Modell-Renderings.
Du hast ein Formular. Sie müssen eine Schaltfläche hinzufügen, die das Formular zurücksetzt.
Sie haben ein CCV-Nummernfeld in einer Eingabe und einige andere Felder in Ihrer Anwendung, die Zahlen sind. Jetzt müssen Sie erzwingen, dass der Benutzer nur noch Zahlen eingibt.
Eh, egal, der PM möchte, dass wir nur einen roten Kastenschatten machen, wenn er ungültig ist.
Wir müssen dem Elternteil die Kontrolle zurückgeben. Die Daten sind jetzt in Requisiten und wir müssen auf Änderungen reagieren.
sed -e 's/this.state/this.props/' 's/handleChange/onChange/' -i form.js
Die Leute denken, Schiedsrichter sind "einfacher", als sie im Zustand zu halten. Dies mag für die ersten 20 Minuten zutreffen, nach meiner Erfahrung danach jedoch nicht mehr. Versetzen Sie sich in die Lage zu sagen "Ja, ich werde es in 5 Minuten erledigen lassen" anstatt "Sicher, ich werde nur ein paar Komponenten neu schreiben".
quelle
React.findDOMNode(this.refs.foo)
. Wenn Sie zB ändernthis.refs.foo.props.bar
, passiert nichts.<input onChange={this.handleChange} value={this.state.foo} />
geändert haben<input onChange={this.props.handleChange} value={this.props.foo} />
oder Ihre handleChange-Funktion (en) ändern, um die Rückrufe in Requisiten aufzurufen. In jedem Fall sind es ein paar kleine offensichtliche Änderungen.input
Ideal ist es, jedes Feld zu komponieren , in dem jedes seinen eigenen Status beibehält. Irgendwann müssen wir diese verschiedenen unabhängigen Zustände mit einem größeren Modell in Einklang bringen. Vielleicht haben wir eine automatische Speicherung für einen Timer, oder wir sparen nur beicomponentWillUnmount
Hier finde ich esrefs
ideal, während der Abstimmung pflücken wir denstate
Wert von jedemref
, und keiner ist klüger. Ich stimme in den meisten Fällenstate
der Antwort zu, aber bei einer großen Anzahl voninputs
ist die Verwendung eines geeignetenrefs
Musters ein Segen für die LeistungIch habe einige Leute gesehen, die die obige Antwort als Grund angeführt haben, "niemals Refs zu verwenden", und ich möchte meine Meinung (sowie einige andere React-Entwickler, mit denen ich gesprochen habe) abgeben.
Die Einstellung "Refs nicht verwenden" ist korrekt, wenn davon gesprochen wird, sie für Komponenteninstanzen zu verwenden. Das heißt, Sie sollten refs nicht verwenden, um Komponenteninstanzen abzurufen und Methoden für sie aufzurufen. Dies ist die falsche Art, Refs zu verwenden, und wenn Refs schnell nach Süden gehen.
Die richtige (und sehr nützliche) Art, Refs zu verwenden, besteht darin, sie zu verwenden, um einen Wert aus dem DOM zu erhalten. Wenn Sie beispielsweise ein Eingabefeld haben, das einen Ref an diesen Eingang anfügt, ist es in Ordnung, den Wert später über den Ref abzurufen. Ohne diese Methode müssen Sie einen ziemlich koordinierten Prozess durchlaufen, um Ihr Eingabefeld entweder mit Ihrem lokalen Bundesstaat oder Ihrem Flussmittelspeicher auf dem neuesten Stand zu halten - was unnötig erscheint.
2019 edit: Hallo Freunde der Zukunft. Zusätzlich zu dem, was ich vor einigen Jahren erwähnt habe, sind Refs mit React Hooks auch eine großartige Möglichkeit, Daten zwischen Renderings zu verfolgen, und beschränken sich nicht nur darauf, DOM-Knoten zu greifen.
quelle
refs
und erhalten Sie den Statuswert. Es scheint tatsächlich ein wirklich schönes Muster zu sein.TL; DR Im Allgemeinen verstoßen
refs
Sie gegen die deklarative Philosophie von React , daher sollten Sie sie als letzten Ausweg verwenden. Verwenden Siestate / props
wann immer möglich.Um zu verstehen, wo Sie
refs
vs verwendenstate / props
, schauen wir uns einige der Designprinzipien an, denen React folgt.Per React Dokumentation über
refs
Per Reacts Designprinzipien für Fluchtluken
Das heißt, das Team von React schlägt vor, dies zu vermeiden
refs
und zu verwendenstate / props
alles , was auf reaktive / deklarative Weise getan werden kann.@ Tyler McGinnis hat eine sehr gute Antwort gegeben , die auch besagt
Während Sie das tun können, arbeiten Sie gegen die Philosophie von React. Wenn Sie einen Wert in einer Eingabe haben, kommt dieser mit Sicherheit von
state / props
. Um den Code konsistent und vorhersehbar zu halten, sollten Sie sich auch daran haltenstate / props
. Ich erkenne die Tatsache an, dass Sierefs
manchmal die schnellere Lösung erhalten. Wenn Sie also einen Proof of Concept durchführen, schnell und schmutzig akzeptabel.Dies lässt uns einige konkrete Anwendungsfälle für
refs
quelle
Dieser Beitrag ist alt.
Ich werde meine kleinen Erfahrungen in einem Fall in dieser Angelegenheit teilen.
Ich habe an einer großen Komponente (414 Zeilen) mit vielen 'dynamischen' Eingaben und vielen zwischengespeicherten Daten gearbeitet. (Ich arbeite nicht alleine an der Seite und meine Sinne sagen mir, dass die Struktur des Codes wahrscheinlich besser aufgeteilt werden könnte, aber es ist nicht der Punkt (nun, es könnte sein, aber ich beschäftige mich damit)
Ich habe zuerst mit state gearbeitet, um die Werte der Eingaben zu verarbeiten:
und natürlich in den Eingaben:
Das Rendern war so umfangreich, dass die Eingabeänderung abgehackt war wie **** (versuchen Sie nicht, die Taste gedrückt zu halten, Text wird erst nach einer Pause angezeigt)
Ich war mir sicher, dass ich dies mit Refs vermeiden könnte.
endete so:
und in den Eingängen:
[Nun, in meinem Fall war die Eingabe Material-UI TextField, also:
]]
Dank dessen gibt es kein erneutes Rendern, die Eingabe ist reibungslos, funktioniert genauso. Das spart Zyklen und Berechnungen, also auch Energie. Mach es für die Erde x)
Mein Fazit: useRef für Eingabewerte kann sogar benötigt werden.
quelle