React setState

当组件的 setState 函数被调用之后，会发生什么 ？

在代码中调用setState函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。 经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个UI界面。 在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。 在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染

传入 setState 函数的第二个参数的作用 ？

该函数会在 setState 函数调用完成并且组件开始重新渲染的时候被调用，我们可以用该函数来监听渲染是否完成：

this.setState({
    userName: 'protein'
}, () => {
    console.lot('setState has finished and the component has re-rendered.')
})

setState 为什么是异步的 ？

原因：

• 保证内部的一致性：即使 state 同步更新 props 也不是，因为它只有在父组件重新渲染的时候能拿到新的 props
• 性能优化：如果每次 setState 都去做 dom 的更新将会带来巨大的性能消耗，所以需要经过 React 对 state 的所有改变进行合并处理之后，才会去计算新的虚拟dom，再根据最新的虚拟dom去重新渲染真实dom，这是很有必要的。

原理：

• setState 并不是真正意义上的异步操作，它只是模拟了异步的行为 ( 通过 isBatchingUpdates 字段来判断直接更新还是需要暂存 state 进入队列 )
• react 的合成事件和生命周期函数中是受 react 控制的，更新 state 会走异步流程
• 原生事件，setTimeout，setInterval，Promise 等异步操作中，state 会同步更新