Ich wollte überprüfen, was passiert, wenn Sie this.setState mehrmals verwenden (2 Mal für die Diskussion). Ich dachte, dass die Komponente zweimal gerendert wird, aber anscheinend wird sie nur einmal gerendert. Eine andere Erwartung, die ich hatte, war, dass vielleicht der zweite Aufruf von setState über den ersten läuft, aber Sie haben es erraten - es hat gut funktioniert.
Link zu einer JSfiddle
var Hello = React.createClass({
render: function() {
return (
<div>
<div>Hello {this.props.name}</div>
<CheckBox />
</div>
);
}
});
var CheckBox = React.createClass({
getInitialState: function() {
return {
alex: 0
};
},
handleChange: function(event) {
this.setState({
value: event.target.value
});
this.setState({
alex: 5
});
},
render: function() {
alert('render');
return (
<div>
<label htmlFor="alex">Alex</label>
<input type="checkbox" onChange={this.handleChange} name="alex" />
<div>{this.state.alex}</div>
</div>
);
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
Wie Sie sehen werden, wird bei jedem Rendern eine Warnung mit der Aufschrift "Rendern" angezeigt.
Haben Sie eine Erklärung, warum es richtig funktioniert hat?
javascript
reactjs
Alexunder
quelle
quelle
this.state.alex
- was passiert, wenn Sie ein Element hinzufügen, das ebenfalls davon abhängtthis.state.value
?Antworten:
Reagieren Sie auf Statusaktualisierungen von Stapeln, die in Ereignishandlern und Lebenszyklusmethoden auftreten. Wenn Sie den Status in einem
<div onClick />
Handler mehrmals aktualisieren , wartet React vor dem erneuten Rendern, bis die Ereignisbehandlung abgeschlossen ist.Dies funktioniert nur in reaktionsgesteuerten synthetischen Ereignishandlern und Lebenszyklusmethoden. Statusaktualisierungen werden beispielsweise in AJAX- und
setTimeout
Ereignishandlern nicht gestapelt .quelle
<div onClick />
) und Komponentenlebenszyklusmethoden vollständig steuert , weiß es, dass es das Verhalten vonsetState
für die Dauer des Aufrufs sicher ändern kann, um Stapelstatusaktualisierungen durchzuführen und auf das Löschen zu warten. In einem AJAX odersetTimeout
Handler hingegen kann React nicht wissen, wann unser Handler die Ausführung beendet hat. Technisch gesehen werden die React-Warteschlangen in beiden Fällen aktualisiert, jedoch sofort außerhalb eines React-gesteuerten Handlers geleert.ReactDOM.unstable_batchedUpdates(function)
damitsetState
außerhalb von React-Ereignishandlern stapeln. Wie der Name schon sagt, erlischt Ihre Garantie.Die setState () -Methode aktualisiert den Status der Komponente nicht sofort, sondern stellt die Aktualisierung lediglich in eine Warteschlange, um sie später zu verarbeiten. React kann mehrere Aktualisierungsanforderungen stapeln, um das Rendern effizienter zu gestalten. Aus diesem Grund müssen besondere Vorsichtsmaßnahmen getroffen werden, wenn Sie versuchen, den Status basierend auf dem vorherigen Status der Komponente zu aktualisieren.
Der folgende Code erhöht beispielsweise das Statuswertattribut nur um 1, obwohl es viermal aufgerufen wurde:
Um einen Status nach seiner Aktualisierung zu verwenden, führen Sie die gesamte Logik im Rückrufargument aus:
Die Methode setState (updater, [callback]) kann eine Updater-Funktion als erstes Argument verwenden, um den Status basierend auf dem vorherigen Status und den vorherigen Eigenschaften zu aktualisieren. Der Rückgabewert der Updater-Funktion wird flach mit dem vorherigen Komponentenstatus zusammengeführt. Die Methode aktualisiert den Status asynchron, sodass es einen Optionsrückruf gibt, der aufgerufen wird, sobald der Status vollständig aktualisiert wurde.
Beispiel:
Hier ist ein Beispiel für das Aktualisieren des Status basierend auf dem vorherigen Status:
quelle
setState(updater,[callback])
, es ist wie ein weniger ausführlicherObject.assign
Dank dafür!