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

  • Z时代
  • 2024-01-10
  • 分类：问答

根据文档中的解释：

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的问题很少，与此问题类似，但是没有哪里我可以找到正确的答案。

回答：

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

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

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>

以上是 Reactjs中有setState（）的同步替代方法吗 的全部内容， 来源链接： utcz.com/qa/398470.html

回到顶部