多くのデータを状態で処理するReactJS

Question

多くのデータを処理する必要があるReactアプリケーションがあります。キャッチが検索されているものに応じて、ある...テーブルには、する必要がありますいくつかのリンク

検索バー

表

と

• ヘッダー：総合それは単純なアプリケーションです約1,000行×約100列を表示します。 httpリクエストがこのデータを返して状態をセットすると、アプリケーションはほとんど使用できなくなります。そのデータが格納された後に状態を更新しようとすると、ブラウザが永久に破棄されるか、クラッシュします。 20行×100列を表示するようにテーブルを制限しても、状態の更新は大幅に高速ですが、更新するのが目立ちます。

  私は良い解決策を見つけるためにウェブを精練してしまい、短くなってしまったので、アイデアや助けを歓迎します。もしreduxが助けになるならば、私はそれを実装するのに何の問題もなく、報酬がなければ時間を無駄にしたくない。

Answer 1

入力するたびに検索バーとともにテーブル全体が再描画されることがあります。テーブルをサブコンポーネントに入れて、shouldComponentUpdate()を実装してみてください。文字を入力に入力するたびにテーブルデータが動的に更新されるはずですか？それは高価かもしれませんが、ユーザーが入力によって「検索」ボタンをクリックしたときにのみテーブルを再レンダリングすることも考えられます。

レンダリングの問題であるかどうかを判断しようとしているブッシュの周りを叩くのではなく、React performance tools *を使用することをおすすめします。ベンチリングにはa solid blog postがありますが、これはReactでのパフォーマンスデバッグのプロセスを辿っていますが、魔法はPerf.printWasted()です。レンダリング後のコンポーネントの再レンダリングに費やされた時間（たとえば、テキスト入力のみを変更しているテーブル）を表示します。テスト手順：コンソールから

1. は、実行：Perf.start()
2. タイプをご入力して、
理想的に一つだけのキーストロークコンソール： Perf.stop()
4. コンソール：Perf.printWasted()

このメソッドは、スーパーです痛みはありませんが、同じ情報を知るためにuse the Chrome profiling toolsもできます。

*私はちょうどホット・オフザ・ザ・プレスのリアクション16で非難されていることを知りましたが、あなたはまだよく動作する15.x変種を使用している可能性が高いです。

また、反応仮想化のための+1！それは優れており、多くの列とレイアウトをサポートしています。

Answer 2

私が正しく理解していれば、問題はデータ量ではなく、DOMレンダリングの問題です。

私はあなたにとって最良の解決策は、テーブルの可視部分だけをレンダリングすることだと思います。たとえば、this libraryなどを使用してみてください。