前言
这篇文章主要是为了纪录一些自己对于setState的认识的不断深入的过程。我觉得这过程对我自己来说很有价值，不光是层层递进的了解一个API的执行机制，更对react总体的设计有了更为深入的认识。
第一阶段 初识setState
使用过React的应该都知道，在React中，一个组件中要读取当前状态需要访问this.state，但是更新状态却需要使用this.setState，不是直接在this.state上修改，就比如这样：
//读取状态
const count = this.state.count；
//更新状态
this.setState({count: count + 1})；
//无意义的修改
this.state.count = count + 1;
其实这主要有几点考虑，首先this.state说到底只是一个对象，单纯的去修改一个对象的值是毫无意义的，在React中只有去驱动UI的更新才会有意义，因此虽然我们可以尝试直接改变this.state，但并没有驱动UI的重新渲染，因此这种操作也就毫无意义。也正是由于这个原因，我们就需要使用this.setState来驱动组件的更新过程。
然后在我刚学习React时，我就看见了这段很经典的代码：
function incrementMultiple() {
this.setState({count: this.state.count + 1});
this.setState({count: this.state.count + 1});
this.setState({count: this.state.count + 1});
}
作为一名JSer，我看完就毫不犹豫的想到，这特么不就是count的值加3么，但转眼看了下面的答案，光速打脸，实际的结果是state只增加了1。然后我就不由想到当时没怎么看懂的React文档中的一些话：状态更新可能是异步的，状态更新合并。恩，没毛病，因为异步且会合并，因此这三条语句合并为一条语句了，所以就只执行一次。然后就扭头溜了，并没有去思考一些深层次的问题。
第二阶段 setState理解的进阶
但是随着对React的理解的逐步加深，我开始对setState有了更加深的理解：
首先我意识到this.setState会通过引发一次组件的更新过程来引发重新绘制。也就是说setState的调用会引起React的更新生命周期的四个函数的依次调用：
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
我们都知道，在React生命周期函数里，以render函数为界，无论是挂载过程和更新过程，在render之前的几个生命周期函数，this.state和Props都是不会发生更新的，直到render函数执行完毕后，this.state才会得到更新。（有一个例外：当shouldComponentUpdate函数返回false，这时候更新过程就被中断了，render函数也不会被调用了，这时候React不会放弃掉对this.state的更新的，所以虽然不调用render，依然会更新this.state。）
React的官方文档有提到过这么一句话：
状态更新会合并（也就是说多次setstate函数调用产生的效果会合并）。
起初我对这句话理解并不是很深刻,但按照官方文档的代码示例写了这么一段代码：
function updateName() {
this.setState({Age: '22'})
this.setState({Name: 'srtian'})
}
果然执行结果与以下代码是等价的
function updateName() {
this.setState({Age: '22', Name: 'srtian})
}
于是我将其理解为一个队列，每个this.setState()都会被合并起来，排成一排，到最后一次解决。但对其设计的原因并不理解，只知道这样有利于性能（也是在文档上看到的）。
直到理解上面React生命周期函数的原理后，我才理解了setState关于这个设计的意图。
前面我们提到过，每一次使用setState都会调用一次更新的生命周期，如果每一次this.serState()都调用一次上面那四个生命周期函数，虽然以上四个函数都是纯函数，性能浪费上还好，但render函数会将结果拿去做Virtual DOM比较和更新DOM树，这个就比较费时间。因此，将多个this.setSate进行合并，render函数就能够将合并后的this.setState()的结果一次性的与Virtual DOM比较然后更新DOM树，这样就能够用有效的提升性能。
除此之外，我还认为setState的设计十分巧妙，一般来说只在render函数后才会进行更新this.state。这其实也避免了React16的Fiber可能会产生的一个问题：由于Fiber下的组件更新是可以中断，也就是说在一个组件的更新过程中，可能更新到一半的时候就由于其他原因而中断更新，回去做更重要的事情了，在做完更重要的事情后，再回来更新这个组件，这会导致前面的那些生命周期函数可能会执行多次。因此如果在render之前this.setState()就改变状态的话，很有可能就会导致组件状态的多次更新，从而导致组件状态的混乱。
第三阶段 从源码理解setstate
这是React15.6版本，由于React16变动较大，setState的调用栈发生变动，因此仅供参考。
经历了上面那个阶段，我算是对setState有那么一些理解了，但还是不能理解很多东西比如：this.setState()的是怎么合并的？setState()到底是怎样一种骚操作？...等等。然后我又看见了这段经典的代码：
class Example extends React.Component {
constructor() {
super();
this.state = {
val: 0
};
}
componentDidMount() {
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 1 次 log
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 2 次 log
setTimeout(() => {
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 3 次 log
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 4 次 log
}, 0);
}
render() {
return null;
}
};
恩！按照我多年经验，这波操作我看不懂！
于是硬着头皮打开了React源码，开始一波瞎分析：
首先就是setState了，可以看出它接受两个参数partialState和callback，其中partialState顾名思义就是部分state，起这个名字也能就是想表达它的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表示是否处于批量更新过程
// 最开始默认值为false
if (!batchingStrategy.isBatchingUpdates) {
batchingStrategy.batchedUpdates(enqueueUpdate, component);
return;
}
dirtyComponents.push(component);
if (component._updateBatchNumber == null) {
component._updateBatchNumber = updateBatchNumber + 1;
}
}
// 对_pendingElement, _pendingStateQueue, _pendingForceUpdate进行判断，
// _pendingStateQueue由于会对state进行修改，所以不为空，
// 然后会调用updateComponent方法
performUpdateIfNecessary: function(transaction) {
if (this._pendingElement != null) {
ReactReconciler.receiveComponent(
this,
this._pendingElement,
transaction,
this._context,
);
} else if (this._pendingStateQueue !== null || this._pendingForceUpdate) {
this.updateComponent(
transaction,
this._currentElement,
this._currentElement,
this._context,
this._context,
);
} else {
this._updateBatchNumber = null;
}
},
其中这段代码需要额外注意：
// batchingStrategy是批量更新策略，isBatchingUpdates表示是否处于批量更新过程
// 最开始默认值为false
if (!batchingStrategy.isBatchingUpdates) {
batchingStrategy.batchedUpdates(enqueueUpdate, component);
return;
}
dirtyComponents.push(component);
if (component._updateBatchNumber == null) {
component._updateBatchNumber = updateBatchNumber + 1;
}
上面这段代码的意思就是如果是处于批量更新模式，也就是isBatchingUpdates为true时，不进行state的更新操作，而是将需要更新的component添加到dirtyComponents数组中。
如果不处于批量更新模式，则对所有队列中的更新执行batchedUpdates方法。
然后可以找到了这个batchedUpdates：
var ReactDefaultBatchingStrategy = {
// 也就是上面提到的默认为false
isBatchingUpdates: false,
// 这个方法只有在isBatchingUpdates: false时才会调用
// 但一般来说，处于react大事务中时，会在render中的_renderNewRootComponent中将其设置为true。
batchedUpdates: function(callback, a, b, c, d, e) {
var alreadyBatchingUpdates = ReactDefaultBatchingStrategy.isBatchingUpdates;
ReactDefaultBatchingStrategy.isBatchingUpdates = true;
// The code is written this way to avoid extra allocations
if (alreadyBatchingUpdates) {
return callback(a, b, c, d, e);
} else {
return transaction.perform(callback, null, a, b, c, d, e);
}
},
看到这我总算理解了，当我们调用setState时，最终会通过enqueueUpdate执行state更新，就像上面那样有两种更新的模式，一种是批量更新模式，将组建保存在dirtyComponents;另一种非批量模式，将会遍历dirtyComponents，对每一个dirtyComponents调用updateComponent方法。就像这张图：
至于批量与非批量模式，会通过ReactDefaultBatchingStrategy中的isBatchingUpdates属性来进行判断。在非批量模式下，会立即应用新的state；而在批量模式下，需要更新state的组件会被push 到dirtyComponents，再执行更新。
所以我们再看前面的那坨代码：
class Example extends React.Component {
constructor() {
super();
this.state = {
val: 0
};
}
componentDidMount() {
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 1 次 log
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 2 次 log
setTimeout(() => {
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 3 次 log
this.setState({val: this.state.val + 1});
console.log(this.state.val); // 第 4 次 log
}, 0);
}
render() {
return null;
}
};
就不难看出它的答案是 0, 0, 2, 3。
总结起来就是这样：
- this.setState首先会把state推入pendingState队列中
- 然后将组件标记为dirty
- React中有事务的概念，最常见的就是更新事务，如果不在事务中，则会开启一次新的更新事务，更新事务执行的操作就是把组件标记为dirty。
- 判断是否处于batch update
- 是的话，保存组建于dirtyComponent中，在事务结束的时候才会通过 ReactUpdates.flushBatchedUpdates 方法将所有的临时 state merge 并计算出最新的 props 及 state，然后将其批量执行，最后再关闭结束事务。
- 不是的话，直接开启一次新的更新事务，在标记为dirty之后，直接开始更新组件。因此当setState执行完毕后，组件就更新完毕了，所以会造成定时器同步更新的情况。
另外还有就是updateComponent方法，这也很重要：
{ // 会检测组件中的state和props是否发生变化，有变化才会进行更新;
// 如果shouldUpdateComponent函数中返回false则不会执行组件的更新
updateComponent: function (transaction,
prevParentElement,
nextParentElement,
prevUnmaskedContext,
nextUnmaskedContext,) {
var inst = this._instance;
var nextState = this._processPendingState(nextProps, nextContext);
var shouldUpdate = true;
if (!this._pendingForceUpdate) {
if (inst.shouldComponentUpdate) {
if (__DEV__) {
shouldUpdate = measureLifeCyclePerf(
() => inst.shouldComponentUpdate(nextProps, nextState, nextContext),
this._debugID,
'shouldComponentUpdate',
);
} else {
shouldUpdate = inst.shouldComponentUpdate(
nextProps,
nextState,
nextContext,
);
}
} else {
if (this._compositeType === CompositeTypes.PureClass) {
shouldUpdate =
!shallowEqual(prevProps, nextProps) ||
!shallowEqual(inst.state, nextState);
}
}
}
},
// 该方法会合并需要更新的state，然后加入到更新队列中
_processPendingState: function (props, context) {
var inst = this._instance;
var queue = this._pendingStateQueue;
var replace = this._pendingReplaceState;
this._pendingReplaceState = false;
this._pendingStateQueue = null;
if (!queue) {
return inst.state;
}
if (replace && queue.length === 1) {
return queue[0];
}
var nextState = Object.assign({}, replace ? queue[0] : inst.state);
for (var i = replace ? 1 : 0; i < queue.length; i++) {
var partial = queue[i];
Object.assign(
nextState,
typeof partial === 'function'
? partial.call(inst, nextState, props, context)
: partial,
);
}
return nextState;
}
};
发现它会调用shouldComponentUpdate和componentWillUpdate方法，看到这不由理解了一个定律：不要在shouldComponentUpdate和componentWillUpdate中调用setState。如果在这两个生命周期里调用setState，会造成造成循环调用。
