React + Redux與組件的性能優化更新

Question

我有一個react/redux應用程序，它已經變得足夠大，需要一些性能優化。

大約有100個獨特的組件通過websocket事件進行更新。當發生許多事件時（例如〜5 /秒），瀏覽器開始顯着減速。

大部分狀態都保存在Redux存儲中作爲Immutable.js對象。整個商店被轉換爲一個普通的JS對象，並通過組件樹以道具形式傳遞。

問題是當一個字段更新時，整個樹更新，我相信這是有很大改進空間的地方。

我的問題：

如果整個商店通過所有分量通過，是有防止部件更新一種智能的方式，或者我需要一個定製shouldComponentUpdate方法爲每個組件，在此基礎上道具呢（和其子女）實際使用？

Answer 1

你真的不想這樣做。首先，據我瞭解，Immutable的toJS()相當昂貴。如果你每次都爲整個狀態做這件事，那不會有幫助。

其次，立即調用toJS()首先浪費了幾乎所有使用Immutable.js類型的好處。你真的想保持你的數據在Immutable-wrapped形式下，直到你的渲染函數，這樣你就可以從shouldComponentUpdate中獲得快速引用檢查的好處。

第三，完全自上而下的處理通常會導致大量不必要的重新渲染。你可以解決，如果你堅持shouldComponentUpdate幾乎在你的組件樹的一切，但似乎過度。

適用於Redux的推薦模式是在組件樹中的各個級別上使用connect()。這將在幾個層面上簡化正在完成的工作量。

您可能需要閱讀我在React and Redux Performance上收集的一些文章。特別是最近在"High Performance Redux"上的幻燈片非常棒。

更新：

我在Reactiflux的#redux通道與另一個終極版用戶前幾天有人問這個問題一個很好的辯論，過去，自上而下VS多個連接。我已經複製了該討論並將其粘貼在要點中：top-down single connect vs multiple lower connects。

此外，昨天發佈了一篇文章，其中正確涵蓋了Immutable.js的toJS()函數的過度使用這一主題：https://medium.com/@AlexFaunt/immutablejs-worth-the-price-66391b8742d4。寫得很好的文章。