Was passiert, wenn wir this.setState() in ReactJS verwenden?

Question

Ich bin verwirrt, wenn der Zustand tatsächlich ändert, wenn this.setState() in React verwendet wird. Hier ist meine JSX:

var Hello = React.createClass({ 
    getInitialState: function() { 
    return { 
     iterator: 0 
    } 
    }, 
    handleClick: function() { 
    console.log(this.state.iterator); 
    this.setState({ 
     iterator: this.state.iterator + 1 
    }) 
    console.log(this.state.iterator) 
    }, 
    render: function() { 
    return <button onClick={this.handleClick}>{this.state.iterator}</button>; 
    } 
}); 

ReactDOM.render(
    <Hello name="World"/>, 
    document.getElementById('container') 
); 

Wie Sie sehen können, bin ich Protokollierung der Zustand der Iterator vor und nach this.setState() aufgerufen wird. Aber beide Male protokolliert es die gleiche Nummer. Nach dem ersten Mal, als ich auf den Knopf klickte, rechnete ich damit, 0 und 1 zu loggen, aber beide loggen 0 und 0. Und beim zweiten Klick loggen sie 1 und 1. Also wann wird der Zustand geändert und was genau passiert Hier?

Answer 1

Unter Berufung auf https://reactjs.org/docs/react-component.html#setstate

Denken Sie an setState() als Anfrage anstatt einen sofortigen Befehl Aktualisierung der Komponente. Für eine bessere wahrgenommene Leistung kann React verzögern und dann mehrere Komponenten in einem einzigen Durchgang aktualisieren. Reagieren garantiert nicht, dass die Statusänderungen sofort angewendet werden.

setState() aktualisiert die Komponente nicht immer sofort. Es kann Batch oder verzögern das Update bis später. Dies macht das Lesen von this.state direkt nach dem Aufruf von setState() eine potentielle Falle. Stattdessen verwenden componentDidUpdate oder setState Rückruf (setState(updater, callback))

Die zweiten (optional) Parameter ist eine Callback-Funktion, die ausgeführt wird, sobald setState abgeschlossen ist und das Bauteil neu gerendert:

this.setState({ 
    iterator: this.state.iterator+1 
    }, function(){ 
    console.log(this.state.iterator) 
});