setState
在 React 中是经常使用的一个 API,但是它存在一些问题,可能会导致犯错,核心原因就是因为这个 API 是异步的。
首先 setState
的调用并不会马上引起 state
的改变,并且如果你一次调用了多个 setState
,那么结果可能并不如你期待的一样。
handle() { // 初始化 `count` 为 0 console.log(this.state.count) // -> 0 this.setState({ count: this.state.count + 1 }) this.setState({ count: this.state.count + 1 }) this.setState({ count: this.state.count + 1 }) console.log(this.state.count) // -> 0 }
第一,两次的打印都为 0,因为 setState
是个异步 API,只有同步代码运行完毕才会执行。setState
异步的原因我认为在于,setState
可能会导致 DOM 的重绘,如果调用一次就马上去进行重绘,那么调用多次就会造成不必要的性能损失。设计成异步的话,就可以将多次调用放入一个队列中,在恰当的时候统一进行更新过程。
第二,虽然调用了三次 setState
,但是 count 的值还是为 1。因为多次调用会合并为一次,只有当更新结束后 state
才会改变,三次调用等同于如下代码
Object.assign( {}, { count: this.state.count + 1 }, { count: this.state.count + 1 }, { count: this.state.count + 1 } )
当然你也可以通过以下方式来实现调用三次 setState
使得 count
为 3
handle() { this.setState((prevState) => ({ count: prevState.count + 1 })) this.setState((prevState) => ({ count: prevState.count + 1 })) this.setState((prevState) => ({ count: prevState.count + 1 })) }
如果你想在每次调用 setState
后获得正确的 state
,可以通过如下代码实现
handle() { this.setState((prevState) => ({ count: prevState.count + 1 }), () => { console.log(this.state) }) }
本文作者:毛超颖
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!