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

在上一篇手記「深入理解 React JS 中的 setState」中，我們簡單地理解了 React 中 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 中也有類似的設計邏輯，后續如果有時間我們將繼續進行相關討論。

下一篇文章，我們繼續來看 React 底層是如何進行 batchingStrategy 的設計以及更新狀態的轉換的。

轉載于:https://www.cnblogs.com/parry/p/8891478.html

總結

以上是生活随笔為你收集整理的从源码的角度再看 React JS 中的 setState的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。