React16生命週期誤用及改正

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

  1. 在componentDidUpdate中setState導致組件無限被更新,影響組件的流暢度。
  2. 在getDerivedStateFromProps中獲取dom屬性比如scrollHeight,由於異步更新的緣故,獲得的屬性值可能並非當前更新對應的值,如果頁面resize中斷當次render,並改變了scrollHeight,重新回到render階段可能得到髒數據,引起一些看似莫名其妙的錯誤。
  3. 在getDerivedStateFromProps中發起數據請求如ajax等,該請求也可能被重複發起多次,導致排隊,擠佔其它請求的次序,影響頁面性能,這也是拜異步更新所賜。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章