React setState 调用的原理
在React中，setState方法是用于更新组件状态的重要方法。当setState被调用时，React会对组件进行重新渲染，以反映状态的变化。
具体的执行过程如下：
-
调用
setState入口函数：当你在组件中调用setState方法时，实际上是调用了React组件的setState方法。这个方法在内部充当一个分发器的角色，根据传入的参数，将其分发到不同的功能函数中去。
ReactComponent.prototype.setState = function (partialState, callback) {
this.updater.enqueueSetState(this, partialState);
if (callback) {
this.updater.enqueueCallback(this, callback, 'setState');
}
};
-
将新的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);
}
-
处理更新：在
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;
}
}
-
批处理更新：React会对
setState的调用进行批处理，以提高性能。这意味着React会延迟实际的状态更新，并且在合适的时机进行批量更新，从而避免不必要的重复渲染。 -
触发重新渲染：最后，React会触发组件的重新渲染，以反映状态的变化。这个过程包括调用
render方法来创建新的虚拟DOM，然后使用新的虚拟DOM和旧的虚拟DOM进行对比，最后更新实际的DOM。
总之，setState方法通过触发组件重新渲染来更新状态，它使用批处理和异步更新来优化性能，并且可以接受回调函数用于在状态更新完成后执行额外的操作。
React setState 调用之后发生了什么？是同步还是异步？
在React中，setState方法是用于更新组件状态的重要方法。当setState被调用时，React会将新的状态放入组件的状态队列中，并在适当的时机进行批处理更新，以提高性能。最后，React会触发组件的重新渲染，以反映状态的变化。这个过程是异步的，因为React会对多个setState调用进行批处理，并且延迟实际的状态更新。这种机制有助于提高性能，避免不必要的重复渲染，并且确保在适当的时机进行状态更新和重新渲染。
React setState 调用之后发生了什么？
在React中，setState方法的调用会触发一系列的操作，以更新组件的状态和重新渲染。这个过程可以概括如下：
-
状态更新：当
setState被调用时，React会将新的状态合并到组件的状态中。 -
触发重新渲染：状态更新后，React会触发组件的重新渲染。React会比较新旧虚拟DOM树的差异，并且只更新必要的部分，以最小化DOM操作。
-
生命周期方法调用：在重新渲染之前和之后，相关的生命周期方法（如
shouldComponentUpdate、componentWillUpdate、componentDidUpdate）会被调用。 -
异步更新：
setState的更新是异步的。多个setState调用可能会被合并成单个更新，以提高性能并减少不必要的重复渲染。 -
回调函数执行：如果
setState调用时传递了回调函数，该回调函数会在状态更新完成并且组件重新渲染后被调用。
总体来说，setState调用是异步的，因为React会对多个setState调用进行批处理，并且延迟实际的状态更新。这种机制有助于提高性能，避免不必要的重复渲染，并且确保在适当的时机进行状态更新和重新渲染。
setState 是同步还是异步的
在React中，setState的更新是异步的。这意味着，当你调用setState时，React并不会立即更新组件的状态，而是将新的状态放入一个队列中，然后在适当的时机进行批处理更新。
这种异步更新的机制有助于提高性能，因为React可以将多个setState调用合并成单个更新，从而减少不必要的重复渲染。然而，这也意味着你不能立即在setState后获取更新后的状态，因为setState的更新可能还没有被应用。
如果你需要在setState后立即获取更新后的状态，你可以在setState的第二个参数中传递一个回调函数。这个回调函数会在状态更新完成并且组件重新渲染后被调用，这时你可以获取到最新的状态。
总的来说，setState的更新是异步的，但你可以通过回调函数来获取更新后的状态。文章来源：https://www.toymoban.com/news/detail-853940.html
持续学习总结记录中，回顾一下上面的内容：
React中的setState方法是用于更新组件状态的重要方法。当setState被调用时，React会将新的状态放入组件的状态队列中，并在适当的时机进行批处理更新，以提高性能。最后，React会触发组件的重新渲染，以反映状态的变化。这个过程是异步的，因此连续调用setState不会立即引起多次重新渲染，而是将它们合并成一次更新操作。
在React中，setState的调用会触发一系列的操作。首先，React会将新的状态合并到组件的状态中。然后，React会触发组件的重新渲染，比较新旧虚拟DOM树的差异，并更新必要的部分。在重新渲染之前和之后，相关的生命周期方法会被调用。setState的更新是异步的，因此多个setState调用可能会被合并成单个更新，以提高性能。如果setState调用时传递了回调函数，该回调函数会在状态更新完成并且组件重新渲染后被调用。在React中，setState的更新是异步的。这意味着，当你调用setState时，React并不会立即更新组件的状态，而是将新的状态放入一个队列中，然后在适当的时机进行批处理更新。这种异步更新的机制有助于提高性能，因为React可以将多个setState调用合并成单个更新，从而减少不必要的重复渲染。文章来源地址https://www.toymoban.com/news/detail-853940.html
到了这里，关于前端React篇之React setState 调用的原理、React setState 调用之后发生了什么？是同步还是异步？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
