React的setState机制

React中最常用，控制状态的API，要属setState

但是，有些时候，setState有时会产生意料之外的结果，让人摸不到头脑。

这不得不说setState的一些秘密。

为什么要有setState

首先，this.state.demo = 1，也是可以修改state的，但是，为什么要用setState呢？

这和生命周期有关，也就是说，setState会重新触发render渲染，直接赋值则不会。

也就是，在setState时，偷偷对组件进行了update。

setState的诡异

当你在循环中调用时

当你setState后立即获取state时

你都会发现，跟你的预期并不相符

为什么呢

效率，一直是前端框架关注的问题（虽然开发者不总是关注），控制渲染次数是最需要关注的。但是一些开发者，或者某些情况，总是会造成setState的频繁调用，如果完全按照调用来进行更新，那一定会造成效率的下降。

于是，React在setState后，会有一段等待时间，然后将这段时间的修改进行整合，对同一个值得修改，以最后的为准

这就造成了，当你setState后，并不会马上获取到新值，因为还在等待时间。

循环也不会生效，因为被整合了。

怎么办呢

好在，setState有个隐藏用法，就是不传{}，而是传一个function，如果这么做的话

this.setState(prevState => {
      return { ...prevState, [key]: value}
})

就会避免循环失效的问题，但是延迟的问题依旧存在。

这是因为，当参数是一个方法时，setState总会等待上一个完成，然后才进行下一个，如此就理清了顺序。