2017-06-11 8 views
2

私たちのアプリはReactとReduxで開発されており、私はあなたにアドバイスしたいと思う問題が発生しています。 私はパフォーマンスを向上させる過程にあります。まず、私の頭の中でUIがスムーズになっています。 多くの場合、UIがスムーズではなく、気分が悪くなっていると感じています。 具体的な例を挙げておきましょう。ハイチャートグラフに表示されるデータの時間範囲を変更できるTimeSelectionButtonBarコンポーネントがあります。 はここに要点である:現在選択されている時間帯としてhttps://gist.github.com/sht5/dcca86afd74a6f820ebe150ba777b425 enter image description herereact redux非滑らかなUIパフォーマンス

我々は店でそれを維持highchartsグラフに関連し、その電流値は、それが現在アクティブなボタンの決定、このTimeSelectionButtonBarコンポーネントに接続されています。誰かが時間範囲]ボタンをクリックしたときに 、何が起こるかは次のとおりです。

  1. 私たちは、店舗内の現在アクティブな時間範囲を変更するアクションを発射します。
  2. アクションの結果としてTimeSelectionButtonBarコンポーネントの小道具が変更され、UIのアクティブ(青色)ボタンが変更されます。
  3. 選択した時間範囲に応じてグラフのデータデータを取得するサンクアクションが発生しました
  4. "データ受信"アクションが発生し、グラフが更新されます。

TimeSelectionButtonBarコンポーネントを再描画するときに遅延があり、アクティブボタンの変更がスムーズではありません。 ここで実際に起こっていることは、コンポーネントが次のアクションが始まる前に再レンダリングを完了することができないことです。現在のところ、グラフのレンダリングにはさまざまな理由からしばらく時間がかかります。

この実現後、私は、ThunkアクションコールをTimeSelectionButtonBarコンポーネントのcomponentDidUpdateメソッドに移動しようとしましたが、これで問題は解決しません。 次のstackoverflow会話は、サンクを遅らせるためにsetTimeoutまたはwindow.requestAnimationFrameを使用して、コンポーネントの更新が完了するまでに時間がかかることを示唆していますが、これはハックのように思えます。

答えて

0

私はセレクタ内で多くのコードが実行されていたことを知り、再選択を使用していました。また、ImmutableJSライブラリの大規模な使用、特に減速機のfromJSとtoJS関数が問題を引き起こしました。削除して再選択を使用すると、パフォーマンスが驚くほど向上しました

関連する問題