Rendert React bei jedem setState
Aufruf alle Komponenten und Unterkomponenten neu ?
Wenn ja warum? Ich dachte, die Idee war, dass React nur so wenig wie nötig rendert - wenn sich der Zustand ändert.
Im folgenden einfachen Beispiel werden beide Klassen erneut gerendert, wenn auf den Text geklickt wird, obwohl sich der Status bei nachfolgenden Klicks nicht ändert, da der onClick-Handler state
den Wert immer auf denselben Wert setzt:
this.setState({'test':'me'});
Ich hätte erwartet, dass das Rendern nur stattfinden würde, wenn sich die state
Daten geändert hätten.
Hier ist der Code des Beispiels als JS-Geige und eingebettetes Snippet:
var TimeInChild = React.createClass({
render: function() {
var t = new Date().getTime();
return (
<p>Time in child:{t}</p>
);
}
});
var Main = React.createClass({
onTest: function() {
this.setState({'test':'me'});
},
render: function() {
var currentTime = new Date().getTime();
return (
<div onClick={this.onTest}>
<p>Time in main:{currentTime}</p>
<p>Click me to update time</p>
<TimeInChild/>
</div>
);
}
});
ReactDOM.render(<Main/>, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
[1]: http://jsfiddle.net/fp2tncmb/2/
javascript
reactjs
Brad Parks
quelle
quelle
setState()
selbst mit Dummy-Daten dazu führt, dass das Element anders gerendert wird, also würde ich ja sagen. Auf jeden Fall sollte es versuchen, Ihr Objekt neu zu rendern, wenn sich etwas geändert hat, da sonst Ihre Demo - vorausgesetzt, es war das beabsichtigte Verhalten - nicht funktionieren würde!shouldComponentUpdate
Methode schreiben , von der ich angenommen habe, dass eine einfache Version bereits in React selbst enthalten sein muss. Klingt so, als würde die in reag enthaltene Standardversion einfach zurückkehrentrue
- wodurch die Komponente jedes Mal neu gerendert werden muss.Antworten:
Standardmäßig - ja.
Es gibt eine Methode boolean shouldComponentUpdate (Objekt nextProps, Objekt nextstate) , wobei jede Komponente dieser Methode hat und es ist verantwortlich , um zu bestimmen „sollte das Komponenten - Update (run machen - Funktion)?“ Jedes Mal, wenn Sie den Status ändern oder neue Requisiten von der übergeordneten Komponente übergeben.
Sie können Ihre eigene Implementierung der shouldComponentUpdate- Methode für Ihre Komponente schreiben , die Standardimplementierung gibt jedoch immer true zurück. Dies bedeutet , dass die Renderfunktion immer erneut ausgeführt wird.
Zitat aus offiziellen Dokumenten http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate
Nächster Teil Ihrer Frage:
Es gibt zwei Schritte, die wir "Rendern" nennen können:
Virtuelles DOM-Rendern: Wenn die Rendermethode aufgerufen wird, wird eine neue virtuelle Dom- Struktur der Komponente zurückgegeben. Wie ich schon erwähnt, dies machen wird Methode aufgerufen immer , wenn Sie anrufen setState () , weil shouldComponentUpdate immer true zurückgibt standardmäßig. Daher gibt es hier in React standardmäßig keine Optimierung.
Native DOM-Renderings: React ändert echte DOM-Knoten in Ihrem Browser nur, wenn sie im virtuellen DOM geändert wurden und so wenig wie nötig - dies ist die großartige Funktion von React, die die echte DOM-Mutation optimiert und React schnell macht.
quelle
setState
Sie nur an, wenn Sie feststellen, dass es einen Unterschied gibt? Wenn ja, wie geht das am besten? Vergleichen Sie die JSON-Zeichenfolgen, konstruieren und vergleichen Sie Objekt-Hashes, ...?Nein, React rendert nicht alles, wenn sich der Status ändert.
Immer wenn eine Komponente verschmutzt ist (ihr Status wurde geändert), werden diese Komponente und ihre untergeordneten Komponenten neu gerendert. Dies dient bis zu einem gewissen Grad dazu, so wenig wie möglich neu zu rendern. Das einzige Mal, wenn das Rendern nicht aufgerufen wird, wird ein Zweig in einen anderen Stamm verschoben, wo wir theoretisch nichts erneut rendern müssen. In Ihrem Beispiel
TimeInChild
handelt es sich um eine untergeordnete Komponente vonMain
, sodass sie auch neu gerendert wird, wenn sich der StatusMain
ändert.React vergleicht keine Statusdaten. Wenn
setState
es aufgerufen wird, markiert es die Komponente als fehlerhaft (was bedeutet, dass sie neu gerendert werden muss). Es ist wichtig zu beachten, dass, obwohl dierender
Methode der Komponente aufgerufen wird, das reale DOM nur aktualisiert wird, wenn sich die Ausgabe vom aktuellen DOM-Baum unterscheidet (auch bekannt als Unterschied zwischen dem virtuellen DOM-Baum und dem DOM-Baum des Dokuments). In Ihrem Beispielstate
hat sich der Zeitpunkt der letzten Änderung geändert, obwohl sich die Daten nicht geändert haben. Dadurch unterscheidet sich das virtuelle DOM vom DOM des Dokuments, weshalb der HTML-Code aktualisiert wird.quelle
render()
Methode "rein" sein sollte - unabhängig vom äußeren Zustand.some branch is moved to another root
? Wie nennstbranch
du Wie nennstroot
duwhat does it mean some branch is moved to another root? What do you call branch? What do you call root?
Obwohl dies in vielen anderen Antworten hier angegeben ist, sollte die Komponente entweder:
Implementieren
shouldComponentUpdate
, um nur zu rendern, wenn sich Status oder Eigenschaften ändernWechseln Sie zur Erweiterung einer PureComponent , die bereits
shouldComponentUpdate
intern eine Methode für flache Vergleiche implementiert .Hier ist ein Beispiel
shouldComponentUpdate
, das nur für diesen einfachen Anwendungsfall und Demonstrationszwecke funktioniert. Wenn dies verwendet wird, wird die Komponente nicht mehr bei jedem Klick neu gerendert und beim ersten Anzeigen und nach einmaligem Klicken gerendert.quelle
Ja. Es ruft die render () -Methode jedes Mal auf, wenn wir stattdessen setState aufrufen, wenn "shouldComponentUpdate" false zurückgibt.
quelle
Ein weiterer Grund für "verlorenes Update" kann der nächste sein:
Wenn es das Problem ist, kann U vermeiden, den Status während der Aktualisierung festzulegen. Sie sollten den Statusparameterwert wie folgt überprüfen
Eine andere Lösung besteht darin, dem Status eine initialisierte Eigenschaft hinzuzufügen und diese beim ersten Mal einzurichten (wenn der Status auf einen Wert ungleich Null initialisiert wird).
quelle
Nicht alle Komponenten.
Die
state
In-Komponente sieht aus wie die Quelle des Wasserfalls des Zustands der gesamten APP.Die Änderung erfolgt also dort, wo der setState aufgerufen hat. Der Baum von
renders
dann wird von dort gerufen. Wenn Sie eine reine Komponente verwendet haben,render
wird diese übersprungen.quelle