前端React篇之React setState 调用的原理、React setState 调用之后发生了什么？是同步还是异步？

目录

• React setState 调用的原理
• React setState 调用之后发生了什么？是同步还是异步？
• • React setState 调用之后发生了什么？
  • setState 是同步还是异步的

React setState 调用的原理

在React中，setState方法是用于更新组件状态的重要方法。当setState被调用时，React会对组件进行重新渲染，以反映状态的变化。

具体的执行过程如下：

1. 调用setState入口函数：当你在组件中调用setState方法时，实际上是调用了React组件的setState方法。这个方法在内部充当一个分发器的角色，根据传入的参数，将其分发到不同的功能函数中去。

ReactComponent.prototype.setState = function (partialState, callback) {
  this.updater.enqueueSetState(this, partialState);
  if (callback) {
    this.updater.enqueueCallback(this, callback, 'setState');
  }
};

2. 将新的state放入状态队列：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);
}

3. 处理更新：在enqueueUpdate方法中，React会检查当前是否正在进行批量更新。如果是，那么组件会被添加到dirtyComponents队列中，等待下一次的批量更新。如果不是，那么React会立即开始批量更新。

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;
  }
}

4. 批处理更新：React会对setState的调用进行批处理，以提高性能。这意味着React会延迟实际的状态更新，并且在合适的时机进行批量更新，从而避免不必要的重复渲染。

5. 触发重新渲染：最后，React会触发组件的重新渲染，以反映状态的变化。这个过程包括调用render方法来创建新的虚拟DOM，然后使用新的虚拟DOM和旧的虚拟DOM进行对比，最后更新实际的DOM。

总之，setState方法通过触发组件重新渲染来更新状态，它使用批处理和异步更新来优化性能，并且可以接受回调函数用于在状态更新完成后执行额外的操作。

React setState 调用之后发生了什么？是同步还是异步？

在React中，setState方法是用于更新组件状态的重要方法。当setState被调用时，React会将新的状态放入组件的状态队列中，并在适当的时机进行批处理更新，以提高性能。最后，React会触发组件的重新渲染，以反映状态的变化。这个过程是异步的，因为React会对多个setState调用进行批处理，并且延迟实际的状态更新。这种机制有助于提高性能，避免不必要的重复渲染，并且确保在适当的时机进行状态更新和重新渲染。

React setState 调用之后发生了什么？

在React中，setState方法的调用会触发一系列的操作，以更新组件的状态和重新渲染。这个过程可以概括如下：

1. 状态更新：当setState被调用时，React会将新的状态合并到组件的状态中。

2. 触发重新渲染：状态更新后，React会触发组件的重新渲染。React会比较新旧虚拟DOM树的差异，并且只更新必要的部分，以最小化DOM操作。

3. 生命周期方法调用：在重新渲染之前和之后，相关的生命周期方法（如shouldComponentUpdate、componentWillUpdate、componentDidUpdate）会被调用。

4. 异步更新：setState的更新是异步的。多个setState调用可能会被合并成单个更新，以提高性能并减少不必要的重复渲染。

5. 回调函数执行：如果setState调用时传递了回调函数，该回调函数会在状态更新完成并且组件重新渲染后被调用。

总体来说，setState调用是异步的，因为React会对多个setState调用进行批处理，并且延迟实际的状态更新。这种机制有助于提高性能，避免不必要的重复渲染，并且确保在适当的时机进行状态更新和重新渲染。

setState 是同步还是异步的

在React中，setState的更新是异步的。这意味着，当你调用setState时，React并不会立即更新组件的状态，而是将新的状态放入一个队列中，然后在适当的时机进行批处理更新。

这种异步更新的机制有助于提高性能，因为React可以将多个setState调用合并成单个更新，从而减少不必要的重复渲染。然而，这也意味着你不能立即在setState后获取更新后的状态，因为setState的更新可能还没有被应用。

如果你需要在setState后立即获取更新后的状态，你可以在setState的第二个参数中传递一个回调函数。这个回调函数会在状态更新完成并且组件重新渲染后被调用，这时你可以获取到最新的状态。

总的来说，setState的更新是异步的，但你可以通过回调函数来获取更新后的状态。

持续学习总结记录中，回顾一下上面的内容：
React中的setState方法是用于更新组件状态的重要方法。当setState被调用时，React会将新的状态放入组件的状态队列中，并在适当的时机进行批处理更新，以提高性能。最后，React会触发组件的重新渲染，以反映状态的变化。这个过程是异步的，因此连续调用setState不会立即引起多次重新渲染，而是将它们合并成一次更新操作。
在React中，setState的调用会触发一系列的操作。首先，React会将新的状态合并到组件的状态中。然后，React会触发组件的重新渲染，比较新旧虚拟DOM树的差异，并更新必要的部分。在重新渲染之前和之后，相关的生命周期方法会被调用。setState的更新是异步的，因此多个setState调用可能会被合并成单个更新，以提高性能。如果setState调用时传递了回调函数，该回调函数会在状态更新完成并且组件重新渲染后被调用。在React中，setState的更新是异步的。这意味着，当你调用setState时，React并不会立即更新组件的状态，而是将新的状态放入一个队列中，然后在适当的时机进行批处理更新。这种异步更新的机制有助于提高性能，因为React可以将多个setState调用合并成单个更新，从而减少不必要的重复渲染。