(精华2020年5月27日更新) react基础篇 setstate原理详解

先上张图

代码

// partialState 部分state
ReactComponent.prototype.setState = function (partialState, callback) {invariant(typeof partialState === 'object' ||typeof partialState === 'function' ||partialState == null,'setState(...): takes an object of state variables to update or a ' +'function which returns an object of state variables.',);this.updater.enqueueSetState(this, partialState);if (callback) {this.updater.enqueueCallback(this, callback, 'setState');}
};
enqueueSetState: function (publicInstance, partialState) {if (__DEV__) {ReactInstrumentation.debugTool.onSetState();warning(partialState != null,'setState(...): You passed an undefined or null state object; ' +'instead, use forceUpdate().',);}var internalInstance = getInternalInstanceReadyForUpdate(publicInstance,'setState',);if (!internalInstance) {return;}var queue =internalInstance._pendingStateQueue ||(internalInstance._pendingStateQueue = []);queue.push(partialState);enqueueUpdate(internalInstance);
}// 通过enqueueUpdate执行state的更新
function enqueueUpdate(component) {ensureInjected();// batchingStrategy批量更新的策略 // isBatchingUpdates是否处于批量更新 最开始是默认falseif (!batchingStrategy.isBatchingUpdates) {batchingStrategy.batchedUpdates(enqueueUpdate, component);return;}// 如果isBatchingUpdates为true的话 不进行state的更新操作 而是将需要更新的component添加到dirtyComponents数组中去dirtyComponents.push(component);if (component._updateBatchNumber == null) {component._updateBatchNumber = updateBatchNumber + 1;}
}
// _pendingStateQueue
// 会调用updateComponent方法
performUpdateIfNecessary: function (transaction) {if (this._pendingElement != null) {ReactReconciler.receiveComponent(this,this._pendingElement,transaction,this._context,