React中Component和PureComponent深度解析
阿新 • • 發佈:2022-12-12
React.PureComponent與React.Component幾乎完全相同,但React.PureComponent通過props和state的淺對比來實現shouldComponentUpdate().
在PureComponent中,如果包含比較複雜的資料結構,可能會因為深層的資料不一致而產生錯誤的否定判斷,導致介面得不到更新。
如果定義了shouldComponentUpdate(),無論元件是否是PureComponent,它都會執行shouldComponentUpdate結果來判斷是否update。如果元件未實現shouldComponentUpdate(),則會判斷該元件是否是PureComponent,如果是的話,會對新舊props、state進行shallowEqual比較,一旦新舊不一致,會觸發update.
淺對比:通過遍歷物件上的鍵執行相等性,並在任何鍵具有引數之間不嚴格相等的值時返回false。當所有的鍵的值嚴格相等時返回true。
區別點:
PureComponent自帶通過props和state的淺對比來實現shouldComponentUpdate(),而Component沒有。
PureComponent確定
可能會因為深層的資料不一致而產生錯誤的否定判斷,從而shouldComponentUpdate結果返回false,介面得不到更新。
PureComponent優勢
不需要開發者自己實現shouldComponentUpdate,就可以進行簡單的判斷來提升效能。