2016-12-27 46 views
32

官方React docs指出「React.PureComponentshouldComponentUpdate()只淺比較對象」,並建議如果狀態是「深」。React.Component與React.PureComponent

鑑於此,有什麼理由爲什麼在創建React組件時應該更喜歡React.PureComponent

問題

  • 有使用React.Component,我們可能會考慮去React.PureComponent任何性能影響?
  • 我猜shouldComponentUpdate()PureComponent只執行淺層比較。如果是這種情況,不能說該方法用於更深入的比較?
  • 「此外,React.PureComponentshouldComponentUpdate()跳過整個組件子樹的prop更新」 - 這是否意味着prop支持更改被忽略?

問題源於讀入medium blog,如果有幫助。

+1

我知道你已經發布了幾個月,但我認爲這篇文章可能有幫助:https://60devs.com/pure-component-in-react.html – MrOBrian

回答

57

React.PureComponentReact.Component之間的主要區別是PureComponent確實對狀態變化的淺層比較。這意味着比較標量值時會比較它們的值,但比較對象時只比較參考值。它有助於提高應用程序的性能。

當您滿足以下任何條件時,您應該選擇React.PureComponent

  • 國家/道具應該是不可變對象
  • 國家/道具不應該有層次
  • 你應該叫forceUpdate如果您正在使用React.PureComponent你應該確保數據改變時

所有的孩子組件也是純粹的。

是否有任何性能影響使用React.component,我們可能 考慮去React.PureComponent?

是的,它會增加你的應用程序性能我猜shouldComponentUpdate()的Purecomponent只執行 淺比較(因爲淺層比較)

。如果是這種情況,不能用所述方法 進行更深入的比較?

你猜對了。如果您滿足上述任何條件,您可以使用它。

「此外,React。PureComponent的shouldComponentUpdate()跳過整個組件樹」道具 更新 - 這是否意味着支撐 變化被忽略

是,道具的變化將被忽略,如果它沒有找到淺層比較差

+0

Hi @VimalrajSankar。感謝您的幫助。你可以舉一個例子,下面的語句: '這意味着當比較標量值時,它比較ir值,但在比較對象時,它僅比較引用。它有助於提高應用程序的性能。謝謝 –

+0

@先生腳本我希望這將有助於https://stackoverflow.com/a/957602/2557900 – vimal1083

+0

'國家/道具不應該有一個層次結構'對不起,你能解釋一下這裏的層次結構是什麼意思? –

相關問題