在這一篇文章中，我們從原始碼的角度再次理解下 setState 的更新機制，供深入研究學習之用。

原始碼的部分為了保證格式顯示正常就截圖了，檢視原始碼點選對應的連結直接跳轉至 GitHub 檢視即可。

1. React 中的 setState 更新邏輯程式碼

在更新邏輯的部分，可以看到 React 會透過 batchingStrategy.isBatchingUpdates 判斷當前的邏輯狀態下是否需要進行批次更新。

• 如果不是，那麼就直接進行頁面的批次更新，將之前累積的所有狀態一次更新到元件上。就是類似我們上一篇文章中舉例的快遞點一次將所有的快遞寄出。

• 如果是，那麼所有的元件狀態不進行立即更新，而是將元件狀態存放在一個叫 dirtyComponents 的陣列中去，等待下次更新時機的到來再進行更新。

2. React 中的 Transaction 設計

為了實現上述的更新邏輯，React 設計了 Transaction 的邏輯，看起來也像是資料庫中的事務。
原始碼中如圖所示，給出了一幅圖以及大段的解釋。

React 將整個的函式執行過程包裹上了 Transaction，在函式執行前與執行後分別有 initialize 和 close 兩個方法。

這樣的話 React 就有時機在函式執行過程中，涉及到 setState 的執行，都將快取下來，在 close 的時候進入到 React 的 state 更新邏輯進行更新判斷操作，並最終更新到前臺的 DOM 上。

其實 Virtual DOM 的框架都會有這樣的設計邏輯，理解了這樣的底層設計才能很好地理解一些方法在前臺的表現行為。

Vue.js 中也有類似的設計邏輯，後續如果有時間我們將繼續進行相關討論。