Component存在的問題?
1). 父組件重新render(), 當(dāng)前組件也會重新執(zhí)行render(), 即使沒有任何變化
2). 當(dāng)前組件setState(), 重新執(zhí)行render(), 即使state沒有任何變化

解決Component存在的問題
1). 原因: 組件的componentShouldUpdate()默認(rèn)返回true, 即使數(shù)據(jù)沒有變化render()都會重新執(zhí)行
2). 辦法1: 重寫shouldComponentUpdate(), 判斷如果數(shù)據(jù)有變化返回true, 否則返回false
3). 辦法2: 使用PureComponent代替Component
4). 說明: 一般都使用PureComponent來優(yōu)化組件性能

PureComponent的基本原理
1). 重寫實現(xiàn)shouldComponentUpdate()
2). 對組件的新/舊state和props中的數(shù)據(jù)進(jìn)行淺比較, 如果都沒有變化, 返回false, 否則返回true
3). 一旦componentShouldUpdate()返回false不再執(zhí)行用于更新的render()

面試題:
組件的哪個生命周期勾子能實現(xiàn)組件優(yōu)化?
PureComponent的原理?
區(qū)別Component與PureComponent?

轉(zhuǎn)載于:https://www.cnblogs.com/korea/p/11186830.html

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的react中component存在性能问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。