React NativeのFlatList

自己紹介

• yatatsu
• PAY, inc.
• QRコード決済ができるお支払いアプリ「PAY ID」
• Android, iOS, React Native

---

FlatListとは

• リストを表示するためのコンポーネント
• Flat <=> Section
• https://facebook.github.io/react-native/docs/flatlist

---

in Native App...

• UITableView, UICollectionView in iOS
• RecyclerView in Android
• 単純なScrollViewとの違いは？
  • レイアウトの読み込み遅延と再利用

---

読み込み遅延

• 表示している部分+前後
• 大量のデータでもスムーズに動く
• スクロールに応じて順次読み込んでいく

---

読み込み遅延

---

in FlatList...

• VirtualizedList を継承
• ScrollViewコンポーネントの中にアイテムをレイアウト
• ScrollView→ UIScrollView / ScrollView
• では遅延されない…？

---

遅延される

• ネイティブのScrollViewの上にJS層で実装
• 初回に読み込み+スクロールに応じてバッチで読み込み
• 急なスクロールがあると即座に読み込み
• 読み込み = stateを更新してrender

---

実装

• Libraries/Lists/VirtualizeUtils.js
  • https://github.com/facebook/react-native/blob/master/Libraries/Lists/VirtualizeUtils.js
• 画面の大きさその他に応じてoffsetとlimitを決め
• maxToRenderPerBatch
  • 一回の読み込みバッチでいくつのアイテムを読み込むか
  • デフォルトは10
• updateCellsBatchingPeriod
  • 読み込みバッチのスケジュール間隔

---

Performance

• getItemLayout
  • 読み込みが間に合わないときにこれが渡されていないとガクガクになる
  • scrollToItem / scrollToIndex
  • 読み込み済みのレイアウトまでしかスクロールできない
• maxToRenderPerBatch / updateCellsBatchingPeriod / initialNumToRender
  • 白飛びを防ぎたい
  • 一度にレイアウトするアイテムを増やせる
  • パフォーマンスとのトレードオフ