瞭解React渲染

React組件在其父組件呈現時始終運行其渲染方法，即使子組件沒有狀態或道具更改（即使子組件沒有狀態或道具），也似乎始終運行它們的渲染方法。瞭解React渲染

這應該是？這有沒有效率低下？將子組件切換到PureComponent可修復此問題，並且子組件不會reRender。我應該比普通組件更青睞PureComponents嗎？

2017-01-16 Leo Fabrikant

PureComponents更容易出錯。反應文檔的一般建議是在任何地方使用Component，並且僅在解決實際性能問題時才使用PureComponent，並且僅在其用法實際上提高性能時使用PureComponent。我現在找不到源代碼的鏈接。 –

來自PureComponent文檔：「如果您的React組件的render（）函數在給定相同的道具和狀態的情況下呈現相同的結果，則可以在某些情況下使用React.PureComponent來提高性能。」「If」對我來說很有意思......當一切都一樣時，渲染函數是否應該運行？或者，在使用常規組件時，應該不使用狀態或道具的愚蠢組件不會重新渲染。常規組件如何決定何時渲染？ –

父組件中的任何更改都會首先呈現子組件，然後再呈現父組件。如果您認爲父組件狀態或道具不應該影響子組件，請使用shouldComponentUpdate函數。如果您不需要組件的本地狀態，則純組件非常有用。 –

如果您想控制什麼使組件重新生成，那麼您應該使用shouldComponentUpdate，它可以用於所有反應組件，除非它們是無狀態的功能組件。 PureComponent基本上自動使用shouldComponentUpdate並對過去和當前的道具/狀態進行淺層檢查，如果發生變化，它會重新渲染。

有時候您可能正在處理更復雜的數據結構，並且想自己控制shouldComponentUpdate，在這種情況下，請按照此處的生命週期方法說明進行操作。

https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

這裏也是PureComponent

的信息

https://facebook.github.io/react/docs/react-api.html#react.purecomponent

來源

2017-01-16 16:58:45 finalfreq

謝謝，我明白功能，我只是想明白，如果我應該打擾控制重新渲染？我是否應該試圖儘量減少不需要重新渲染的組件的重新渲染？ –

這確實取決於您的使用情況和應用程序。如果性能不是問題，並且您沒有非常複雜的用戶界面，則可能不值得花時間進行投資。如果組件的UI複雜，可能會呈現大量DOM元素，那麼絕對值得花時間和避免無用的重新渲染。在我工作的地方，我們只是真的在有問題的組件上使用它，並且不會花時間在較小的組件上來實現它，但我確定有其他人將它放在一切只取決於您的使用情況 – finalfreq

謝謝，這很有幫助。我剛剛閱讀了一些文檔，闡明瞭render方法實際上並不意味着重新渲染實際的DOM。 React仍然將渲染的虛擬DOM元素與真實事物進行比較，以確定是否需要在UI中呈現。 –

回答

相關問題