/VirtualList

仮想リストの解説 / Demo repository of virtualized list UI

Primary LanguageTypeScript

仮想リストUI

非常に多くの要素を含む、長いスクロール領域を持ったUIは描画処理に時間がかかる。

実際に画面上に見えている要素だけを描画することで、パフォーマンスを大幅に向上させることができる。

仮想リストの概要

このリポジトリでは、Reactでの仮想リストの実装方法について検討する。

Warning

このリポジトリはあくまで内部技術に興味がある人向けの検証用リポジトリです。

業務等で使用する実用的な仮想リストの実装を求めている場合は既存のライブラリを当たってください。

内容

  1. 普通のリストUI
  2. 固定サイズ要素の仮想化
  3. バッファリング
  4. スクロール処理のオーバーライド
  5. 状態の切り出しとテスト
  6. Viewportのリサイズへの対応
  7. 行のリサイズへの対応
  8. 行に任意の内容を表示する