Tinkintas puslapių rūšiavimas su dinaminiu duomenų įkėlimu gali pagerinti programos našumą ir bendrą naudotojo patirtį.
Puslapių spausdinimas reiškia didelių duomenų kiekių padalijimą į mažesnius, lengviau valdomus gabalus arba puslapius, siekiant pagerinti našumą ir patogumą. Tinkamai įdiegtas tinkintas puslapių numeravimas gali suteikti geresnę vartotojo patirtį. Sužinokite, kaip sukurti pasirinktinį puslapių numeravimo sprendimą „React Native“, leidžiantį dinamiškai įkelti duomenis.
Pasirinktinio puslapiavimo supratimas
Naudodami tinkintą puslapių numeravimą, kūrėjai gali sukurti puslapių numeravimo mechanizmą, atitinkantį konkrečius jų programos reikalavimus. Pasirinktinis puslapių rūšiavimas gali apimti unikalios vartotojo sąsajos, skirtos naršyti po puslapius, sukūrimą ir algoritmų įgyvendinimą gauti duomenis iš duomenų bazės arba API, arba su tokiomis funkcijomis kaip begalinis slinkimas arba tingus įkėlimas.
Pasirinktinio puslapių spausdinimo privalumai
Sukūrus tinkintą puslapių rūšiavimo sistemą „React Native“ programėlėms mobiliesiems, gali būti keletas pranašumų:
- Tai gali pagerinti jūsų programos mastelio keitimą, leisdama jai efektyviau apdoroti didesnį duomenų kiekį. Tai ypač svarbu programoms, kurios dirba su dideliais duomenų rinkiniais.
- Tinkintas puslapių rūšiavimas gali pagerinti programos našumą padalydamas duomenis į mažesnes ir lengviau valdomas dalis. Tai sumažins įkrovimo laiką.
- Naudodami tinkintą puslapių puslapių rūšiavimą turėsite daugiau lankstumo ir galimybių pateikti ir pasiekti duomenis programoje.
Dinaminio įkėlimo su tinkintu puslapiu įgyvendinimas
Kai jūsų programa „React Native“ įkelia tik tuos reikiamus duomenis, kuriuos jai reikia įkelti, tai vadinama dinamine įkėlimu. Norėdami įdiegti dinaminį įkėlimą naudodami tinkintą puslapių rūšiavimą, galite atlikti šiuos bendruosius veiksmus:
- Nustatykite puslapių spausdinimo metodą: nuspręskite, koks puslapių puslapių rūšiavimo metodas geriausiai tinka jūsų turiniui. Tai gali būti tradicinė puslapio pagrindu puslapių rūšiavimo sistema, kurioje vartotojai spustelėja norėdami įkelti kitą puslapį, arba an begalinis slinktis sistema, kur vartotojui slenkant puslapiu žemyn, įkeliama daugiau turinio.
- Parašykite serverio ir kliento pusės kodus: rašysite serverio kodą, kad galėtumėte apdoroti konkrečių duomenų puslapių puslapių rūšiavimo užklausas ir grąžinti tik to puslapio duomenis. Tada parašysite kliento kodą, kad išklausytumėte naudotojo veiksmus, suaktyvinančius užklausas gauti daugiau duomenų, pvz., spustelėjus a Įkelti daugiau mygtuką arba slinkdami į puslapio apačią.
- Įdiekite duomenų įkėlimą: kai vartotojas suaktyvina užklausą gauti daugiau duomenų, programa turi išsiųsti serverio užklausą dėl kito duomenų puslapio. Tada serverio pusė turėtų grąžinti tik to puslapio duomenis, kuriuos programa gali naudoti atnaujindama puslapį.
- Atnaujinkite puslapį: Galiausiai atnaujinsite puslapį naujai įkeltais duomenimis. Tai gali apimti naujų duomenų pridėjimą prie esamo elementų sąrašo arba viso sąrašo pakeitimo naujais duomenimis.
Duomenų šaltinio nustatymas
Pirmasis žingsnis diegiant tinkintą puslapių rūšiavimą „React Native“ yra duomenų šaltinio nustatymas. Paprastai tai apima duomenų gavimą iš API arba duomenų bazės ir saugojimą būsenos kintamajame. Apsvarstykite paprasta REST API kuris grąžina knygų sąrašą.
Štai pavyzdys, kaip gali atrodyti API atsakymas:
{
"duomenys": [
{
"id": 1,
"titulas": „Gudytojas rugiuose“,
"autorius": "J.D. Selindžeris"
},
{
"id": 2,
"titulas": "Nužudyti strazdą giesmininką",
"autorius": "Harper Lee"
},
// ...
],
"puslapis": 1,
"iš viso puslapių": 5
}
Norėdami gauti šiuos duomenis savo programoje „React Native“, galime naudoti atnešti funkcija, kuri grąžina a Pažadas kuris išsprendžiamas atsakant iš REST API.
Pasirinktinės puslapių spausdinimo funkcijos kūrimas
Pradėkime kurti funkciją, kuri paims duomenis iš API ir atnaujins būseną naujai gautais duomenimis. Ši funkcija nuspręs, ką pateikti „React Native“ programos ekrane.
Mes padarysime apibrėžkite šią funkciją kaip asinchroninę funkciją kuris paima puslapio parametrą ir grąžina pažadą, kuris išsprendžiamas naudojant gautus duomenis.
konst PAGE_SIZE = 10;
konst fetchBooks = async (puslapis) => {
bandyti {
konst atsakymas = laukti atnešti (` https://myapi.com/books? puslapis =${page}&pageSize=${PAGE_SIZE}`);
konst json = laukti atsakymas.json();
grąžinti json.data;
} sugauti (klaida) {
konsolė.error (klaida);
grąžinti [];
}
}
Aukščiau esančiame kodo bloke atnešti knygas funkcija užima a puslapį parametrą ir grąžina pažadą, kuris išsprendžiamas naudojant duomenis iš to puslapio. Čia, PAGE_SIZE konstanta naudojama apriboti viename puslapyje gaunamų knygų skaičių.
Dinaminio įkėlimo įgyvendinimas naudojant pasirinktinę puslapių spausdinimo funkciją
Apibrėžę tinkintą puslapių rūšiavimo funkciją, dabar galite ją naudoti norėdami įgyvendinti dinaminį įkėlimą programoje. Norėdami tai padaryti, naudokite Plokščiasis sąrašas komponentas, kuris yra didelio našumo komponentas, skirtas dideliems duomenų sąrašams pateikti „React Native“.
Pirmiausia nustatykite Plokščiasis sąrašas komponentas su tam tikra pradine būsena:
importuoti Reaguoti, { useState, useEffect } iš'reaguoti';
importuoti { FlatList, View, Text } iš'react-native';konst Programa = () => {
konst [knygos, rinkiniaiKnygos] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);useEffect (() => {
// Gauti pradinį duomenų puslapį
fetchBooks (currentPage).then(duomenis => setBooks (duomenys));
}, []);konst renderItem = ({ elementas }) => {
grąžinti (šrifto dydis: 18 }}>{item.title}</Text> šrifto dydis: 14 }}>{item.author}</Text>
</View>
);
};grąžinti (
data={knygos}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
/>
);
}
eksportuotinumatytas Programėlė;
Šis kodas nustato „FlatList“ komponentą su dviem būsenos dalimis, būtent knygos ir Dabartinis puslapis. Mes naudojame useEffect() kabliukas, kad gautumėte pradinį duomenų puslapį, kai programa paleidžiama pirmą kartą.
Toliau apibrėžiame a renderItem funkcija, kuri paima elementą iš knygos masyvas ir grąžina a Žiūrėti su knygos pavadinimu ir autoriumi.
Pagaliau praėjome knygos masyvas į duomenis rekvizitas Plokščiasis sąrašas, kartu su mūsų renderItem funkcija ir KeyExtractor.
Dabar turime užtikrinti, kad mūsų „Flatlist“ galėtų aptikti, kada vartotojas slenka iki sąrašo pabaigos. Tuo metu jis turėtų pradėti gauti ir įkelti naujus duomenis ir juos pateikti.
Norėdami tai padaryti, naudosime onEndReached rekvizitas pateiktas Plokščiasis sąrašas, kuris yra atgalinis skambutis, kai vartotojas slenka į sąrašo pabaigą. Taip pat turėtume atnaujinti savo Dabartinis puslapis būseną, kad galėtumėte sekti, kuriame puslapyje šiuo metu esame.
Štai atnaujintas kodas, įgyvendinantis visa tai:
importuoti Reaguoti, { useState, useEffect } iš'reaguoti';
importuoti { FlatList, View, Text } iš'react-native';konst Programa = () => {
konst [knygos, rinkiniaiKnygos] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);
konst [isLoading, setIsLoading] = useState(klaidinga);useEffect (() => {
fetchBooks (currentPage).then(duomenis => setBooks (duomenys));
}, []);konst gautiDaugiau = async () => {
jeigu (įkeliama) grąžinti;setIsLoading(tiesa);
konst nextPage = dabartinisPuslapis + 1;
konst nauji duomenys = laukti „fetchBooks“ (kitas puslapis);setCurrentPage (nextPage);
setIsLoading(klaidinga);
setBooks (prevData => [...prevData, ...newData]);
};konst renderItem = ({ elementas }) => {
grąžinti (kamšalas: 16 }}> šrifto dydis: 18 }}>{item.title}</Text> šrifto dydis: 14 }}>{item.author}</Text>
</View>
);
};grąžinti (
data={knygos}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
onEndReached={fetchDaugiau}
onEndReachedThreshold={0.1}
/>
);
}
eksportuotinumatytas Programėlė;
Čia mes įtraukėme dvi naujas būsenas, vadinamas iskraunama ir onEndReachedThreshold. iskraunama seka, ar šiuo metu gauname duomenis, ir onEndReachedThreshold paleidžia onEndReached atgalinis skambutis, kai vartotojas slenka iki 10 % sąrašo pabaigos.
Sukūrėme naują funkciją, pavadintą gautiDaugiau kad veikia kai onEndReached yra atleistas. Ji patikrina, ar jau įkeliame duomenis, o jei ne, paima kitą duomenų puslapį ir atnaujina sąrašą.
Galiausiai, mes pridėjome naujų reikalingų rekvizitų Plokščiasis sąrašas komponentas. The Plokščiasis sąrašas komponentas dabar dinamiškai įkels duomenis, kai vartotojas slinks į sąrašo pabaigą.
Pagerinkite savo programos našumą naudodami tinkintą puslapių rūšiavimą
Sužinojote, kaip dinamiškai įkelti duomenis „React Native“, naudodami savo pasirinktinę puslapių rūšiavimo sistemą. Šis metodas suteikia daugiau lankstumo ir valdymo, kai programoje dirbate su dideliu duomenų kiekiu. Nepamirškite pritaikyti puslapių numeravimo, kad jis atitiktų programos stilių ir poreikius. Galite jį dar labiau pritaikyti, kad pasiektumėte norimą išvaizdą ir funkcionalumą. Apskritai tai tikrai padėtų optimizuoti programos našumą.
