React16生命週期誤用及改正

2021-10-02 21:40:43 字數 472 閱讀 3073

react16.3採用非同步更新機制,在頁面元件並不複雜的情況下,我們在螢幕外似乎捕捉到的區別並不明顯,其實框架內部已經發生重大變革,配套新的更新機制,元件的生命週期有所調整,廢棄了三個舊生命週期,同時react官方也對新生命週期的使用做出了指導。下面列舉就我自己專案開發中總結的生命週期中最常見的不當操作以及正確姿勢:

在componentdidupdate中setstate導致元件無限被更新,影響元件的流暢度。

在getderivedstatefromprops中獲取dom屬性比如scrollheight,由於非同步更新的緣故,獲得的屬性值可能並非當前更新對應的值,如果頁面resize中斷當次render,並改變了scrollheight,重新回到render階段可能得到髒資料,引起一些看似莫名其妙的錯誤。

在getderivedstatefromprops中發起資料請求如ajax等,該請求也可能被重**起多次,導致排隊,擠占其它請求的次序,影響頁面效能,這也是拜非同步更新所賜。

React16 新增的生命週期

圖源出處 新增的生命週期getderivedstatefromprops getsnapshotbeforeupdate componentdidcatch getderivedstatefromerror 廢棄的生命週期 react17去除,react16不允許和新的生命週期同時使用 compon...

react 學習 3 生命週期

react 中的生命週期是指,在某乙個時刻元件會自動呼叫執行的函式。class mycomponent extends component componentwillmount render componentdidmount shouldcomponentupdate componentwillu...

React 學習筆記 (六)(生命週期)

元件載入時觸發的函式 constructor componentwillmount render componentdidmount import react,from react class lifecycle extends component 資料將要掛載 componentwillmount...