setState是异步的,对于这个我们随便测试一些就知道的,关于为什么是异步的可以参考博客的一些见解。
我们翻开react源码(version:16.3.2), 首先是 setState部分,看到这里接受两个参数partialState (局部状态,限定只有对象和函数可以作为第一个参数), callback
Component.prototype.setState = function (partialState, callback) { !(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null) ? invariant(false, 'setState(...): takes an object of state variables to update or a function which returns an object of state variables.') : void 0; this.updater.enqueueSetState(this, partialState, callback, 'setState'); };
然后是更新部分enqueueSetState 函数
enqueueSetState: function (instance, partialState, callback) {
var fiber = get(instance);
callback = callback === undefined ? null : callback;
{
warnOnInvalidCallback$1(callback, 'setState');
}
var expirationTime = computeExpirationForFiber(fiber);
var update = {
expirationTime: expirationTime,
partialState: partialState,
callback: callback,
isReplace: false,
isForced: false,
capturedValue: null,
next: null
};
insertUpdateIntoFiber(fiber, update);
scheduleWork(fiber, expirationTime);
}
function insertUpdateIntoFiber(fiber, update) {
ensureUpdateQueues(fiber);
var queue1 = q1;
var queue2 = q2;
// Warn if an update is scheduled from inside an updater function.
{
if ((queue1.isProcessing || queue2 !== null && queue2.isProcessing) && !didWarnUpdateInsideUpdate) {
warning(false, 'An update (setState, replaceState, or forceUpdate) was scheduled ' + 'from inside an update function. Update functions should be pure, ' +
'with zero side-effects. Consider using componentDidUpdate or a ' + 'callback.');
didWarnUpdateInsideUpdate = true;
}
}
// If there's only one queue, add the update to that queue and exit.
if (queue2 === null) {
insertUpdateIntoQueue(queue1, update);
return;
}
// If either queue is empty, we need to add to both queues.
if (queue1.last === null || queue2.last === null) {
insertUpdateIntoQueue(queue1, update);
insertUpdateIntoQueue(queue2, update);
return;
}
// If both lists are not empty, the last update is the same for both lists
// because of structural sharing. So, we should only append to one of
// the lists.
insertUpdateIntoQueue(queue1, update);
// But we still need to update the `last` pointer of queue2.
queue2.last = update;
}
待续。。。
组件如下
import React, { Component } from 'react';
import './App.css';
class App extends Component {state = {count: 0}countChange = () => {this.setState({count: this.state.count + 1})this.setState({count: this.state.count + 1})console.log('count change')}countChange2 = () => {this.setState(preState => ({count: preState.count + 1}))this.setState(preState => ({count: preState.count + 1}))console.log('count change2')}UNSAFE_componentWillMount() {console.log('~~')}render() {return (<div className="App"><p>{this.state.count}</p><button onClick={this.countChange}>加一</button><button onClick={this.countChange2}>加一</button></div>);}}class App2 extends Component {render() {return <div><App></App></div>}}
export default App2;
测试中在setState中分别使用 对象参数和函数作为参数,结果说明 函数作为参数的方式是准确的,猜想,主要是对象的值已经确定了,而用使用函数是使用的preState作为参数,这个参数是在回调执行的时候传递下来的,所以是准确(在一个函数調用里面多次this.setState的情况下)。在第一种情况下面setState第二个参数是回调函数~在回调函数中使用this.state.count中获取也是对的。