React-setState执行过程(为什么不会同步更新组件)

一、setState 为什么不会同步更新组件？

• setState 不会立刻改变React组件中state的值.
• setState 通过触发一次组件的更新来引发“重绘”.
• 多次 setState 函数调用产生的效果会合并。

这里的“重绘”指的是：引起 React 的更新生命周期函数4个函数：

• shouldComponentUpdate（被调用时this.state没有更新；如果返回了false，生命周期被中断，虽然不调用之后的函数了，但是state仍然会被更新）
• componentWillUpdate（被调用时this.state没有更新）
• render（被调用时this.state得到更新）
• componentDidUpdate

如果每一次 setState 调用都走一圈生命周期，会带来性能的问题，特别是render函数返回的结果会拿去做Virtual DOM比较和更新DOM树.

目前React会将setState的效果放在队列中，积攒着一次引发更新过程。

为的就是把 Virtual DOM 和 DOM 树操作降到最小，用于提高性能。

二、setState执行过程

1.流程图

流程图：来源

• partialState：setState传入的第一个参数，对象或函数
• _pendingStateQueue：当前组件等待执行更新的state队列
• isBatchingUpdates：react用于标识当前是否处于批量更新状态，所有组件公用
• dirtyComponent：当前所有处于待更新状态的组件队列
• transcation：react的事务机制，在被事务调用的方法外包装n个waper对象，并一次执行：waper.init、被调用方法、waper.close
• FLUSH_BATCHED_UPDATES：用于执行更新的waper，只有一个close方法

2.执行过程

1. 将setState传入的partialState参数存储在当前组件实例的state暂存队列中。
2. 判断当前React是否处于批量更新状态，如果是