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

Question

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

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

Answer 1

無狀態組件是爲今後優化候選人和文檔它暗示沒有進入細節：

在一個理想的世界裏，大部分的組件是無狀態的功能，因爲在未來，我們將也可以通過避免不必要的檢查和內存分配來針對這些組件進行性能優化。如果可能，這是推薦的模式。

Source

---

然而，目前無狀態的組件不跳過渲染過程中如果道具是不變的優化性能。這已被反應團隊的成員證實：

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

[...]

有大約有pureRender標誌，你可以在功能設置，或允許其參與shouldUpdate生命週期的討論，但目前不能執行。目前，無狀態函數不能是純渲染。

值得記住的是，有時候人們濫用/濫用純粹的渲染;它有時可能會比再次運行渲染器更昂貴，因爲您正在迭代道具數組，並且可能會執行字符串比較等操作，這對於最終返回true並隨後執行重新渲染的組件來說只是額外的工作。 PureRender/shouldComponentUpdate確實被認爲是性能的逃生孵化器，並不一定是應該盲目應用於每個組件的東西。

Source

---

從這個討論我的外賣是，在某些情況下，對於複雜的部件，其性能可提高相比，無狀態組件實施shouldComponentUpdate。另一方面，我會強烈考慮性能優勢是否足夠重要，以超過組件的更大複雜性和更大的佔用空間。