Что происходит, когда мы используем this.setState() в ReactJS?

Question

Я смущен, когда состояние действительно меняется, когда this.setState() используется в React. Вот мой 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') 
); 

Как вы можете видеть, я протоколирование состояние итератора до и после this.setState() называется. Но оба раза он регистрирует одинаковое число. После первого раза я нажимаю кнопку, я ожидал log 0 и 1 соответственно, но они оба регистрируют 0 и 0. И при втором щелчке они записывают 1 и 1. Итак, когда состояние фактически изменяется и что именно происходит Вот?

Answer 1

Приводя https://reactjs.org/docs/react-component.html#setstate

Думают о setState() как запроса вместо немедленной команды на обновление компонента. Для лучшей воспринимаемой производительности React может задержать его, а затем обновить несколько компонентов за один проход. React не гарантирует немедленного применения изменений состояния.

setState() не всегда сразу обновляет компонент. Он может пакет или отложить обновление до более поздней версии. Это делает чтение this.state сразу после вызова setState() потенциальной ловушки. Вместо этого следует использовать componentDidUpdate или setState обратного вызова (setState(updater, callback))

Второй (необязательный) параметр представляет собой функцию обратного вызова, которая будет выполняться раз SetState завершен, и компонент повторно вынесено:

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