ListViewは自動的にlazyloadをサポートしますか？

Question

リストビューに画像がありますが、下にスクロールします。それは、その場で画像をレンダリングするようです。それはlazyloadですか？はいの場合、なぜlazyloadライブラリが存在するのですか？

セカンダリを見てください。

私はリストビューで25枚の画像をレンダリングしています。初めての場合、すべての画像をロードするのに約5分かかります。すべての画像をレンダリングするのに約10秒かかりますか？ listviewを実行すると、すべての画像をロードするのに約5分かかるのはなぜですか？

Answer 1

ReactネイティブListViewはレイジーロードのタイプを実装していますが、pageSizeプロパティとスクロール位置に基づいて行自体のレンダリングに限定されています。たとえば、100行の場合、ListViewは指定された時間にすべての行をレンダリングしません。ユーザーがスクロールダウンすると、特定の数値の行のみがレンダリングされ、さらに多くの行がレンダリングされます。レイジーロードモジュールは、ビューポートの近くになるまで実際の行ビューをレンダリングしないことでこれをさらに向上させます。

第2に、React Nativeはデバイスにイメージをキャッシュします。したがって、リモートイメージが読み込まれると、イメージのURLに基​​づいてローカルキャッシュがチェックされます。キャッシュが存在すると、新しいネットワーク要求の代わりにそのイメージを使用します。

Answer 2

while1さんの質問に答えています。しかし、私は1つの点を追加したいと思います。それは、あなたが遅延ロードによって何を意味するかに大きく依存します。

1. ユーザーがスクロールダウンする際にAPIからデータを取得することを意味しますか？
2. または、ユーザーがスクロールダウンする際にプリフェッチされたデータをレンダリングすることを意味しますか？

答えが1の場合は、いいえ。 ListViewはAPI呼び出しとは関係ありません。それはあなたによって書かれなければなりません。あなたの答えが2なら、ListViewに関するawesome sourceの情報が見つかりました。私はリンクが壊れても同じ回答を投稿しています。

簡潔に言えば、ListViewは、暗黙的に多くのレンダリングの複雑さを処理します。

要素が画面上に来るときのUITableViewで

ロードバランシングは、あなたはそれをレンダリング同期 する必要があります。つまり、 までは16ms未満です。そうしないと、1つまたは複数のフレームがドロップされます。 のニュースフィードのような複雑な要素をレンダリングする場合、基本的に はこのスケジュールに合致することができませんので、フレームを落とすことになります。

ListViewを使用すると、現在の画面の最後に到達すると、 をレンダリングする行をあらかじめ用意することができます。これらの行は が別のスレッドでレンダリングされるため、 の処理中にUIスレッドをフリーズしません。その理由は、負荷が が均一に広がっていないことです。すべての単一の フレームで新しいストーリーをレンダリングする必要はありません。ほとんどのフレームはスクロールしており、 に新しいストーリーは必要ありません。すべての行がプリレンダリングされるまで、より多くの行をレンダリングしながら、あなたは いくつかの要素と相互に作用しているかのよう

リストビューにも、一度に一つの要素をレンダリングします、それは、それだけのために をブロックしますない ブロックします1行

メモリ管理

のUITableViewは、それが積極的に 細胞を再利用し、非常に保守的なメモリが賢明です。この決定は、メモリが の非常に少ないiPhone 1に戻されました。この問題は、再利用セルが で、開発者にとって非常にエラーが発生しやすいことです。汚れたオブジェクト、 が与えられています。どの突然変異が起こったかわからないので、 はあなたが望むように再構成する必要があります。私たちのiOSアプリでは、 SOOOに多くのバグがありました。

セルを再利用の問題は、一部の細胞はあなたがそれらを再利用 、あなたはその状態をシリアル化し、それを置くことができるようにする必要があり、内部状態 （ビデオプレーヤーランニング、テキスト入力、水平スクロール位置を...）持っているということです 戻る。これは常に可能ではなく、容易ではないので、通常は の状態を解除するか、新しい行に伝播してバグが発生します。

私がReact Nativeで見つけたのは、iphone 4sで、すべての単一の行に対して新しいセルを作成するのに十分速いということです。したがって、私たちは にこの非常に厳しい制約を課す必要はありません。あなたのスクリーンショットでは、 は、しばらくの間スクロールした後に行を削除しないことに気付きました。 これはまったく正しいわけではありませんが、React側のバーチャルドーム の表現は削除されません（chrome dev ツールに表示される内容）が削除されますが、「dom」からこれらの要素を削除して の参照を保持します。

再び表示されたら、それらをdomに戻します。 がメモリ不足の場合、またはリストが大きすぎる場合、それらを破棄して で を最初から再作成してください（上記の状態を解除してください）。このパフォーマンスの最適化はまだ行われていませんが、 ユーザコードには影響しません。

iOSのビューを積極的に削除しようとしましたが、 は実際には非常に高価でした。削除するよりも、 をぶら下げておく方がよいです。変化検出

はリストビューでは、我々は不変性を支持DataSourceオブジェクトを持っています。 レンダリングする要素のリストがある場合は、 1000要素を変更不可能にする必要があります。つまり、前の要素を確認して次の要素を確認して、何かが変更されたかどうかをすぐに知ることができます。このように、何かが変わったときには、 を2つのリストにトラバースして、それらの非常に高速な等価チェックを行い、何が変更されたのかを知ることです。 行が変更されました。そしてそれらを更新するだけです。UITableViewで

レイアウト

、あなたは彼らが画面に表示されていない場合でも、すべての単一の行 のレイアウトを指定するようになってきました。したがって、 が固定サイズでない場合は、基本的に要素を にレンダリングしてそのサイズを知っておかなければなりません。手動で行うことも非常に厄介です。

ReactViewでは、React Nativeがレイアウトシステムを所有しているので、手間のかかる手動計算を自分で行うには は必要ありません。行が レンダリングされると、サイズが更新されます。唯一の欠点は、 スクロールバーがちょっとファンキーであることですが、将来的にスムーズにするためにヒューリスティックで を表示できることは間違いありません。