使用 TansTack 的 infinite Queries 與 TanStack Virtual 製作 grid 排列的虛擬滾動讀取
最近遇到一個需求,UI 為 grid 排列的格狀列表,每個物件可以透過 api 分頁得到。 所以初步分析:
需要根據螢幕斷點,渲染一列不同行數的 grid
需要與 api 進行分頁讀取,每次傳送 page, page_size
列表最大值會非常多,預防 dom 太多造成畫面卡頓,需要使用虛擬滾動
因最近專案多有引入 TansTack ,分頁讀取的部分會用 infinite Queries 製作,虛擬滾動的做法有很多種,比較常見是 react-window + react-windo...
hannah1120.hashnode.dev4 min read