ReactJS - Nicht Rendern aufgerufen werden, zu jeder Zeit "setState" genannt wird?
Nicht Reagieren, re-Rendern-alle Komponenten und sub-Komponenten jedes mal, wenn setState genannt wird?
Wenn ja, warum? Ich dachte, die Idee war, die Reagieren nur dadurch so wenig wie nötig - wenn sich der Zustand geändert.
Im folgenden an einem einfachen Beispiel, beide Klassen Rendern Sie erneut, wenn der text angeklickt wird, trotz der Tatsache, dass der Zustand nicht ändern auf den nachfolgenden Klicks, wie der onClick-handler setzt immer die state auf den gleichen Wert:
this.setState({'test':'me'});Ich hätte erwartet, dass die macht würde nur passieren, wenn state Daten geändert hatte.
Hier ist der code für das Beispiel wie eine JS-Fiddle - und embedded-snippet:
JS:
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);HTML:
<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/- Ich hatte das gleiche Problem, ich weiß nicht die genaue Lösung. Aber ich aufgeräumt hatte, den unerwünschten codes aus der Komponente es begann wie üblich.
- Ich möchte darauf hinweisen, dass in deinem Beispiel - denn wie Ihr element ist entworfen, nicht ausschließlich verlassen Sie sich auf eine einzigartige state - Aufruf
setState()auch mit dummy-Daten führt dazu, dass das element gerendert, so würde ich sagen, ja. Absolut sollte es versuchen, re-Rendern Sie Ihr Objekt, wenn Sie etwas verändert haben könnte, weil sonst Ihre demo - vorausgesetzt, es war bestimmt das Verhalten - nicht funktionieren würde! - Du magst Recht haben @TadhgMcDonald-Jensen - aber aus meinem Verständnis Reagieren würde gerendert haben es das erste mal (da sich der Zustand ändert sich von nichts zu etwas, das erste mal), dann hatte nie Rendern Sie erneut. Ich war falsch, obwohl, natürlich - wie es aussieht Reagieren erfordert, dass Sie schreiben Sie Ihre eigenen
shouldComponentUpdateMethode, die ich davon ausgegangen, eine einfache version muss es schon vorhanden Reagieren selbst. Klingt wie die Standard-version enthalten, reagieren einfach zurücktrue- die Kräfte, die Komponente neu Rendern jedes einzelne mal. - Ja, aber es muss nur neu Rendern in der virtuellen DOM dann, es ändert sich nur der eigentliche DOM, wenn die Komponente gerendert wird anders. Updates der virtuellen DOM sind in der Regel vernachlässigbar (zumindest im Vergleich zu ändern, die Dinge auf dem Bildschirm) so aufrufen Rendern jeder Zeit müssen Sie möglicherweise zu aktualisieren, dann zu sehen, dass keine Veränderung passiert nicht sehr teuer und sicherer als die Annahme, es Rendern soll, die gleiche.
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Standardmäßig - ja.
Es ist eine Methode, boolean shouldComponentUpdate(Objekt nextProps, Objekt nextState), jede Komponente dieser Methode, und es ist Verantwortung zu bestimmen "soll-Komponente aktualisieren (führen Sie Rendern - Funktion)?" jedes mal, wenn Sie ändern Zustand oder pass neue Requisiten von der übergeordneten Komponente.
Schreiben Sie Ihre eigene Implementierung von shouldComponentUpdate - Methode für die Komponente, aber Standardimplementierung gibt immer true zurück - das bedeutet, immer wieder laufen render-Funktion.
Zitat von offiziellen docs http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate
Nächsten Teil deiner Frage:
Gibt es zwei Schritte von dem, was wir nennen können "Rendern":
Virtuellen DOM-Rendern: wenn Rendern Methode wird aufgerufen, es gibt eine neue virtuellen dom Struktur der Komponente. Wie ich bereits erwähnt, ist dies Rendern Methode wird aufgerufen, immer wenn Sie anrufen setState(), weil shouldComponentUpdate gibt immer true standardmäßig. So, es wird standardmäßig keine Optimierung hier Reagieren.
Native DOM-render: Veränderungen Reagieren echten DOM-Knoten in Ihrem browser nur, wenn Sie verändert wurden, in der Virtuellen DOM und so wenig wie nötig - dies ist die große Reagieren, ist ein feature, das optimiert die echte DOM-mutation und macht schnell zu Reagieren.
setStatewenn Sie erkennen, gibt es einen Unterschied? Wenn ja, wie dies am besten vergleichen Sie die json-strings, konstruieren und vergleichen, - Objekt-hashes,...?shouldComponentUpdatenur performance-Steigerung in Schritt#1, was nur bedeutet, nicht zu rekonstruieren, in der virtuelle dom-Baum-Struktur, in einigen Fällen?shouldComponentUpdateuns helfen, nicht recostruct der virual dom-Baum-Struktur, in einigen Fällen (Schritt#1 wie oben beschrieben). Es bedeutet auch, weil wir nicht recostruct der virtuellen dom (wennshouldComponentUpdatefalse zurückgegeben), Reagieren unter der Haube berühren Sie nicht die browser-DOM auch (Schritt#2) und das ist eine enorme performance-Verbesserung!Nicht, Reagieren nicht, machen alles wenn sich der Zustand ändert.
Wann immer eine Komponente ist verschmutzt (seinen Zustand gewechselt), wird diese Komponente und Ihre untergeordneten Elemente neu gerendert. Diese zum Teil neu zu Rendern, so wenig wie möglich. Die einzige Zeit, die beim Rendern nicht genannt ist, wenn einige Zweig ist verschoben auf einen anderen root, wo wir theoretisch nicht brauchen, um re-Rendern nichts. In deinem Beispiel
TimeInChildist eine untergeordnete Komponente vonMain, so wird es auch in neu gerendert, wenn sich der ZustandMainänderungen.Reagieren nicht zu vergleichen, state data. Wenn
setStategenannt wird, kennzeichnet die Komponente als fehlerhaft (das heißt, es muss neu gerendert). Die wichtige Sache zu beachten ist, dass, obwohlrender- Methode der Komponente aufgerufen wird, wird der echte DOM wird nur aktualisiert, wenn die Ausgabe unterscheidet sich von der aktuellen DOM-Baum (ein.k.ein diff zwischen den Virtuellen DOM-Struktur und Dokument-DOM-Baum). In Ihrem Beispiel, obwohl diestateDaten nicht geändert hat, ist der Zeitpunkt der letzten änderung gemacht hat, die Virtuelle DOM unterscheidet sich von Dokument-DOM, also warum der HTML-Code wird aktualisiert.render()Methode sollte "pure" - unabhängig von äußeren Zustand.some branch is moved to another root? Was nennst dubranch? Was nennst duroot?what does it mean some branch is moved to another root? What do you call branch? What do you call root?<ul><li/></ul><ol></ol>-><ul></ul><ol><li/></ol>im Idealfall könnte es bewegen Sie einfach die<li/>aber wahrscheinlich wird es zu zerstören, die alte und eine neue erstellen.Ja. Es ruft die render () - Methode jedes mal, wenn wir anrufen setState statt, wenn "shouldComponentUpdate" false " zurückgibt.
Obwohl es anders in vielen anderen Antworten hier, die Komponente sollte entweder:
implementieren
shouldComponentUpdatenur noch gerendert, wenn sich der Zustand oder die Eigenschaften ändernSchalter für die Verlängerung eine PureComponent, die bereits implementiert einen
shouldComponentUpdateMethode intern für flache Vergleiche.Hier ist ein Beispiel, das verwendet
shouldComponentUpdate, das funktioniert nur für dieses einfache use-case-und Demonstrationszwecken. Wenn dies verwendet wird, wird die Komponente nicht mehr neu gerendert, die sich bei jedem Klick und gerendert wird bei der ersten Anzeige, und, nachdem Sie einmal gedrückt.JS:
HTML: