モバイルブラウザの反応性能

Question

多くの行にデータが編集されており、マスクがcontenteditableの形式であり、すべてのフィールドを選択してすべての行を同時に変更できるコンポーネント（表）があります。

デスクトップではかなり速く動作しますが、iPhone 6では、動作が遅れ、Safariが各アクションで20秒間ハングします。

私が反応からのパフォーマンスを改善するための推奨事項を完了：和解、純粋な成分などを防ぐ...

は、パフォーマンスを向上させるためにそこに方法はありますか？モバイルデバイスの機能変更を熟考して、パフォーマンスを優先する必要がありますか？

Answer 1

上記の答えに加えて、実際にパフォーマンスが向上したかどうかを正確に検証するためにreact-perfモジュールを使用する必要があります。

https://github.com/crysislinux/chrome-react-perf

使用この拡張機能を正確に、ページ上の各コンポーネントは、実際にレンダリングされた回数を、参照するには、あなたがやったとき、あなたの問題/スローユーザインタラクション

1. が無い下げてみてください。各コンポーネントのレンダリングのまた、そのような各対話にレンダリングされるコンポーネントの数。
2. 各コンポーネントの処理時間を最小限に抑えてください。あなたは時間でソートし、最も高価なコンポーネントに集中することができます。最初に、階層構造の上位にコンポーネントをレンダリングしないようにします。コンポーネントのレンダリングの背後にある正確な理由を見つけるには、以下のメソッドを使用します。

componentWillUpdateライフサイクルフック、一時的、および前後の前後の小道具/州を入れてください。これにより、レンダリングの背後にある正確な小道具を得ることができます。不必要な小道具の変更は、次のようなシナリオであるかもしれない：

1. 小道具は単なる関数リファレンス毎回変わるので、「バインド」の使用または矢印機能の使用状況の変更された機能、およびそれとなると、新しいレンダー原因、 毎回。
2. 新しいObject（）または{}表記で初期化される小道具があります。これは毎回新しいオブジェクトとみなされ、新しいレンダリングとみなされます。これは、const READ_ONLY_OBJECT = {}によって回避することができ、変数が初期化を必要とするたびにREAD_ONLY_OBJECTを使用します。
3. componentWillRecievePropsでオブジェクトタイプの小道具を不必要に変異させてdiffを実行している可能性があります。

私たちがレンダリングしたくない理由はもっとあるかもしれませんが、反応の仕方によって起こります。その小道具が不必要に変わることはありません。また、パフォーマンスに悪影響を与える可能性があるため、不要なcomponentWillRecieveProps/shouldCompoentUpdateチェックを入れないでください。また、これらを使用する場合は、できるだけ上位階層として使用してください。

1. を使用するには、いくつかの技術は、それぞれのレンダリング上で実行ライフサイクルフックを反応させ使用しないようにしてみてください。
2. すべてのレンダリングで実行されているスクリプトを減らすようにしてください。
3. コンポーネントWillReievePropsを使用します。ただし、獲得した場合にのみ、ポイント1は利益も削減できます。また、これを使用すると、保守不能なコードが発生することがあります。最適化に関連する変更を行う前に、必ずリアパフツールを使用してゲインを検証してください。
4. 低速デバイス環境を作成するにはchrome-dev-toolsのスロットリングを使用し、javascriptプロファイリングを使用してどのJavaScriptメソッドが最も時間を要したかを確認してください。
5. reactxを使って状態を管理してみてください。 Reduxは、接続されたコンポーネントに対して実装されたcomponentWillReievePropsも持っています。だから、reduxを使うと助けになるでしょう。
6. reduxを使用する場合は、適切なバッチ処理を使用してください。あなたはまたreduxでbatch middlewareを使用することができます。

7. また、同様に、反応では、反応のレンダリングと比較アルゴリズムで費やされる時間を短縮するために、バッチ処理でイベントを実行しようとします。レスポンスのスクリプティング時間を短縮するために、レスキューまたはレスキューのアクションでsetStateを実行してみてください。

8. 入力コントロールを実装しているときは、常に適切な調整/デバウンス技術を使用して、即時応答を取得してください。ビジネスロジックが許せば、制御されていないコンポーネントを使用して即座に応答することもできます。ユーザーが何らかの形でページを入力または操作しているときにJavaScriptを実行しないようにすることがアイデアです。そうしなければ、コンピューティングパワーでは特に悪いデバイスに気づくでしょう。

9. あなたのアクションハンドラは長くはなりません。時間がかかっている場合は、非同期的に、還元行為や約束だけで、それらをチャンクで実行してみてください。

あり、このリストへのより多くのですが、問題がある、framewaork作業を取得するのは簡単であるとして、当初、反応するが、遅かれ早かれ、いずれかの中規模のアプリは、これらのパフォーマンスの問題に実行されます反応し、反応のdiffingとレンダリングのロジックが悪いデバイスで多くのパフォーマンスの低下を招くため、アプリケーションのサイズが大きくなるとすぐに、リアクションパフォーマンスツールをビルドプロセスに組み込むことだけが可能になります。これにより、あなたの改善を検証し、測定することができます。

Answer 2

テーブルのすべての行に対して、shouldComponentUpdateコンポーネントのライフサイクルメソッドをオーバーライドする必要があります。すべての行のすべてのセルに理想的です。

テーブルがあり、別の小道具を取得した場合。何が起こるかは、すべてのネストされたコンポーネントが再レンダリングされるということです。 PureComponentは役に立ちますが、shouldComponentUpdateを書くことは、何かが再レンダリングされたときに実際に制御する唯一の方法です。

また、本当に大きなデータリストの場合は、リアクション仮想化があります。 Check it out。すごいかっこいい。

ソースコードを投稿することができればいいと思います。