ImmutableJSを使用して、すべての状態を格納するReact and Reduxアプリケーションで作業しています。 アプリは約100 Hzでセンサからデータを受信します。私はリアルタイムで更新し、このデータを表示するグラフを描く必要があります。 私はグラフに対してReact-Visを使用していますが、問題はそれがオブジェクトの配列であり、ImmutableJSデータ構造ではないということです。グラフ内のReduxストアからのImmutableJSデータの可視化
私はこのような配列にImmutableJSデータ構造を変換することによって、これを解決した:
これは動作しますが、私は遭遇しています問題は、私は実際のデータでこれを実行する場合、私はそれので考える大規模なラグです常に新しい配列を作成する必要があります。
これに対して高性能のソリューションを作成するにはどうすればよいのですか?また、ImmutableJSを使用しますか?
1秒あたり100個の状態変更アクションを送信しているようです。 100fpsのデータを持つグラフを実際に再レンダリングしようとすると、さらに大きなオーバーヘッドがなくても、それだけで大幅に遅くなると私は考えています。 'toIndexedSeq()。toArray()'の使用が問題であるかどうかは不明です。グラフをスキップして、単に 'console.log(this.props.HEGPercentage)'のような簡単なことをしてください。それはまだページを遅らせる(スクロールするのが難しくなる、または入力フィールドに入力するなど)? 'toIndexedSeq()。toArray()'を最適化する価値があるかどうかを確認しようとしています。 – jonahe
センサデータの入力をシミュレートするコードをいくつか用意しており、類似していて遅れがないレートに設定しています。今では、不変の代わりに通常のJSオブジェクトを使用するようにリデューサをリファクタリングしました。パフォーマンスが大幅に向上しているようです。私はまだ、アプリの残りの部分と一貫性のために可能な限り不変を使用したいと思います... –
Ok。センサデータは非常に正確です(または変動が大きい)ので、値がほとんど再現されませんか?そうでない場合は、何らかのキャッシュを使って最適化することが可能かもしれません。値が不必要に正確であれば(おそらく、画面解像度が0.00001と0.00002の差を表すことはできません)、入力データが丸められて、値が頻繁に変更されず(再描画が少なくなります)、頻繁に繰り返されることがあります(キャッシングに適しています)。多分https://github.com/reactjs/reselectを見てください。 – jonahe