Warum funktionieren die gesteuerten Komponenten von React, obwohl setState asynchron ist

Question

Nach dem Lesen von Controlled Components und setState habe ich Probleme mit dem Aufbau eines kohärenten mentalen Modells von React.

Das Beispiel einer Controlled-Komponente aus dem doc erwähnt, enthält Fragmente relevant zu meiner Frage folgenden:

handleChange(event) { 
    this.setState({value: event.target.value}); 
} 
render() { 
    return (
    <input type="text" value={this.state.value} onChange={this.handleChange}/> 
) 
} 

Die Frage ist: da der Benutzer beliebig bearbeiten Aktionen mit hohen Geschwindigkeit durchführen kann, und setState ist vermutlich asynchron, ist es möglich, dass im Moment t0, onChange wurde mit event.target.value='a' aufgerufen, was setState({ value: 'a'}) verursacht, dann im Moment t1 Benutzer ändert Text auf 'b', und im Moment t2, die "Warteschlange" Anfrage über setState tritt, und der Text wird durch einen veralteten Wert "a" ersetzt?

Answer 1

Ich glaube, dass das korrekte mentale Modell für setState ein bisschen anders sein sollte, als ein vager Begriff "asynchron" evoziert. Es ist definitiv nicht wie setTimeout. Es ist mehr wie debounce in diesem neuen Aufruf von SetState überschreibt die vorherige. In dem Moment, in dem sich das Framework zum Ausführen von render entscheidet, ist sichergestellt, dass alle setState s, die bis zu diesem Zeitpunkt für dieses Steuerelement passiert sind, bereits zusammengeführt wurden. Zusammen mit der Annahme, dass jede Editieraktion bewirkt, dass onChang e synchron aufgerufen wird, bedeutet dies, dass zum Zeitpunkt des Aufrufs der Renderfunktion this.state.value gleich input.value ist.