[[418361]]

本文轉載自微信公眾號「勾勾的前端世界」，作者西嶺。轉載本文請聯系勾勾的前端世界公眾號。

這上一篇中，我們基本搞清楚了原理流程，那具體的代碼是如何實現的呢?

在 setState 的調用中，有一個合成事件起到了關鍵性的作用。接下來，我們先去搞清楚這個小可愛，再來看具體的 setState 的代碼實現。

合成事件

首先明確定義，在 React 中為元素添加的事件被叫做合成事件。

合成事件的好處有兩個：

一是屏蔽了瀏覽器之間關于事件處理的兼容性問題，為合成事件對象內部提供了統一的 API;

二是性能的提升, 事件都被委托給 document 。

React 并不會將事件添加到真正的 DOM 元素身上，它會將所有事件委托給 document 執行。如下圖所示：

React 會在擁有事件的 DOM 對象身上添加一個 store 對象，在 store 對象中存儲事件名稱及事件處理函數，然后通過 document 分發事件。

當事件被觸發后，通過獲取事件源對象，查看事件源對象中是否存在 store 對象，獲取 store 對象中事件處理函數，執行事件處理函數。

合成事件的事件對象在使用完成以后會被銷毀。我長得帥，所以，我寫了一段模擬性的代碼，你看不看就隨意了：

代碼的注釋中說的已經非常清楚了，愛看不看吧，就這樣……

setState 實現原理

接著，我們再把上面的圖拿出來，我分為了四段，進行了具體的梳理。先看圖，再看字，最后上代碼?

1、當 setState 方法被調用后，方法會將狀態傳遞給組件更新器，讓組件更新器將狀態臨時存儲起來。每個組件都會有自己的組件更新器，當需要更新組件時調用組件更新器。

2、狀態臨時保存完成后判斷當前是否為批量更新模式，如果是，將組件更新器添加到更新隊列中;如果不是，直接更新組件。

批量更新模式是如何設置的：當觸發合成事件時, 在事件處理函數執行之前，會先將批量更新模式設置為 true，然后執行事件處理函數收集狀態。當事件處理函數執行完成后，執行批量更新操作，即從更新隊列中獲取組件更新器并調用。組件更新器調用完成后再將批量更新模式設置為 false。

3、更新組件時，先判斷是否有狀態需要更新，如果有就先計算最新狀態，將得出的最新狀態重新設置給組件。

計算狀態時，如果狀態是函數類型，調用函數傳入當前狀態，返回最新狀態。如果狀態是對象類型，使用對象狀態覆蓋原有狀態。

4、組件狀態計算完成后，通過調用組件內部的 render 方法獲取新的 VirtualDOM，再通過 DOM 對象獲取舊的虛擬 DOM，然后調用 diff 方法進行比對，對比完成后將差異更新到真實 DOM 對象中。

下面的代碼，就是配合前面的流程圖和文字描述實現的具體代碼了。我看你也挺聰明的，所以加了非常詳細的注釋，就是為了遏制你的智力增長，如果還看不懂，那就算了吧，建議你去和娜塔莎搶婚，單身程序員這條路可能不適合你喲 (●'?'●)。

好了，就到這里吧。沒想到你竟然真的沒看代碼，就知道往下拖進度條，哎，放棄吧，翠花是娜塔莎的，不可以插足!

當然，如果能點贊，我可以考慮送你一只翠花┗|`O′|┛。