從圖中的Redux存儲中可視化ImmutableJS數據

我正在使用ImmutableJS來存儲所有狀態的React和Redux應用程序。該應用程序從約100 Hz的傳感器接收數據。我需要繪製一個實時更新的圖形並顯示這些數據。我一直在使用React-Vis作爲圖，問題是它需要一個對象數組而不是ImmutableJS數據結構。從圖中的Redux存儲中可視化ImmutableJS數據

我已經通過了ImmutableJS數據結構轉換爲一個數組這樣解決了這個：

這工作，但我遇到的問題是巨大的滯後，如果我跑這個真實的數據，我想是因爲它必須始終創建一個新陣列。

如何爲此創建高性能解決方案並仍使用ImmutableJS？

來源

2017-09-18 Magnus Brantheim

聽起來好像你每秒發送100次改變狀態的動作。我認爲這可能會使事情本身顯着減慢，即使沒有實際嘗試以100fps重新渲染該數據的圖形的額外開銷。不確定是否使用'toIndexedSeq（）。toArray（）'是問題。如果你跳過這個圖，只做一些簡單的事情，比如'console.log（this.props.HEGPercentage）'。它是否仍然使頁面滯後（難以滾動，或者輸入字段或類似內容）？試圖確定是否值得嘗試優化'toIndexedSeq（）。toArray（）'。 – jonahe

我有一些代碼來模擬傳感器數據輸入，並將其設置爲應該類似的速率並且沒有滯後。現在我還重構了Reducer以使用常規JS對象而不是Immutable，並且它的性能似乎有所提高。如果可能的話，我仍然希望使用Immutable，以便與應用程序的其他部分保持一致... –

好的。傳感器數據是否如此精確（或波動如此之大）以至於數值幾乎不再出現？如果沒有，也許可以通過某種緩存進行優化。如果這些值是不必要的精確（也許屏幕分辨率無法表示0.00001和0.00002之間的差異），也許輸入數據可能會被舍入，以致值不會經常更改（重新渲染更少）並且重複頻率更高（更適合緩存）。也許看看https://github.com/reactjs/reselect。 – jonahe

在純JS對象和Immutable.js對象之間進行轉換可能非常昂貴。特別是，fromJS()和toJS()操作是Immutable.js庫中最昂貴的操作，應儘可能地避免（並且，特別是Redux mapState函數中的）。

這聽起來像你已經至少有點在正確的軌道上。使用memoized選擇器來減少昂貴的轉換，儘可能地將這些數字進行四捨五入，以便減少無意義的更改，並減少總體更新總數。

我的React/Redux links list有大量文章improving performance for React, Redux, and Immutable.js，其可能會對您有幫助。

還值得一提的是我personally advise against use of Immutable.js for a variety of reasons。

來源

2017-09-18 16:32:28 markerikson

好吧，在閱讀了一些你鏈接的文章之後，我認爲我傾向於從項目中移除Immutable.js，因爲其中一個主要問題的應用程序是實時繪製圖形，這似乎需要轉換爲JS對象。現在我正在考慮是否應該改變數組。我每次添加一個值時都使用concat，但據我所知，這會創建一個看起來有點浪費的新數組。我主要關心的是傳感器數據的實時渲染，最好儘可能快速且響應。 –

如果您使用的是React-Redux，那麼它依賴不可變的更新來產生新的引用，以便它可以檢測到更改並重新呈現。如果您不使用React-Redux，那可能不是問題。但是，我仍然會繼續努力，首先嚐試以「正確」的方式進行操作，然後看看事情的進展情況。 – markerikson

從圖中的Redux存儲中可視化ImmutableJS數據

回答

相關問題