SetState流程:
? ?? ?將setState的內(nèi)容存入this.updater.enqueueSetState,如果存在callback狸眼,將 callback寫入this.updater.enqueueCallback(this,)
1.在enqueueSetState方法中先創(chuàng)建InternalInstance
2執(zhí)行enqueueUpdate(internalInstance)杂数,將其放入更新隊(duì)列盹兢。
? ?? ?2.1在enqueueUpdate方法中會(huì)判斷當(dāng)前是否批量更新中:
? ?? ?? ?? ?2.1.1如果當(dāng)前處理批量處理更新中(即砂轻,isBatchingUpdates = true),則將InternalInstance放入dirtyComponent中甸昏,等待flush
? ?? ?? ?? ?2.1.2否則顽分,執(zhí)行batchingStrategy.batchedUpdates(enqueueUpdate, component),實(shí)則用事務(wù)transaction.perform再執(zhí)行enqueueUpdate,此時(shí)isBatchingUpdates為true施蜜,返回步驟2.1.1卒蘸。
總而言之,enqueueUpdate是實(shí)現(xiàn)在批量更新過程中翻默,將待更新的InternalInstance寫入dirtyComponent缸沃。
? ?? ? 2.2 batchedUpdates處于transaction中,它在initial階段設(shè)置isBatchingUpdates 標(biāo)志位修械,這就是2.1.2的原因趾牧。close階段清除標(biāo)志位,同時(shí)會(huì)調(diào)用flushBatchedUpdates 方法更新(即肯污,ReactUpdates.flushBatchedUpdates.bind(ReactUpdates))
? ?? ?2.3 flushBatchedUpdates更新狀態(tài)
? ?? ?? ?? ? 2.3.1 以transaction方式調(diào)用runBatchedUpdates
? ?? ?? ?? ?? ?? ? 2.3.1.1遍歷dirtyComponent翘单,并對(duì)組件進(jìn)行排序吨枉,保證先渲染父組件再渲染子組件。同時(shí)判斷該setState是否有callback哄芜,如果有則保存貌亭。
? ?? ?? ?? ?? ?? ? 2.3.1.2 執(zhí)行ReactReconciler.performUpdateIfNecessary
? ?? ?? ?? ?? ?? ?? ?? ?2.3.1.2.1在updateComponent方法中,更新state认臊、props圃庭、content。
? ?? ?? ?? ?? ?? ?? ?? ?2.3.1.2.2判斷是否需要更新虛擬DOM失晴,如果需要更新則調(diào)用_performComponentUpdate剧腻,否則只對(duì)props、state涂屁、context進(jìn)行更新
? ?? ?2.4 ReactUpdatesFlushTransaction的close階段觸發(fā)回調(diào)函數(shù)this.callbackQueue.notifyAll()(從而保證了callback在setState完成后觸發(fā))书在。