本文摘自PHP中文网，作者不言，侵删。
本篇文章给大家带来的内容是关于react的setSate的异步问题的分析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在我们阅读文档的时候，大多都说react的setState是异步的，可是它真的是异步的吗？如果是，那我们还可以猜想：那可以不可以同步？那什么时候需要异步，什么时候需要同步呢？
我们先来看下react的官方对setSate的说明：
将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能，React可能会推迟它，稍后会一次性更新这些组件。React不会保证在setState之后，能够立刻拿到改变的结果。
一个很经典的例子：
1 2 3 4 5 | componentDidMount(){
this.setState({count: state.count + 1});
console.log(this.state.count)
}
|
如果你熟悉react，你一定知道最后的输出结果是0，而不是1。
我们再来看一个例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | class Demo extends Component {
constructor(props) {
super(props);
this.state = { number: 0 };
}
render() {
return <button ref="button" onClick={this.onClick.bind(this)}>点我</button>;
}
componentDidMount() {
this.refs.button.addEventListener(
"mousedown",
this.onClick.bind(this)
);
setTimeout(this.onClick.bind(this), 1000);
}
onClick(event) {
if (event) {
console.log(event.type);
} else {
console.log("timeout");
}
console.log("prev state:", this.state.number);
this.setState({
number: this.state.number + 1
});
console.log("next state:", this.state.number);
}
}
export {Demo};
|
在这个组件中采用3中方法更新state
1 2 3 | 1.在p节点中绑定onClick事件
2.在componentDidMount中手动绑定mousedown事件
3.在componentDidMount中使用setTimeout调用onClick
|
在点击组件后，你可以猜到结果吗？输出结果是：
1 2 3 4 5 6 7 8 9 | timeout
prev state: 0
next state: 1
mousedown
prev state: 1
next state: 2
click
prev state: 2
next state: 2
|
结果似乎有点出人意料，三种方式只有在p上绑定的onClick事件输出了可以证明setState是异步的结果，另外两种方式显示setState似乎是同步的。
总结：
1.在组件生命周期中或者react事件绑定中，setState是通过异步更新的。
2.在延时的回调或者原生事件绑定的回调中调用setState不一定是异步的。
这个结果并不说明setState异步执行的说法是错误的，更加准确的说法应该是setState不能保证同步执行。
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！
以上就是react的setSate的异步问题的分析的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
javascript输出语句有哪些
canvas波浪效果的实现代码
一起看看 鸿蒙 javascript gui 技术栈
c和javascript的区别是什么
javascript弱类型什么意思
javascript中调用函数的方法有哪些
深入浅析javascript中的快速排序
javascript怎么保留两位小数
javascript预编译做了啥
资源合并与压缩的优化方法介绍
更多相关阅读请进入《react.js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » react的setSate的异步问题的分析
