Question

当在React中使用this.setState（）时状态实际发生变化时，我很困惑。这是我的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（）之前和之后记录迭代器的状态。但无论如何，它都记录了相同的数字。在我第一次单击按钮之后，我希望分别记录0和1，但它们都记录0和0.而在第二次点击时，它们记录1和1.那么状态实际上是什么时候发生变化以及究竟发生了什么这里吗？

Answer 1

引用https://reactjs.org/docs/react-component.html#setstate

将setState()视为请求，而不是立即命令   更新组件。为了获得更好的感知性能，React可能会   延迟它，然后一次更新几个组件。应对   并不保证立即应用状态变化。

setState（）并不总是立即更新组件。有可能   批量或推迟更新，直到稍后。这使得阅读this.state   在调用setState（）之后发生了潜在的陷阱。相反，使用   componentDidUpdate或setState回调（setState(updater, callback)）

第二个（可选）参数是一个回调函数，它将在setState完成并重新呈现组件后执行：

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

当我们在ReactJS中使用this.setState（）时会发生什么？

1 个答案: