作者 : 墨成
React 版本 :16.4.1
在React启示录里我们说setState是异步的，我们在代码中也展示了这种特性，那么FB的工程师们是如何实现呢，本文将基于React的源码进一步揭开这层面纱。
在介绍之前我们首先看下setState的实现和FB工程师的注释,我简单的作了一些翻译
//ReactBaseClass.js
/**
* Sets a subset of the state. Always use this to mutate
* state. You should treat `this.state` as immutable.
* //我们应该使用这个方法(setState)来改变state，而不是使用this.state(翻译可能跟原文有一点偏差，当表达的意思是这样)
* There is no guarantee that `this.state` will be immediately updated, so
* accessing `this.state` after calling this method may return the old value.
*//setState并不会立即更新，在调用这个方法后拿到的this.state可能还是原来的值
* There is no guarantee that calls to `setState` will run synchronously,
* as they may eventually be batched together. You can provide an optional
* callback that will be executed when the call to setState is actually
* completed.
*//setState不能保证是同步的，他们有可能会批量处理。你可以提供一个可选的回调函数来拿到更改之后的值
* When a function is provided to setState, it will be called at some point in
* the future (not synchronously). It will be called with the up to date
* component arguments (state, props, context). These values can be different
* from this.* because your function may be called after receiveProps but before
* shouldComponentUpdate, and this new state, props, and context will not yet be
* assigned to this.
*//setState第一参数是一个function ,他会在未来的某个时间点执行。在执行这个functon时我们都是拿到的最新的组件信息
*//(比如state,props, context).这些值根尼通过this.state的不一样，因为function实在receiveProps之后在
*//shouldComponentDupdate之前，所以这些值还没更新到当前this指向的这些值
* @param {object|function} partialState Next partial state or function to
* produce next partial state to be merged with current state.
* @param {?function} callback Called after state is updated.
* @final
* @protected
*/
Component.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, callback, 'setState');
};复制代码上面的注释告诉我们：
1.setState()第一参数是function也是异步的
2.function的执行周期是：receiveProps=>function=>shouldComponentUpdate
(prevState, props) => stateChange复制代码如果关于第一参数function的说明还不是很理解，多看几眼，多想想React生命周期，那就会茅塞顿开 .
言归正传，再看看整段代码
Component.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, callback, 'setState');
};复制代码参数：
@param partialState 部分状态复制代码这个参数或许是整个state，或许只是state其中的一部分 ，最终React合并(就是merge).
state = {name:'myName',age:18} => setState({age:16}/*state的一部分*/)=>state={name:'myName',age:16}复制代码其实就是Object.assign(源码:Object.assign({}, prevState, partialState))的理解 .
@param callback 回调函数，后面专门开一篇来讲解复制代码invariant这段代码主要对参数作了一些验证 ，所以 setState()只接受三种类型的参数，比如 object,function和与null 恒等的，比如undefined ,false . 如果你使用这三种判定类型之外的情况，会优雅的提示你错误，比如下面这个代码 :
this.setState(Symbol());复制代码错误信息如下:
this.updater.enqueueSetState(this, partialState, callback, 'setState');复制代码在这里 调用了 this.updater中的enqueueSetState,看着名字就知道这是一个setState的队列（准确的说它是一个链表），而这个 updater
// We initialize the default updater but the real one gets injected by the
// renderer.
this.updater = updater || ReactNoopUpdateQueue;复制代码上面的注释很清楚地告诉你 我们有个默认的初始值，真正的值其实就在renderer的时候注入进来的，在下一篇文章中我会专门针对这个updater进入深入理解，现在我们来了解下这个updater的结构
const classComponentUpdater = {
isMounted,
enqueueSetState(inst, payload, callback) {
const fiber = ReactInstanceMap.get(inst);
const currentTime = requestCurrentTime();
const expirationTime = computeExpirationForFiber(currentTime, fiber);
const update = createUpdate(expirationTime);
update.payload = payload;
if (callback !== undefined && callback !== null) {
if (__DEV__) {
warnOnInvalidCallback(callback, 'setState');
}
update.callback = callback;
}
enqueueUpdate(fiber, update);
scheduleWork(fiber, expirationTime);
},
enqueueReplaceState(inst, payload, callback) {
const fiber = ReactInstanceMap.get(inst);
const currentTime = requestCurrentTime();
const expirationTime = computeExpirationForFiber(currentTime, fiber);
const update = createUpdate(expirationTime);
update.tag = ReplaceState;
update.payload = payload;
if (callback !== undefined && callback !== null) {
if (__DEV__) {
warnOnInvalidCallback(callback, 'replaceState');
}
update.callback = callback;
}
enqueueUpdate(fiber, update);
scheduleWork(fiber, expirationTime);
},
enqueueForceUpdate(inst, callback) {
const fiber = ReactInstanceMap.get(inst);
const currentTime = requestCurrentTime();
const expirationTime = computeExpirationForFiber(currentTime, fiber);
const update = createUpdate(expirationTime);
update.tag = ForceUpdate;
if (callback !== undefined && callback !== null) {
if (__DEV__) {
warnOnInvalidCallback(callback, 'forceUpdate');
}
update.callback = callback;
}
enqueueUpdate(fiber, update);
scheduleWork(fiber, expirationTime);
},
};复制代码总结一下：这个setState其实什么都没做，它只是简单的把这个update操作装入了一个"队列"里(看上去是这样，不是吗？).
那个问题来了，为什么它就是异步的呢？JavaScript不是单线程吗 ？
先抛开React Fiber 架构不谈，我们来聊聊 Javascript的 Event Loop ,大家可以在网上找找关于 Event loop,在这里我重点推荐是 Philip Roberts 在JSConf上关于Eevent loop深情并茂的介绍（YouTube）
那首先大家在网上看到的资料无怪乎把task queue分为microtask和macrotask,同时他们也有个很好听的名字：微任务和宏任务(其实是在外语中他们只是用这个词表示优先级)，宏任务的优先级大于微任务。然后会把setTimeout,setInterval等等归于 macrotask,把promise归于mircotask.
在这里我表示，他们的论点放在单个浏览器，比如说chrome是对的，但是大家想过没有，对Promise的原生态支持是ES6(也有超前意识的浏览器厂商)，实际情况是每个浏览器对他们的处理不一样(每个浏览器的程序员不一样嘛)，大家可以把相同的代码放在不同的浏览器，输出的结果是不一样的
这里你只要记住两点 ：
1.所有的native code回调(window对象上的code)都是 macrotask，比如setTimeout ,Promise,setInterval
2.native code的优先级要大于普通回调函数
在React启示录里我有说我们可以"同步"（这里的同步不是说他直接在stack的调用方式，而是看上去同步拿到了结果）拿到state变化后的值，现在把我们上一节部分代码作一点修改：
changeValue=()=>{
setTimeout(()=>{
this.setState(
{value:'I have a new value by setTimeout'}
);
console.log(this.state.value);
},0)
new Promise((resolve,reject)=>{
resolve();
}).then(()=>{
this.setState(
{value:'I have a new value by promise '}
);
console.log(this.state.value);
});
};
//result:
I have a new value by promise
I have a new value by setTimeout
复制代码这里并没有等待this.setState()队列执行即可获得修改后的值，请务必在自己的代码中执行，因为我说的可能是错的。
事实上，setState到这里已经完成了使命，剩下的所有任务都都交给了这个updater，updater是何方神圣，又是如何工作，它与react 16提出的fiber有什么样的关系 ，reconciler又是什么东西 ？
持续更新中......不要走开，全面了解 react的实现原理，不但可以帮助你更好的使用和优化React ，更可以了解它的实现架构和设计原理，并运用到实际的项目中 .