建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自微信公眾號(hào)「勾勾的前端世界」，作者西嶺。轉(zhuǎn)載本文請(qǐng)聯(lián)系勾勾的前端世界公眾號(hào)。
我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、宜黃ssl等。為上千多家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的宜黃網(wǎng)站制作公司
這上一篇中，我們基本搞清楚了原理流程，那具體的代碼是如何實(shí)現(xiàn)的呢?
在 setState 的調(diào)用中，有一個(gè)合成事件起到了關(guān)鍵性的作用。接下來(lái)，我們先去搞清楚這個(gè)小可愛(ài)，再來(lái)看具體的 setState 的代碼實(shí)現(xiàn)。
合成事件
首先明確定義，在 React 中為元素添加的事件被叫做合成事件。
合成事件的好處有兩個(gè)：
一是屏蔽了瀏覽器之間關(guān)于事件處理的兼容性問(wèn)題，為合成事件對(duì)象內(nèi)部提供了統(tǒng)一的 API;
二是性能的提升, 事件都被委托給 document 。
React 并不會(huì)將事件添加到真正的 DOM 元素身上，它會(huì)將所有事件委托給 document 執(zhí)行。如下圖所示：
React 會(huì)在擁有事件的 DOM 對(duì)象身上添加一個(gè) store 對(duì)象，在 store 對(duì)象中存儲(chǔ)事件名稱及事件處理函數(shù)，然后通過(guò) document 分發(fā)事件。
當(dāng)事件被觸發(fā)后，通過(guò)獲取事件源對(duì)象，查看事件源對(duì)象中是否存在 store 對(duì)象，獲取 store 對(duì)象中事件處理函數(shù)，執(zhí)行事件處理函數(shù)。
合成事件的事件對(duì)象在使用完成以后會(huì)被銷毀。我長(zhǎng)得帥，所以，我寫(xiě)了一段模擬性的代碼，你看不看就隨意了：
代碼的注釋中說(shuō)的已經(jīng)非常清楚了，愛(ài)看不看吧，就這樣……
setState 實(shí)現(xiàn)原理
接著，我們?cè)侔焉厦娴膱D拿出來(lái)，我分為了四段，進(jìn)行了具體的梳理。先看圖，再看字，最后上代碼?
1、當(dāng) setState 方法被調(diào)用后，方法會(huì)將狀態(tài)傳遞給組件更新器，讓組件更新器將狀態(tài)臨時(shí)存儲(chǔ)起來(lái)。每個(gè)組件都會(huì)有自己的組件更新器，當(dāng)需要更新組件時(shí)調(diào)用組件更新器。
2、狀態(tài)臨時(shí)保存完成后判斷當(dāng)前是否為批量更新模式，如果是，將組件更新器添加到更新隊(duì)列中;如果不是，直接更新組件。
批量更新模式是如何設(shè)置的：當(dāng)觸發(fā)合成事件時(shí), 在事件處理函數(shù)執(zhí)行之前，會(huì)先將批量更新模式設(shè)置為 true，然后執(zhí)行事件處理函數(shù)收集狀態(tài)。當(dāng)事件處理函數(shù)執(zhí)行完成后，執(zhí)行批量更新操作，即從更新隊(duì)列中獲取組件更新器并調(diào)用。組件更新器調(diào)用完成后再將批量更新模式設(shè)置為 false。
3、更新組件時(shí)，先判斷是否有狀態(tài)需要更新，如果有就先計(jì)算最新?tīng)顟B(tài)，將得出的最新?tīng)顟B(tài)重新設(shè)置給組件。
計(jì)算狀態(tài)時(shí)，如果狀態(tài)是函數(shù)類型，調(diào)用函數(shù)傳入當(dāng)前狀態(tài)，返回最新?tīng)顟B(tài)。如果狀態(tài)是對(duì)象類型，使用對(duì)象狀態(tài)覆蓋原有狀態(tài)。
4、組件狀態(tài)計(jì)算完成后，通過(guò)調(diào)用組件內(nèi)部的 render 方法獲取新的 VirtualDOM，再通過(guò) DOM 對(duì)象獲取舊的虛擬 DOM，然后調(diào)用 diff 方法進(jìn)行比對(duì)，對(duì)比完成后將差異更新到真實(shí) DOM 對(duì)象中。
下面的代碼，就是配合前面的流程圖和文字描述實(shí)現(xiàn)的具體代碼了。我看你也挺聰明的，所以加了非常詳細(xì)的注釋，就是為了遏制你的智力增長(zhǎng)，如果還看不懂，那就算了吧，建議你去和娜塔莎搶婚，單身程序員這條路可能不適合你喲 (●'?'●)。
好了，就到這里吧。沒(méi)想到你竟然真的沒(méi)看代碼，就知道往下拖進(jìn)度條，哎，放棄吧，翠花是娜塔莎的，不可以插足!
當(dāng)然，如果能點(diǎn)贊，我可以考慮送你一只翠花┗|`O′|┛。
網(wǎng)站名稱：這一把子徹底搞懂setState原理
文章URL：http://www.dlmjj.cn/article/djgspes.html
