2016-10-26 11 views
0

私は反応(V0.13.3)、フラックス(V2.0.3)を使用しています。React Js Performance

私は多くの内部成分を持つ成分を持っています。

内部コンポーネントが更新されている間、ブラウザはオフになっています。私はクリックをスクロールすることができませんし、いくつかの時間を言ってポップアップ:

応答しないスクリプトを停止しますか?

私はすべてのリアクションライフサイクルの方法に従い、shouldComponentUpdateメソッドを実装しています。

DOM DiffingはCPU時間とRAMをブラウザに多く割り当てていると思います。

なぜこの問題があるのか​​、どうすればそれから抜け出すことができますか?

+0

長いループや 'while'のような内部コンポーネントに大きな計算がありますか? – Grievoushead

+0

また、Chromeプロファイラを使用して、funcがすべてのスレッドリソースを食べているかどうかを確認することもできます。 https://developers.google.com/web/tools/chrome-devtools/rendering-tools/js-execution – Grievoushead

+0

多くのループはありません。 初期レンダリングがとてもいい..... 問題取得が更新されたときにのみ存在する –

答えて

0

Reactjは簡単に無限のレンダリングサイクルに入ることができます。 componentDidUpdateでサーバーからデータを取得し、親Componentで使用されているレデューサーを変更するメソッドを配置したとしましょう。ブーム。コンポーネントツリーが再表示されます。あなたのshouldComponentUpdateは、入力が同じ参照ではないので役に立たないかもしれません。そして、サーバーは再びヒットします。無限ループ。

解決策はガードを使用することです。初めてcomponentDidUpdate(またはバックオフィスに当たる場所)メソッドをヒットした場合、レデューサーを変更するメソッドは、レデューサー上の一種のIsLoading変数を設定する必要があります。この変数をチェックして、突然変異しているリクエストを再度実行する必要があるかどうかを確認します。これは不要な再レンダリングを防ぎます