场景
学过react的人都知道,react的setState是异步的,如
state = {
text: "111"
}
handleChange() {
this.setState({
text: "222"
})
console.log(this.state.text) // 111
}
得到的结果,是111,而不是我们期望中的222,而一般我们的解决办法都是,传入第二个回调函数
state = {
text: "111"
}
handleChange() {
this.setState({
text: "222"
}, function() {
console.log(this.state.text) // 222
})
}
第二个回调函数,就会在异步执行完成之后触发。
很多人都觉得,这样的异步操作,使得代码写起来更麻烦的,但是你知道react为什么要把setState设置成异步的吗????
高效地批量更新
在react的中,更新state的操作,即setState,会把修改state的更新操作,放到一个队列中,而不会马上执行。当组件进入可更新state的状态的时候,会在队列中把所有可以更新的state进行更新操作,即实现了 高效地批量更新state
提高性能
举一个简单的例子,有一个对话框组件,假如更新的同步的,那么收到信息的瞬间,就去更新state数据。此时如果有很多信息一直发过来,然后每次收到一条信息,就去同步更新一次,会浪费了好多性能,而且由于一直更新state,导致组件也一直被重新渲染,用户的体验也会很不好。
而更新是异步的话,也仅仅有几毫秒的延迟,用户也几乎感觉不到,并且可以将很多的更新一次性的批量更新,性能也会大大提升