关于react中的state整理

react怎么检测到数据的变化？

react状态变化只能通过setState()，调用setState()就会更新状态重新渲染dom

为什么不直接更新state？

1. 如果试图直接更新state，则不会重新渲染组件
2. 需要使用setState()方法去更新state，它调度对组件state对象的更新，组件通过重新渲染来响应

react中，在执行setState()方法后发生了什么？

咱们可以将“render”分为两个步骤：

1. 虚拟DOM渲染：

当render方法被调用时，它会返回一个新的组件的虚拟DOM结构。当调用setState()时，render会被再次调用因为默认情况下shouldComponentUpdate总会返回true，所以默认情况下react是没有优化的。

     2.  原生DOM渲染：

react只会在虚拟DOM中修改真实DOM节点，而且修改的次数非常少，优化了真实DOM的变化，使得react变得更快。

setState()是同步的还是异步的？

看setState具体的执行位置：

1. 在react控制的回调函数中【异步】：生命周期钩子/react事件回调
2. 非react控制的异步回调函数中【同步】：定时器回调/原生事件监听回调/promise回调

setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的“异步”，咱们也可以通过第二个参数setState(partialState,callback)中的callback拿到更新后的结果，该callback接收上一个state的值和当前的props，并返回一个新的状态。

setState的批量更新优化也是建立在“异步”（合成事件、钩子函数）的基础上。

在原生事件和setTimeout中不会批量更新，在“异步”中如果对同一个值进行多次setState，setState的批量更新政策会对其进行覆盖，取最后一次的执行，如果是同时setState多个不同的值，在更新时会对其进行合并批量更新。

setState为什么会进行异步操作？

1. 保持内部一致性：props的更新是同步的，因为render父组件时，传入子组件的props才会发生变化，为了保持数据的一致性，state也不直接更新，都是flush时才更新。
2. 将state的更新延缓到最后批量合并再去渲染对应用的性能优化是具有极大好处的，如果每次的状态改变都回去重新渲染真实的DOM，将会带来巨大的性能消耗。
3. 立即更新回来视觉上的不适应，比如在页面打开的时候，多个请求发布导致频繁更改Loading,会导致Loading图标闪烁。

关于异步的setState()

1. 多次调用，怎么处理？

setState({}):合并更新一次状态，只调用一次render()更新界面---状态更新和页面更新都合并了

setState(fn):更新多次状态，但只调用一次render()更新页面---状态更新没有合并，但界面更新合并了

    2. 如何得到异步更新后的状态数据？

在setState()的callback回调函数中。