React | setState，你到底想怎么样？！

使用过React的小伙伴们，面试中经常会被问到SetState。

各种角度来探测你对setState的理解，认知！有时候可能面试紧张到不知所云，有时候可能压根儿不知道面试官想考你什么，总体来说，还是对setState没有驾轻就熟、玩转自如的程度（本着从自身出发找问题的原则才会进步，毕竟。。。面试机会错过就很难补救了）

结合面试问题，对setState做一个阐述～

1.setState()之后发生了什么？

先盗一张常见的解析图

在React的setState函数实现中，会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 还是放到队列 中。isBatchingUpdates 变量默认是false，也就表示setState会同步更新this.state，但是有一个函数batchedUpdates会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state。

总结：由 React 控制的事件处理过程 setState 不会同步更新 this.state！
也就是说，在 React 控制之外的情况， setState 会同步更新 this.state！

2.具体生命周期函数中执行setState会发生什么？

无意义使用：componentWillMount（state会合并到初始this.state中），componentWillUnmount（组件卸载改变state无意义）；
有条件使用：componentDidUpdate（更新完再次触发某条件进行再更新，需控制条件）；
禁止使用：componentWillUpdate，shouldComponentUpdate；（更新未完成状态下持续触发更新会导致页面一直嵌套在更新逻辑中，崩溃）
正常使用：componentWIllReceiveProps（合并state，等render时统一更新），componentDidMount（正常触发更新流程）。

3.componentDidMount中setState后直接console出this.state的结果如何？

因为此时isBatchingUpdates处于true状态下，所以setState只是收集合并state，当前打印的还是未改变的this.state。
但是，如果是像原生事件（如addEventListener）或setTimeout、setInterval这样的异步执行后的setState将会直接更新this.state。此时打印的this.state将会输出更新后的state。