この記事では 、環境構築、実装原則、プログラミング開発、プラグイン開発、コンパイルと操作、安定したパフォーマンス、将来の開発など 、7つの側面から現在の React Native と Flutterの包括的な分析と比較を 行い、あなたはより価値のあるリファレンスです。
序文
モバイルプラットフォームでの数年間の浮き沈みの後、今でもReact Native と Flutterだけが、ステージのスポットライトの下で楽しむことができ ます 。数年にわたって預けられてきた「リッチ」と人気の「upstart」として「19年で、彼らの間の「しっぺ返し」も開発者の関心事になりました。
過去に誰かが私に尋ねたことがあります。「彼はJavaとObject-Cの両方を書いています。彼はAndroidとIOSの両方のプラットフォームで開発できます。なぜクロスプラットフォームを学ぶ必要があるのですか?」
そして私の答えは次のとおりです。クロスプラットフォームの市場での利点はパフォーマンスや学習コストにありません。プラットフォームの適応でさえ時間がかかりますが、最終的にはコードロジック(特にビジネスロジック)をさまざまなプラットフォームでシームレスに再利用できます。 、繰り返しコードのメンテナンスコストを削減し、プラットフォーム間の統一性を確保します。 この時点で特定のパフォーマンスを保証できれば、より完璧になります。
ByteDanceはこの質問を3つの側面から行っており、ここで整理しました。皆さんのお役に立てば幸いです。ようこそ、ギャップを確認して埋めてください。
個別のデータ処理とビューの読み込み
リモートからのデータのプルは非同期である必要があることがわかっています。データをプルした後、処理のために急いでVHにデータをスローする可能性があります。実際には、データ処理ロジックも非同期処理に配置する必要があります。アダプターが変更を通知した後、ViewHolderは、次のように、データを実行し、バインディングロジックを簡単かつ圧力をかけずに表示できます。
mTextView.setText(Html.fromHtml(data).toString())
ここでのHtml.fromHtml(data)メソッドは、より時間がかかる可能性があります。複数のTextViewがある場合、より時間がかかり、フレームのドロップとフリーズが発生します。このステップをネットワーク非同期スレッドFromと組み合わせると、ユーザーの観点からすると、ネットワークの更新時間はせいぜい少し長くなります。
データの最適化
リモートデータをページごとにプルし、プルしたリモートデータをキャッシュし、セカンダリロードの速度を向上させます。新しく追加または削除されたデータの場合、データを盲目的にグローバルに更新するのではなく、DiffUtilを使用してデータをローカルに更新します。
レイアウトの最適化
遷移描画を減らす
レイアウトレベルを下げるには、カスタムビューを使用してレベルを下げるか、レイアウトをより合理的に設定してレベルを下げることを検討できます。RecyclerViewでConstraintLayoutを使用することはお勧めしません。多くの開発者は、それを使用する方が悪いとすでに報告しています。関連するリンクは次のとおりです。ConstraintLayoutは遅いですか?、constraintlayout1.1.1はリストビューでうまく機能しません。
xmlファイルの膨張時間を短縮します
ここでのxmlファイルには、レイアウトのxmlだけでなく、ドローアブルのxmlも含まれています。xmlファイルは、特にTypeが増加するにつれて、Itemの再利用の可能性が非常に低い場合に、時間のかかるIO操作によってItemViewを膨らませます。 、this inflateによる損失は非常に大きいです。現時点では、の各ノードの属性に対応するAPIを把握している限り、コードを使用してレイアウト、つまり新しいView()メソッドを生成できます。 xml。
ビューオブジェクトの作成を減らす
少し複雑なアイテムには多数のビューが含まれ、多数のビューの作成にも多くの時間がかかるため、ItemViewは可能な限り単純化する必要があります。ItemTypeを設計するときは、カスタムを設計してみてください。複数のViewTypeで共有できるパーツのビューで、ビューの構築とネストを削減します。
その他
その他は重要ではないという意味ではありませんが、分類することはできません。一部の操作では、RecyclerViewが大幅に最適化される場合があります。
- プリフェッチ機能を使用するには、RecycleViewバージョンを25.1.0以降にアップグレードしてください。RecyclerViewデータのプリフェッチを参照してください。
- アイテムの高さが固定されている場合は、RecyclerView.setHasFixedSize(true);を使用して、requestLayoutがリソースを浪費しないようにすることができます。
- スライドプロセス中にロードを停止するには、RecyclerView.addOnScrollListener(listener);を設定します。
- アニメーションが不要な場合は、((SimpleItemAnimator)rv.getItemAnimator())。setSupportsChangeAnimations(false);を渡して、デフォルトのアニメーションをオフにして効率を向上させることができます。
- android:textAllCaps = "true"の代わりに、TextViewにString.toUpperCaseを使用します。
- 代わりに、TextViewにStaticLayoutまたはDynamicLayoutカスタムビューを使用します。
- RecyclerView.onViewRecycled(holder)をオーバーライドして、リソースをリサイクルします。
- RecycleView.setItemViewCacheSize(size);を使用してRecyclerViewのキャッシュを増やし、時間のスペースを使用してスクロールのスムーズさを向上させます。
- 複数のRecycledViewsのアダプターが同じである場合、たとえば、ネストされたRecyclerViewに同じアダプターが存在する場合、RecyclerView.setRecycledViewPool(pool);を設定することでRecycledViewPoolを共有できます。
- ItemViewのリスナーを設定します。アイテムごとにaddXxListenerを呼び出さないでください。頻繁なオブジェクト作成によって発生するリソース消費を最適化するには、XxListenerを共有し、IDに基づいてさまざまな操作を実行する必要があります。
- 以下に示すように、getExtraLayoutSpaceを使用して、RecyclerViewによって予約される追加のスペースを増やします(表示範囲外では、追加のキャッシュスペースが必要です)。
new LinearLayoutManager(this) {
@Override protected int getExtraLayoutSpace(RecyclerView.State state) {
return size;
}
};
やっと
質問が多すぎて回答を整理する作業負荷が大きすぎるため、知識ポイントの提供に限定されています。詳細な質問と参照回答の多くがPDFファイルにまとめられています。それを必要とする小さなパートナーは私に個人的にメールを送ることができます[インタビュー]無料で入手するか、GitHubをクリックして無料で入手してください。
…(img-lIECrrsu-1611134649500)]
[外部リンク画像が転送されています...(img-2wSNiqBA-1611134649506)]