Virtualisoinnin yhdistäminen datan hakuun

Infinite scroll lataa lisää dataa käyttäjän lähestyessä listan loppua sen sijaan, että sivutettaisiin erillisillä sivupainikkeilla. Yhdessä virtualisoinnin kanssa se mahdollistaa valtavien tietojoukkojen sujuvan selaamisen.

Lista näyttää vain näkyvät rivit, ja uutta dataa haetaan taustalla juuri ennen kuin käyttäjä saavuttaa listan alaosan.

react-windowin listakomponentit hyväksyvät onItemsRendered-callbackin, joka ilmoittaa parhaillaan renderöitävien kohteiden indeksit. Se antaa näkyvien kohteiden ja overscan-alueen alku- ja loppuindeksit.

Tämä callback toimii liittymäkohtana vieritykseen. Sen avulla voidaan selvittää, kuinka pitkälle käyttäjä on vierittänyt listaa, ilman että raakoja vieritystapahtumia tarvitsee käsitellä itse.

Jotta tiedetään, milloin dataa pitää hakea lisää, verrataan onItemsRendered-callbackin overscanStopIndex-arvoa nykyiseen itemCount-arvoon. Kun renderöity ikkuna lähestyy ladatun datan loppua, dataa tarvitaan lisää.

Overscanin loppuindeksin käyttäminen antaa hieman etumatkaa ja käynnistää haun vähän ennen kuin käyttäjä todella saavuttaa viimeisen rivin.

Kun loppuindeksi ylittää kynnyksen, esimerkiksi kun se on yhden näytöllisen päässä itemCount-arvosta, kutsutaan seuraavan sivun hakufunktiota. Kutsu on suojattava, jotta useita päällekkäisiä pyyntöjä ei käynnistetä.

Latauslippu tai sen tarkistaminen, onko haku jo käynnissä, estää päällekkäiset pyynnöt käyttäjän vierittäessä laukaisualueen läpi.

Siisti ratkaisu on asettaa itemCount ladattujen kohteiden määrää yhtä suuremmaksi, kun dataa on vielä saatavilla. Ylimääräisellä rivillä renderöidään latausilmaisin, joka kertoo haun olevan käynnissä.

Kun uutta dataa saapuu, määrä kasvaa ja latausrivi korvautuu oikealla sisällöllä. Näin käyttäjä saa sujuvan visuaalisen palautteen.

react-window-infinite-loader-oheispaketti hoitaa tämän logiikan puolestasi. Annat sille isItemLoaded-, loadMoreItems- ja itemCount-arvot, ja se kutsuu lataajaasi, kun käyttäjä vierittää kohti lataamattomia rivejä.

Se huolehtii ladattujen alueiden seurannasta ja estää tarpeettomat latauskutsut, mikä yksinkertaistaa luotettavan infinite scroll -toteutuksen rakentamista.

Lataamattomille indekseille voi renderöidä tyhjien kohtien sijaan paikka- tai skeleton-rivejä. Renderöintifunktio tarkistaa, onko indeksin kohde ladattu, ja näyttää skeletonin, jos sitä ei ole ladattu.

Skeletonit säilyttävät asettelun ja viestivät etenemisestä, mikä tuntuu paremmalta kuin tyhjä tila seuraavan sivun latautumista odotettaessa.

Haussa voi tapahtua virhe, joten virheet on käsiteltävä hallitusti. Listan loppuun voi renderöidä erillisen virherivin, jossa on uudelleenyrityspainike. Painike kutsuu latausfunktiota uudelleen epäonnistuneen alueen osalta.

Näin lista pysyy käytettävänä tilapäisen virheen jälkeen, ja käyttäjällä on selkeä tapa jatkaa ilman koko sivun lataamista uudelleen.

Infinite-listojen syöttämiseen käytetään kahta yleistä sivutustapaa. Offset-sivutus tekee pyynnön sivunumeron tai ohitettavien kohteiden määrän perusteella, kun taas kursorisivutus pyytää viimeksi nähtyä kohdetta osoittavan opaakin kursorin jälkeisiä kohteita.

Kursorisivutus on yleensä luotettavampi reaaliaikaiselle, muuttuvalle datalle, koska se välttää siirtymät ja päällekkäisyydet, joita offset-arvot voivat aiheuttaa kohteita lisättäessä.

React Query useInfiniteQuery sopii luontevasti yhteen virtualisoinnin kanssa. Se hallitsee haetut sivut, seuraavan kursorin sekä lataus- ja virhetilat, kun taas react-window renderöi sivut tehokkaasti.

Sivut litistetään yhdeksi taulukoksi listaa varten, ja onItemsRendered-kynnyksestä kutsutaan fetchNextPage-funktiota. Näin välimuisti ja uudelleenyritykset ovat käytettävissä ilman erillistä toteutusta.

Infinite scroll lataa sivuja, kun käyttäjä lähestyy listan loppua. onItemsRendered ilmoittaa indeksit, ja overscanStopIndex-arvon vertaaminen itemCount-arvoon kertoo, milloin dataa pitää hakea. Päällekkäiset pyynnöt estetään suojauksella.

Käytä paikka- ja virherivejä sekä react-window-infinite-loaderia seurannan helpottamiseen ja kursorisivutusta reaaliaikaiselle datalle. React Query useInfiniteQuery hallitsee sivuja, kursoreita ja tiloja yhdessä react-windowin renderöinnin kanssa.