setState相关

- setState相关

1. setState是同步执行的，但是state不一定同步更新
2. 多次执行setState，内部会合并 ，进行批量操作，类似于Object.assgin，相同的key会覆盖前面的。
3. 在原生事件，setTimeout、setInterval、Promise等异步操作中，state会同步更新
4. setState(object, callback)，对象式object为nextState；
5. setState(function, callback)，函数式，function为(prevState, props) => stateChange
6. callback为state更新后的回调，此时可以取得更新后的回调

setState基本过程

它会引起react的更新生命周期的4个函数执行：shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate，直到render被调用时，this.state才被更新。

setState批量更新过程

react生命周期和事件执行前后都有相应的钩子，分别是pre钩子和post钩子，pre会调用batchedUpdate方法，将isBatchingUpdates变量置为true，开启批量更新，而post钩子会置为false。原生事件和异步操作中，不会执行pre钩子，所以不会批量更新

当调用this.setState()时，新值存入pending队列，—>判断是否处于batch update，是的话保存在dirtyComponent中；不是遍历所有dirtyComponent，调用updateComponent，更新pending state or props

缺点：

1. setState会循环引用：shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate等生命周期函数会被依次调用，如果在后面4个方法中调用了setState，会造成循环调用，导致内存溢出而奔溃。
2. 会引起不必要的渲染：可以通过shouldComponentUpdate解决；
3. 不能有效管理组件中所有状态，因为某些状态和视图没有关系，state中应该保存与渲染相关的状态，与渲染无关的直接保存为实例属性
4. setState类似于Object.assgin，只会覆盖，不会减少原状态；replaceState完全替换原状态，相当于赋值。

- :star:​setState同步异步问题

• setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。
• setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
• setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。