react里有updateQuque和事務機的概念，你可以了解下。因為react本身的容錯機制做得很好，如果你做了setState后進入生命周期時又觸發(fā)setState的操作，react不會報錯，反而會推進下一個batchUpdate中，并標記一系列dirtyComp，在后續(xù)的事物周期再次處理

給你貼preact源碼

function setState(state, callback) {
    let s = this.state;
    if (!this.prevState) this.prevState = extend({}, s);
    extend(s, typeof state==='function' ? state(s, this.props) : state);
    if (callback) this._renderCallbacks.push(callback);
    enqueueRender(this);
}

function enqueueRender(component) {
    if (!component._dirty && (component._dirty = true) && items.push(component)==1) {
        (options.debounceRendering || defer)(rerender); // 異步呀
    }
}

完

題主看這篇文章：

https://zhuanlan.zhihu.com/p/...

同道中人。

之前知道setState是異步，但不知道其內部機制以及render觸發(fā)的時機。以此去閱讀源碼，可惜我還沒能摸清細節(jié)就迎來了Fiber更新，閱讀難度驟然上升，直至今天仍沒全部搞懂，但是對大體的機制有一些自己的了解，這里拋磚引玉，談談個人看法，同時希望能有更了解內部機制的大神來談談，比如司徒正美。

=======================================================

首先明確“異步”指的是“并非每次setState都會觸發(fā)re-render”。實際上樓上的回答已經涉及到了實現(xiàn)原理，即setState本質上是更新一個隊列，然后在后續(xù)邏輯中根據(jù)隊列內容計算state,觸發(fā)更新。

以class組件的更新過程為例，可以大致看出具體的實現(xiàn)。完整代碼點擊鏈接查看，這里摘取部分代碼分析：

上述代碼是componentWillReceiveProps執(zhí)行的過程，這里先不管setState方法的實現(xiàn)?？梢钥碿wr僅僅是被執(zhí)行了，沒有跟渲染或者狀態(tài)相關的代碼。

這是狀態(tài)計算的代碼，是與生命周期分離的。updateClassInstance最終返回是否需要更新的結果，接下來的代碼在這里

re-render是在這里進行的。所以看出setState和render完全是分離的。只有在該走的生命周期結束后才會統(tǒng)一render。

這里還沒有介紹setState的內部實現(xiàn)，你可以自己去看一下，fiber調度部分可以跳過，大概能看出是在更新隊列。（我要去跑步沒時間寫了）