2017-09-18 8 views
0

ImmutableJSを使用して、すべての状態を格納するReact and Reduxアプリケーションで作業しています。 アプリは約100 Hzでセンサからデータを受信します。私はリアルタイムで更新し、このデータを表示するグラフを描く必要があります。 私はグラフに対してReact-Visを使用していますが、問題はそれがオブジェクトの配列であり、ImmutableJSデータ構造ではないということです。グラフ内のReduxストアからのImmutableJSデータの可視化

私はこのような配列にImmutableJSデータ構造を変換することによって、これを解決した:

​​

これは動作しますが、私は遭遇しています問題は、私は実際のデータでこれを実行する場合、私はそれので考える大規模なラグです常に新しい配列を作成する必要があります。

これに対して高性能のソリューションを作成するにはどうすればよいのですか?また、ImmutableJSを使用しますか?

+0

1秒あたり100個の状態変更アクションを送信しているようです。 100fpsのデータを持つグラフを実際に再レンダリングしようとすると、さらに大きなオーバーヘッドがなくても、それだけで大幅に遅くなると私は考えています。 'toIndexedSeq()。toArray()'の使用が問題であるかどうかは不明です。グラフをスキップして、単に 'console.log(this.props.HEGPercentage)'のような簡単なことをしてください。それはまだページを遅らせる(スクロールするのが難しくなる、または入力フィールドに入力するなど)? 'toIndexedSeq()。toArray()'を最適化する価値があるかどうかを確認しようとしています。 – jonahe

+0

センサデータの入力をシミュレートするコードをいくつか用意しており、類似していて遅れがないレートに設定しています。今では、不変の代わりに通常のJSオブジェクトを使用するようにリデューサをリファクタリングしました。パフォーマンスが大幅に向上しているようです。私はまだ、アプリの残りの部分と一貫性のために可能な限り不変を使用したいと思います... –

+0

Ok。センサデータは非常に正確です(または変動が大きい)ので、値がほとんど再現されませんか?そうでない場合は、何らかのキャッシュを使って最適化することが可能かもしれません。値が不必要に正確であれば(おそらく、画面解像度が0.00001と0.00002の差を表すことはできません)、入力データが丸められて、値が頻繁に変更されず(再描画が少なくなります)、頻繁に繰り返されることがあります(キャッシングに適しています)。多分https://github.com/reactjs/reselectを見てください。 – jonahe

答えて

1

プレーンなJSオブジェクトとImmutable.jsオブジェクトの間の変換は非常に高価になります。特に、fromJS()toJS()の操作は、Immutable.jsライブラリで最も高価な操作であり、可能な限り避けてください(また、、特にのRedux mapStateの関数)。

あなたはすでに正しい軌道に乗っているようです。メモ型のセレクタを使用して高価な変換を減らし、可能であればそれらの数値を丸めて無意味な変更が少なくなるようにし、全体的な更新回数を減らしてください。

私のReact/Redux links listには、improving performance for React, Redux, and Immutable.jsの記事の大部分があり、参考になるかもしれません。

また、私はpersonally advise against use of Immutable.js for a variety of reasonsでも注目に値する。

+0

リンクした記事の一部を読んだ後、私は主な問題の1つであるImmutable.jsをプロジェクトから削除する方向に傾いていると思いますのアプリケーションは、リアルタイムでグラフを描画することであり、これはJSオブジェクトへの変換が必要なようです。今私はアレイを突然変異させるべきかどうか考えています。私は値を追加する度にコンカットを使用していますが、これは少し無駄に思える新しい配列を作成することがわかっている限りです。私の主な関心事は、センサデータのリアルタイムレンダリングであり、可能な限り迅速かつ敏感であることが好ましい。 –

+0

React-Reduxを使用している場合、変更を検出して再レンダリングできるように、新しい参照を生成するために不変の更新に依存します。あなたがReact-Reduxを使用していないなら、それは心配しないかもしれません。しかし、私はまだ先に進み、最初に "正しい"方法を試し、物事がどのように実行されるかを見ます。 – markerikson

関連する問題