react之剖析setState

react是通过state管理组件，state的变化会导致组件的更新，而state的变化则是通过setState（）方法控制。state具体指代：展示在界面中的component的状态

state is a reference to the component state at the time the change is being applied

setState目的

setState方法会重新调用组件的render方法，实现组件的更新。需要注意的是setState方法是异步更新state的值。

setState（）

setState(updater[, callback])

第一个参数：updater是一个函数；可替换为一个对象（常用）

(state, props) => stateChange

例如：

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});
this.setState({ counter: 3 });

第二个参数：可选的回调函数，当setState（）完成 component re-rendered之后调用
setState（）函数可接受函数或者对象作为参数

setState工作原理

• setState队列机制更新state
• 多次调用setState时，react内部会合并处理
• 调用setState时，state中的值会浅复制合并

将setState（）看做一个队列，React不能保证立即执行命令，即setState（）不能保证立即更新state的值，这与setState的调用栈有关。

Think of setState() as a request rather than an immediate command to update the component

state变化基于之前的state

handleClickOnLikeButton () {
    console.log(this.state.isLiked)
    this.setState({
      isLiked: !this.state.isLiked
    })
    console.log(this.state.isLiked)
  }
// 打印的值是相同的

multiple calls during the same cycle may be batched together.

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)   // 实际只会增加一次

this.setState((state) => {
  return {quantity: state.quantity + 1};
});   // 会一直累加

setState调用栈

setState（）方法到实际渲染组件中间做了些什么，具体是怎么改变state的值？
setState（newState）改变state的值，将newSate存入更新队列，合并更新队列，如果存在 _pendingElement、_pendingStateQueue和_pendingForceUpdate，则更新组件。如下图所示

setState简单调用栈

setState（）最终是通过enqueueUpdate执行state的更新,enqueueUpdate源代码如下

function enqueueUpdate(component) { 
   ensureInjected(); 
   // 如果不处于批量更新模式，则调用batchedUpdates方法更新组件
  if (!batchingStrategy.isBatchingUpdates) { 
     batchingStrategy.batchedUpdates(enqueueUpdate, component); 
     return; 
   } 
   // 如果处于批量更新模式，则将该组件保存在 dirtyComponents 数组中
   dirtyComponents.push(component); 
 } 

batchedUpdates方法是batchingStrategy的其中一个属性，batchingStrategy源代码如下：

var ReactDefaultBatchingStrategy = { 
   isBatchingUpdates: false, 
   batchedUpdates: function(callback, a, b, c, d, e) { 
     var alreadyBatchingUpdates = ReactDefaultBatchingStrategy.isBatchingUpdates; 
     ReactDefaultBatchingStrategy.isBatchingUpdates = true; 
/* 
* isBatchingUpdates为true时，对所有队列中的更新执行 batchedUpdates 方法，
*  否则将调用setState的组件（当前组件）放入dirtycomponents数组中
*/
     if (alreadyBatchingUpdates) { 
       callback(a, b, c, d, e); 
     } else { 
       transaction.perform(callback, null, a, b, c, d, e); 
     } 
 }, 
} 

例子

思考以下面代码的输出

class Example extends Component { 
   constructor() { 
     super(); 
     this.state = { 
       val: 0 
     }; 
   } 
   componentDidMount() {
     this.setState({val: this.state.val + 1}); 
     console.log(this.state.val); // 第 1 次输出
     this.setState({val: this.state.val + 1}); 
     console.log(this.state.val); // 第 2 次输出

     setTimeout(() => { 
       this.setState({val: this.state.val + 1}); 
       console.log(this.state.val); // 第 3 次输出
       this.setState({val: this.state.val + 1}); 
      console.log(this.state.val); // 第 4 次输出
     }, 0); 
 } 
   render() { 
     return null; 
   } 
} 

输出为：0,0,2,3
componentDidMout（）前2次setState时，batchingStrategy的 isBatchingUpdates 已经被设为 true，所以两次 setState 的结果并没有立即生效，而被存入dirtyComponents数组中，所以前2次打印的值均为0；setTimeout 中的两次 setState ，因为没有前置的 batchedUpdate 调用，所以batchingStrategy 的 isBatchingUpdates 标志位是 false，也就导致了新的 state 立马生效，没有走到 dirtyComponents 分支（调用栈图），即setTimeout 中第一次执行 setState 时，this.state.val为 1，而 setState 完成后打印时 this.state.val 变成了 2。第二次的 setState 同理