Reactjs 中是否有 setState() 的同步替代方案 [英] Is there a synchronous alternative of setState() in Reactjs

问题描述

根据文档中的说明:><块引用>

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换.调用此方法后访问 this.state 可能会返回现有值.

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

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

例如

//cnt的初始值:0this.setState({cnt:this.state.cnt+1})警报(this.state.cnt)；//警报值:0

由于 alert 值是以前的值，那么使用 setState() 给出 alert value:1 的替代方法是什么.>

Stackoverflow 上有几个问题与此问题类似，但我找不到正确答案.

解决方案

正如您从文档中所读到的，没有同步替代方案，所描述的原因是性能提升.

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

class MyComponent 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {×:1};console.log('初始状态', this.state);}更新状态 = () =>{console.log('改变状态');this.setState({×:2},() =>{ console.log('新状态', this.state);})}使成为() {返回 (<div><button onClick={this.updateState}>改变状态</button>

);}}ReactDOM.render(<我的组件/>,document.getElementById("反应"));

<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>

According to the explaination in the docs:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

So since setState() is asyncronous and there is no guarantee about its synchronous performance. Is there an alternative of setState() that is syncronous.

For example

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

Since the alert value is previous value so what is the alternative that will give alert value:1 using setState().

There are few questions on Stackoverflow which is similar to this question but no where I am able to find the correct answer.

解决方案

As you have read from the documentation, there is NO sync alternative, reason as described is performance gains.

However I presume you want to perform an action after you have changed your state, you can achieve this via:

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() 的同步替代方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！