根据中的解释docs:
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
using 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)