如何在啓動時僅渲染一次React組件？

我一直在閱讀有關性能的文檔，但我找不到我的問題的答案...如何在啓動時僅渲染一次React組件？

我有一堆按鈕，我的應用程序將基於一些屬性，但不是狀態，父組件永遠不會改變它們的屬性。然後我有這個onKeyDown事件處理程序，它將偵聽一些密鑰並更新另一個組件。

我的問題是，當按鍵和更新這一個組件時，所有其他按鈕也會呈現（通過React開發工具爲Chrome觀察）。我沒有在我的按鈕上實現shouldComponentUpdate(nextProps, nextState)，但不應該默認有這種行爲？我的意思是，將this.props與nextProps相比較，如果它們完全相同，請不要撥打render()？

我應該自己爲每個應該只在應用程序啓動時呈現一次的組件進行此操作嗎？

編輯：PureComponent似乎解決問題......但是，而不是創建一個新的問題，我更新這其中一個相關的問題：

爲什麼不是文檔建議都默認情況下基於PureComponent的組件？默認情況下使用PureComponent而不是典型的Component有什麼爭議？

來源

2017-01-22 Ricardo Amaral

您是否遇到性能問題，或者僅僅是因爲它的美觀，您不想讓這些按鈕更新？ – mguijarr

後者，它只是感覺不對...我知道，它可能只是過早的優化。但我只是問:) –

看看React.PureComponent而不是React.Component（見https://facebook.github.io/react/docs/react-api.html） – mguijarr

純粹的組件應該解決您的問題，因爲它們默認情況下實施淺道具和狀態比較。

Link to the docs.

如果你的陣營組件的渲染（）函數使得給予相同的道具和狀態相同的結果，你可以使用React.PureComponent在某些情況下提高性能。

來源

2017-01-22 21:02:23

我曾嘗試過那些（忘記提及的問題），但React開發工具仍然顯示所有按鈕都在每次按鍵時都呈現。我是對的，我應該使用這個類而不是默認的類而不需要做其他事情？ –

第二次嘗試，它工作...對不起。但是這引出了一個問題，爲什麼文檔不推薦默認情況下所有基於'PureComponent'的組件？ –

@RicardoAmaral由於邊緣情況，它們不會默認實現它。不知道他們是什麼。我只是在某處讀過它。 –

如何在啓動時僅渲染一次React組件？

回答

相關問題