通過shouldComponentUpdate對無狀態功能組件進行優化

Question

我知道React優化的一個關鍵點是使用shouldComponentUpdate()生命周期鈎子來檢查當前狀態/道具對下一個/狀態道具。

如果我正在構建一個使用大多數功能組件的React應用程序，而不是基於類的有狀態組件（可以訪問生命周期鈎子），我是否會放棄這種特定的優化？ 我可以在功能組件內執行類似的檢查嗎？

Answer 1

無狀態組件是未來優化的候選組件，文檔暗示它沒有詳細說明：

在理想情況下，大多數組件都是無狀態函數，因為將來我們還可以通過避免不必要的檢查和內存分配來對這些組件進行性能優化。 如果可能，這是推薦的模式。

資源

---

但是，目前，如果props不變，則無狀態組件不會通過跳過渲染過程來優化性能。 反應團隊成員證實了這一點：

對於復雜組件，定義shouldComponentUpdate （例如純渲染）通常會超出無狀態組件的性能優勢。 文檔中的句子暗示了我們計划的一些未來優化，因此我們不會為無狀態功能組件分配內部實例（我們將只調用該函數）。 我們也可能不會繼續持有道具等。微小的優化。 我們不討論文檔中的細節，因為優化實際上還沒有實現（無狀態組件打開了這些優化的大門）。

[...]

有關於可以在函數上設置pureRender標志或允許它參與shouldUpdate生命周期的討論，但目前尚未實現。 目前，無狀態函數不能是純渲染。

值得記住的是，有時人們濫用/過度使用純渲染; 它有時可能比再次運行渲染更昂貴，因為你正在迭代道具數組並可能做像字符串比較這樣的事情，這對於最終返回true然后繼續重新渲染的組件來說只是額外的工作。 PureRender / shouldComponentUpdate實際上被認為是性能的逃避艙口，並不一定應該盲目地應用於每個組件。

資源

---

我從這個討論中得出的結論是，在某些情況下，對於復雜組件，與無狀態組件相比，通過實現shouldComponentUpdate可以提高性能。 另一方面，我會強烈考慮性能優勢是否足以超過組件的額外復雜性和更大的占用空間。