setSatate背後的秘密 一

2021-09-29 11:09:12 字數 844 閱讀 8959

區別於vue的資料變化導致頁面及時變更,而react的這種現象則是通過setstate手動控制,setsate在react的生命週期如何變化以及setstate的批量處理是怎樣的神秘,以下一一解答。

1 初始化過程

construct  ->   componentwillmount(此刻未掛載)   ->    render(掛載)  ->  componentdidmount(掛載完成,可使用refs得到dom) ->       componentwillunmount

此刻,若是在componentwillmount中setstate 使用setstate, 會被合併到初始資料中去。

2  更新過程

componentwillreceiveprops(nextprops)->     shouldcomponentupdate ( nextprops ) ->  componentwillupdate   ->   render ->      componentdidupdate ->  componentwillunmount   

nextprops是即將需要傳入的props,可以通過呼叫this.props和nextprops的對比來決定是否更新

shouldcomponentupdate 返回true的時候則進行更新

componentwillreceiveprops 是父元件重新渲染一次則呼叫一次該函式,並且不論props有沒有變化

敲黑板的問題:  在 shouldcomponentupdate  和 componentwillupdate 這兩個生命週期裡面是絕對不可以用setstate, 這兩個裡        面更新state,  會不斷的去迴圈這兩個生命週期函式, 瀏覽器會重複性勞動直至崩潰.

揭秘 高薪背後的秘密

冒著十二月的嚴寒,大公尺時代的全體在校生參加了一場別開生面的面試活動。現場可真的是非常的熱鬧,至少有兩百多家的企業。冒著酷寒我逐一的將兩百對家的企業全部看了一遍,並且還跟現場的很多招聘人員進行了交流。由於之前自己有在社會上有過求職經歷,讓我不經的感慨,現場的兩百多家企業招聘的職位幾乎都是非常初級的職...

高階語言背後的秘密

什麼是高階語言?細心的人可能會發現,越是高階的語言它的實際執行語句就越少,框架就越多。比如c 裡面的類的繼承等,就算你繼承一萬個類的巢狀,表面上來看還是沒有執行任何 那麼這些文字都用來做什麼了呢?其實這些結構 的背後是編譯器在給你自動的維護著乙個又乙個的 這些 將來會指導著編譯器將那些實際執行的 按...

虛函式背後的秘密

include using namespace std class base void show class drive public base int main drive fun drive fun 這個程式清楚地示範了基類的函式是如何呼叫派生類的虛函式的。這一技術被用於不同的框架中,例如mfc...