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

因为警报值是以前的值，所以什么是替代方案，将给予警报值：1使用setState（）。

Stackoverflow上有几个问题与这个问题相似，但没有我能找到正确答案的地方。

Answer 1

如果需要这样做，我建议在setState函数中使用回调函数（我也建议使用setState函数）。

状态更新后将调用回调。

例如，你的例子是

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

根据这里的留档：https://facebook.github.io/react/docs/react-component.html#setstate

注意：官方文档说，“通常我们建议使用componentDidUpdate（）来代替这种逻辑。”

Answer 2

您可以将setState包装在返回promise的函数中，然后将此函数与wait关键字一起使用，以使代码等待状态被应用。

就个人而言，我永远不会在实际代码中这样做，相反，我只会将状态更新后希望执行的代码放在setState回调中。

这是一个例子。

class MyComponent extends React.Component {

    function setStateSynchronous(stateUpdate) {
        return new Promise(resolve => {
            this.setState(stateUpdate, () => resolve());
        });
    }

    async function foo() {
        // state.count has value of 0
        await setStateSynchronous(state => ({count: state.count+1}));
        // execution will only resume here once state has been applied
        console.log(this.state.count);  // output will be 1
    }
} 

在foo函数中，wait关键字导致代码执行暂停，直到解决了由setStateSynChronous返回的promise，这只发生在调用传递给setState的回调时，这只发生在状态已应用。因此，只有在应用了状态更新后，执行才会到达console.log调用。

异步/等待的文档：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

Answer 3

正如您从留档中读到的，没有同步替代方案，原因是性能提高。

但是，我假设您希望在更改状态后执行操作，您可以通过以下方式实现：

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>