![的同步替代方案]( "的同步替代方案")
本文介绍了Reactjs 中是否有 setState() 的同步替代方案的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
根据文档中的说明:>
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:
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() 的同步替代方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！