setState()调用原理

React setState调用的原理

setState具体的执行过程如下：

1. 首先调用setState()函数：

ReactComponent.prototype.setState = function(partialState, callback){
  // updater：一个带有形参的函数，返回被更新的状态对象。它可以接收到props和state
  this.updater.enqueueSetState(this, partialState)
  if(callback){
    this.updater.enqueueCallback(this, callback, 'setState')
  }
}

enqueueSetState将新的state放进组件的状态队列里，并调用enqueueUpdate来处理将要更新的实例对象。

enqueueSetState: function (publicInstance, partialState) {
  // 根据 this 拿到对应的组件实例
  var internalInstance = getInternalInstanceReadyForUpdate(publicInstance, 'setState');
  // 这个 queue 对应的就是一个组件实例的 state 数组
  var queue = internalInstance._pendingStateQueue || (internalInstance._pendingStateQueue = []);
  queue.push(partialState);
  //  enqueueUpdate 用来处理当前的组件实例
  enqueueUpdate(internalInstance);
}

setState()最终通过enqueueUpdate更新state。

function enqueueUpdate(component) {
  ensureInjected();
  // 注意这一句是问题的关键，isBatchingUpdates标识着当前是否处于批量创建/更新组件的阶段
  if (!batchingStrategy.isBatchingUpdates) {
    // 若当前没有处于批量创建/更新组件的阶段，则立即更新组件
    batchingStrategy.batchedUpdates(enqueueUpdate, component);
    return;
  }
  // 否则，先把组件塞入 dirtyComponents 队列里，让它“再等等”
  dirtyComponents.push(component);
  if (component._updateBatchNumber == null) {
    component._updateBatchNumber = updateBatchNumber + 1;
  }
}

在enqueueUpdate中通过batchingStrategy的isBatchingUpdates属性来判断当前是否处于批量创建/更新组件的阶段。

batchingStrategy对象可以理解为“锁管理器”。这里的“锁”是指isBatchingUpdates变量。isBatchingUpdates初始值为false，表示并未进行任何批量更新操作。每当React调用batchedUpdate去执行更新动作时，会先把这个锁给锁上（置isBatchingUpdates为true），表明“现在正处于批量更新过程中”。当上锁后，更新需要更新的组件都要在队列中等待下一次批量更新。

setState()将对组件state的更新排入队列，并通知React需要使用更新后的 state重新渲染此组件及其子组件。你需要将setState()视为请求而不是立即更新state（可能为异步的！！！）。因为React会将多次的setState()放在一起一并执行，这样可以提升效率，减少页面渲染次数。

因为setState()并不总是立即更新state，可能会推迟更新。这导致在调用setState()后立即读取this.state有可能会拿到未更新之前的state。为了解决这个问题，我们可以使用componentDidUpdate或setState(updater, callback)的回调函数，保证在state更新后再执行。

总结：setState()用于更新状态，它接受两个参数，第一个参数可以传入一个对象，也可以传入一个updater函数。传入的对象代表需要更新的状态及状态值。updater为一个带有形参的函数，返回被更新的状态对象，可以接收到state和props；第二个参数是一个可选的回调函数，在状态更新完后进行回调。setState()并不会立即执行状态的更新，而更像是更新状态请求。

1. 在调用setState()后React会调用enqueueSetState()方法将需要更新的state入队。
2. 接着调用enqueueUpdate方法里面的batchingStrategy.isBatchingUpdates属性判断当前是否处理批量更新的阶段。若处于，则将需要更新state的组件放入dirtyComponent队列中等待下一次批量更新；若不处于则立即更新组件。