setState 是异步操作的, 并不会立即更新状态
来源：7-20 加载更多-实现功能
慕姐3903896
2017-05-20
console.log('isLoadingMore', this.state.isLoadingMore )
this.setState({
isLoadingMore: true
})
console.log('isLoadingMore', this.state.isLoadingMore )
this.setState({
isLoadingMore: false
})
console.log('isLoadingMore', this.state.isLoadingMore )看打印出来的结果:
可以看到 setState 并没有立即更新组件状态.
这个问题, 我之前确实遇到过, 所以搜了一些资料:
https://zhuanlan.zhihu.com/p/20328570
然后在<深入react技术栈>这本书里看到了关于 setState 更新组件状态详细的解读.
大意是: setState 通过队列机制实现 state 的更新, 执行 setState 时会将需要更新的 state 合并后放入状态队列, 然后批量更新状态. 而不会立即更新 this.state.
书里讲有触发批量更新的条件, 可惜我看不大懂...
写回答
1回答
-
双越
2017-05-20
setState可以理解为就是异步执行的，不过在咱们的项目中，没有用到这个特性。
你可以考虑一下为何 setState不会立即执行而是批量触发？这肯定还性能有关系，如果一个页面频繁执行很多setState而每次都是立即执行 执行完之后还得去更新视图，这样会导致很慢。因此批量触发可以解决这一问题。
与之类似的还有：第一，在网页插入10个div，不能每个都插入，而是批量插入；第二，window.onscroll 往往会使用节流来提高流程性。等等……
00
相似问题