setState 小结

调用 setState 的时候，发生了什么？

在执行setState的时候，React Component将newState存入了自己的等待队列，然后使用全局的批量策略对象 batchingStrategy 来查看当前执行流是否处在 batchUpdate （批量更新）中，如果已经处于更新流中，就将记录了newState 的 React Component 存入 dirtyeComponent 中，如果没有处于更新中，遍历 dirty 中的 component，调用 updateComponent ,进行state 或 props 的更新，刷新 component。

所有的 batchUpdate 功能都是通过执行各种 transaction 实现的。this.setState 调用后，新的 state 并没有马上生效，而是通过 ReactUpdates.batchedUpdate 方法存入临时队列中。当一个 transaction 完成后，才通过 ReactUpdates.flushBatchedUpdates 方法将所有的临时 state merge 并计算出最新的 props 及 state。

transaction实际上做的事情就是将要执行的 method 使用 wrapper 封装起来，用提供的 perform 方法来调用 method。在调用的过程中，会先顺序调用 wrappe r中注册的 initialize 方法，然后执行method方法，最后顺序调用 wrapper 中注册的close方法。initialize 和 close 可以是调用 transaction 的模块自定义的。

transaction

调用 setState 之后发生了什么？

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

---

补充：

1. setState不会立刻改变React组件中state的值；
2. setState通过引发一次组件的更新过程来引发重新绘制；
3. 多次setState函数调用产生的效果会合并。

setState调用引起的React的更新生命周期函数4个函数（比修改prop引发的生命周期少一个componentWillReceiveProps函数），这4个函数依次被调用。

shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate

学习网站链接：

https://undefinedblog.com/what-happened-after-set-state/
https://zhuanlan.zhihu.com/p/25954470
https://yanyinhong.github.io/2017/05/05/How-does-react-work-when-setState/