Reactjs中有setState（）的同步替代方法吗

Question

根据文档中的解释：

setState（）不会立即更改this.state，但会创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。

无法保证对setState的调用的同步操作，并且可能会为提高性能而批量调用。

因此，由于setState()是异步的，因此无法保证其同步性能。是否有替代方案setState()是合时的。

例如

//initial value of cnt:0
this.setState({cnt:this.state.cnt+1})
alert(this.state.cnt);    //alert value:0

由于该alert值是先前的值，因此alert value:1使用的替代方案是什么setState()。

关于Stackoverflow的问题很少，与此问题类似，但是没有哪里我可以找到正确的答案。

Answer 1

正如您从文档中阅读的那样，没有其他替代方法，原因是性能提高。

但是，我假设您要在更改状态后执行一项操作，可以通过以下方法实现此目的：

class MyComponent extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

     x: 1

    };



    console.log('initial state', this.state);

  }



  updateState = () => {

   console.log('changing state');

    this.setState({

      x: 2

    },() => { console.log('new state', this.state); })

  }



  render() {

    return (

      <div>

      <button onClick={this.updateState}>Change state</button>

    </div>

    );



  }

}



ReactDOM.render(

  <MyComponent />,

  document.getElementById("react")

);


<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>