★ setState

• 当组件的 setState 函数被调用之后，会发生什么 ？
• 传入 setState 函数的第二个参数的作用 ？
• 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 的同步异步问题

• setState 只是在合成事件和钩子函数中是异步的，在原生 addEventListener 绑定事件和 setTimeout 定时器中是同步执行的
• setState 中的异步并不是说内部由异步代码实现，它本身执行的过程还是同步的，只是合成事件和钩子函数调用顺序在更新之前，导致在合成事件和钩子函数中无法立即拿到最新的 state 值从而形成了所谓的 异步，可以通过传入 setState 函数的第二个参数拿到更新后的结果，用于监听更新是否完成
  • 通过 isBatchingUpdates 判断是直接更新还是放到队列中回头再说，isBatchingUpdates 默认为 false，合成事件和钩子函数调用的时候会通过 batchedUpdates 更改 isBatchingUpdates 为 true
• setState 的批量更新优化就是建立在这种 异步 的基础之上，在原生 addEventListener 绑定事件和 setTimeout 定时器中则不会进行批量更新