Pielāgota lapošana ar dinamisku datu ielādi var uzlabot jūsu lietotnes veiktspēju un vispārējo lietotāja pieredzi.
Lapu šķirošana attiecas uz sistēmu liela datu apjoma sadalīšanai mazākos, vieglāk pārvaldāmos gabalos vai lapās, lai uzlabotu veiktspēju un lietojamību. Pielāgota lapošana, ja tā tiek ieviesta pareizi, var nodrošināt labāku lietotāja pieredzi. Uzziniet, kā programmā React Native izveidot pielāgotu lappušu veidošanas risinājumu, kas ļauj dinamiski ielādēt datus.
Izpratne par pielāgoto lappušu izmantošanu
Izmantojot pielāgotu lappušu piešķiršanu, izstrādātāji var izveidot lappušu piešķiršanas mehānismu, kas atbilst viņu lietojumprogrammas īpašajām prasībām. Pielāgota lappušu veidošana var ietvert unikāla lietotāja saskarnes izstrādi, lai pārvietotos starp lapām, un algoritmu ieviešanu datu iegūšana no datu bāzes vai API, vai ietver tādas funkcijas kā bezgalīga ritināšana vai slinka ielāde.
Pielāgotās lappušu veidošanas priekšrocības
Pielāgotas lappušu sistēmas izveide savām React Native mobilajām lietotnēm var sniegt dažas priekšrocības:
- Tas var uzlabot jūsu lietotnes mērogojamību, ļaujot tai efektīvāk apstrādāt lielāku datu apjomu. Tas ir īpaši svarīgi lietotnēm, kas nodarbojas ar lielām datu kopām.
- Pielāgota lapošana var uzlabot jūsu lietotnes veiktspēju, sadalot datus mazākos un vieglāk pārvaldāmos gabalos. Tas samazinās ielādes laiku.
- Izmantojot pielāgotu lappušu kārtošanu, jums būs lielāka elastība un kontrole, prezentējot un piekļūstot datiem savā lietotnē.
Dinamiskās ielādes ieviešana ar pielāgotu lappušu šķirošanu
Ja jūsu React Native lietojumprogramma ielādē tikai nepieciešamos datus, kas tai tajā laikā ir jāielādē, to sauc par dinamisko ielādi. Lai ieviestu dinamisko ielādi ar pielāgotu lappušu piešķiršanu, varat veikt tālāk norādītās vispārīgās darbības.
- Nosakiet lappušu veidošanas metodi: izlemiet par lappušu piešķiršanas metodi, kas vislabāk atbilst jūsu saturam. Tas varētu būt tradicionāls lapām lappušu sistēma, kurā lietotāji noklikšķina, lai ielādētu nākamo lapu, vai bezgalīga ritināšana sistēma, kurā tiek ielādēts vairāk satura, lietotājam ritinot lapu uz leju.
- Rakstiet servera un klienta puses kodu: jūs rakstīsit servera puses kodu, lai apstrādātu konkrētu datu lapu lappušu pieprasījumus, un atgriezīsiet tikai šīs lapas datus. Pēc tam jūs ierakstīsit klienta puses kodu, lai noklausītos lietotāja darbības, kas aktivizē papildu datu pieprasījumus, piemēram, noklikšķināšanu uz a Ielādēt vairāk pogu vai ritinot līdz lapas apakšdaļai.
- Ieviesiet datu ielādi: kad lietotājs aktivizē papildu datu pieprasījumu, lietotnei ir jānosūta servera pusei pieprasījums pēc nākamās datu lapas. Pēc tam servera pusei ir jāatgriež tikai šīs lapas dati, kurus lietotne var izmantot lapas atjaunināšanai.
- Atjauniniet lapu: Visbeidzot, jūs atjaunināsiet lapu ar tikko ielādētajiem datiem. Tas varētu ietvert jauno datu pievienošanu esošam vienumu sarakstam vai visa saraksta aizstāšanu ar jaunajiem datiem.
Datu avota iestatīšana
Pirmais solis pielāgotās lappušu ieviešanā React Native ir datu avota iestatīšana. Tas parasti ietver datu izgūšanu no API vai datu bāzes un to saglabāšanu stāvokļa mainīgajā. Apsveriet vienkārša REST API kas atgriež grāmatu sarakstu.
Šeit ir piemērs tam, kā varētu izskatīties API atbilde:
{
"dati": [
{
"id": 1,
"nosaukums": "Ķērājs rudzos",
"autors": "J.D. Selindžers"
},
{
"id": 2,
"nosaukums": "Nogalināt lakstīgalu",
"autors": "Hārpers Lī"
},
// ...
],
"lappuse": 1,
"kopā lapas": 5
}
Lai iegūtu šos datus mūsu React Native lietotnē, mēs varam izmantot atnest funkcija, kas atgriež a Apsolīt kas tiek atrisināts ar atbildi no REST API.
Pielāgotas lappuses funkcijas izveide
Turpināsim izveidot funkciju, kas iegūs datus no API un atjauninās stāvokli ar tikko saņemtajiem datiem. Šī funkcija izlems, ko renderēt React Native lietotnes ekrānā.
Mēs darīsim definējiet šo funkciju kā asinhronu funkciju kas ņem lapas parametru un atgriež solījumu, kas tiek atrisināts ar ienestajiem datiem.
konst PAGE_SIZE = 10;
konst fetchBooks = asinhrons (lapa) => {
mēģināt {
konst atbilde = gaidīt atnest(` https://myapi.com/books? lapa=${page}&pageSize=${PAGE_SIZE}`);
konst json = gaidīt response.json();
atgriezties json.data;
} noķert (kļūda) {
konsole.error (kļūda);
atgriezties [];
}
}
Iepriekš esošajā koda blokā fetchBooks funkcija aizņem a lappuse parametru un atgriež solījumu, kas tiek atrisināts ar datiem no šīs lapas. Lūk, PAGE_SIZE konstante tiek izmantota, lai ierobežotu vienā lapā ienesamo grāmatu skaitu.
Dinamiskās ielādes ieviešana, izmantojot pielāgoto lappušu šķirošanas funkciju
Kad pielāgotā lappušu funkcija ir definēta, tagad varat to izmantot, lai lietotnē ieviestu dinamisku ielādi. Lai to izdarītu, izmantojiet FlatList komponents, kas ir augstas veiktspējas komponents lielu datu sarakstu renderēšanai programmā React Native.
Vispirms iestatiet FlatList komponents ar kādu sākotnējo stāvokli:
imports Reaģēt, { useState, useEffect } no'reaģēt';
imports { FlatList, View, Text } no'react-native';konst Lietotne = () => {
konst [grāmatas, setBooks] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);useEffect(() => {
// Iegūt sākotnējo datu lapu
fetchBooks (currentPage).then(datus => setBooks (dati));
}, []);konst renderItem = ({ lieta }) => {
atgriezties (fonta izmērs: 18 }}>{item.title}</Text> fonta izmērs: 14 }}>{item.author}</Text>
</View>
);
};atgriezties (
dati={grāmatas}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
/>
);
}
eksportētnoklusējuma Lietotne;
Šis kods iestata FlatList komponentu ar diviem stāvokļa elementiem, proti grāmatas un Pašreizējā lapa. Mēs izmantojam useEffect() āķis, lai izgūtu sākotnējo datu lapu, kad mūsu lietotne pirmo reizi tiek palaista.
Tālāk mēs definējam a renderItem funkcija, kas paņem vienumu no grāmatas masīvs un atgriež a Skatīt satur grāmatas nosaukumu un autoru.
Beidzot esam izturējuši grāmatas masīvs uz datus rekvizīti FlatList, kopā ar mūsu renderItem funkcija un KeyExtractor.
Tagad mums ir jāpārliecinās, ka mūsu Flatlist var noteikt, kad lietotājs ritina līdz saraksta beigām. Tajā brīdī tai jāturpina iegūt un ielādēt jaunos datus un tos renderēt.
Lai to izdarītu, mēs izmantosim onEndReached atbalsts sniegts FlatList, kas ir atzvanīšana, ko izsauc, kad lietotājs ritina līdz saraksta beigām. Mums vajadzētu arī atjaunināt mūsu Pašreizējā lapa stāvokli, lai izsekotu, kurā lapā pašlaik atrodamies.
Šeit ir atjaunināts kods, kas to visu īsteno:
imports Reaģēt, { useState, useEffect } no'reaģēt';
imports { FlatList, View, Text } no'react-native';konst Lietotne = () => {
konst [grāmatas, setBooks] = useState([]);
konst [currentPage, setCurrentPage] = useState(1);
konst [isLoading, setIsLoading] = useState(viltus);useEffect(() => {
fetchBooks (currentPage).then(datus => setBooks (dati));
}, []);konst atnestVairāk = asinhrons () => {
ja (Notiek ielāde) atgriezties;setIsLoading(taisnība);
konst nākamā lapa = pašreizējā lapa + 1;
konst jauniDati = gaidīt fetchBooks (nākamā lapa);setCurrentPage (nākamā lapa);
setIsLoading(viltus);
setBooks(prevData => [...iepriekšējieDati, ...jaunieDati]);
};konst renderItem = ({ lieta }) => {
atgriezties (polsterējums: 16 }}> fonta izmērs: 18 }}>{item.title}</Text> fonta izmērs: 14 }}>{item.author}</Text>
</View>
);
};atgriezties (
dati={grāmatas}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
onEndReached={fetchMore}
onEndReachedThreshold={0.1}
/>
);
}
eksportētnoklusējuma Lietotne;
Šeit mēs esam pievienojuši divus jaunus stāvokļus ar nosaukumu Notiek ielāde un onEndReachedThreshold. Notiek ielāde izseko, vai mēs pašlaik ienesam datus, un onEndReachedThreshold aizdedzina onEndReached atzvanīšana, kad lietotājs ir ritinājis līdz 10% no saraksta beigām.
Mēs izveidojām jaunu funkciju ar nosaukumu atnestVairāk kas darbojas, kad onEndReached tiek atlaists. Tas pārbauda, vai mēs jau ielādējam datus, un, ja nē, tas ienes nākamo datu lapu un atjaunina mūsu sarakstu.
Visbeidzot, mēs pievienojām jaunus nepieciešamos rekvizītus FlatList komponents. The FlatList komponents tagad dinamiski ielādēs datus, lietotājam ritinot līdz saraksta beigām.
Uzlabojiet savas lietotnes veiktspēju, izmantojot pielāgotu lappušu izkārtojumu
Jūs uzzinājāt, kā dinamiski ielādēt datus programmā React Native, izmantojot savu pielāgoto lappušu sistēmu. Šī metode nodrošina lielāku elastību un kontroli, strādājot ar lielu datu apjomu savā lietotnē. Neaizmirstiet pielāgot lappušu skaitu, lai tā atbilstu jūsu lietotnes stilam un vajadzībām. Varat to vēl vairāk pielāgot, lai iegūtu vēlamo izskatu un funkcionalitāti. Kopumā tas noteikti palīdzētu optimizēt jūsu lietotnes veiktspēju.
