Question

请查看以下代码。我试过在另一个之下调用setState。从count的第二次调用返回的setState似乎始终设置为this.state.count。在这里，它始终分配有3

    class Counter extends React.Component {
    constructor(props){
        super(props);
        this.handleReset = this.handleReset.bind(this);
        this.state = {
            count : 0
        };
    }

    handleReset() {
        this.setState(() => {
            return {
                count: 1
            }
        });
        this.setState(() => {
            return {
                count: 3
            }
        });
    }
    render() {
        return (
            <div> 
                <h1>Count:{this.state.count}</h1>
                <button onClick={this.handleReset}>reset</button>
            </div>
        );
    }
  }
  ReactDOM.render(<Counter />, document.getElementById('app'));

Answer 1

根据React文档，它可以是异步的。

React可以将多个setState（）调用批处理为单个更新以提高性能。因为this.props和this.state可以异步更新，所以你不应该依赖它们的值来计算下一个状态

(original source, and correct code example)

Answer 2

setState是异步的。您可以将回调作为第二个参数传递，并查看更新后的状态。

this.setState({ count: 5 }, () => {
  console.log(this.state.count) // 5
})

react.js的this.setState（）是同步还是异步？

2 个答案: