Hvad er AsyncStorage i React Native, og hvordan bruges det?

React Natives AsyncStorage gør lagring og vedvarende data i en React Native-app enkel. Med AsyncStorage API kan du håndtere simple tilfælde af små data i din app uden behov for enhedens lokale lager eller komplekse lagersystemer.

Hvad er React Natives AsyncStorage?

AsyncStorage API er et vedvarende nøgleværdi-lagringssystem. API'et understøtter en række af JavaScript-datatyper, herunder streng-, boolean-, nummer- og JSON-objekter.

De data, der er gemt ved hjælp af AsyncStorage, fortsætter og forbliver tilgængelige, selvom appen lukker, eller enheden genstarter. Dette gør AsyncStorage til en ideel lagringsløsning til cachelagring af data og lagring af små mængder applikationstilstand.

Hvilket problem løser AsyncStorage?

Før fremkomsten af ​​AsyncStorage var korrekt datacache en upålidelig indsats. Du kan enten gemme data i lokalt lager, som ikke er i stand til at bevare data, når din app lukker, eller du kan gemme dataene i et RDBMS (Relational Database Management System). Men de er for komplekse til at fungere til denne brugssituation.

AsyncStorage løser disse problemer ved at tilbyde en enkel, pålidelig måde at gemme små og midlertidige data i React Native-applikationer.

For at gemme data med AsyncStorage serialiseres dataene først til en JSON-streng. JSON-strengen gemmes derefter i et nøgleværdisystem. Når du forsøger at hente data fra AsyncStorage, deserialiseres dataene fra JSON og returneres derefter til dig i dets originale format.

Disse er asynkrone programmer der kører uden at blokere JavaScript-hovedtråden. Gør den ideel til lagring af data, der kræver hyppig adgang, såsom brugerindstillinger og applikationstilstand.

AsyncStorage-metoder

For at installere react-native-async-storage pakke, skal du køre følgende kommando inde i dit projekts terminal:

npm installer @react-native-async-storage/async-storage

Da AsyncStorage er asynkron af natur, vil dets metoder ikke returnere resultater med det samme. I stedet returnerer de et løfte, der løser sig, når operationen er afsluttet.

Du bør bruge asynkron/afvent syntaks eller en lignende teknik, når du kalder AsyncStorage-metoder.

Skriv data ved hjælp af metoderne setItem() og multiSet().

Det setItem() og multiSet() metoder bruges til at indstille værdierne for den givne nøgle. Disse metoder accepterer nøglen og værdierne som parametre.

Metoden ville returnere et løfte, der løses med en boolesk værdi, der angiver, om operationen var vellykket, eller afviser med en fejl, hvis operationen mislykkedes:

// Gem en værdi for nøglen "bruger"
vente AsyncStorage.setItem('bruger', 'John');
// Gem flere værdier for nøglen "bruger"
vente AsyncStorage.multiSet(['bruger', 'John', 'due']);

Læs data ved hjælp af metoderne getItem() og multiGet().

Med getItem() metode, kan du trække gemte data fra lageret ved at bruge nøglen til den værdi, du ønsker at få. Hvis den beståede nøgle ikke eksisterer, afvises løftet med en fejl:

konst navn = vente AsyncStorage.getItem('bruger');

Værdien returneret af getItem() er en streng. Hvis du skal gemme data i et andet format, kan du bruge JSON.stringify() at konvertere dataene til en streng, før de gemmes. Brug derefter JSON.parse() at konvertere strengen tilbage til den oprindelige datatype, når den hentes.

For eksempel:

// Gem objektet {navn: "John Doe", alder: 30} for nøglen "bruger"
vente AsyncStorage.setItem('bruger', JSON.stringify({navn: "John Doe", alder: 30}));
// Hent objektet for nøglen "bruger"
konst bruger = JSON.parse(vente AsyncStorage.getItem('bruger'));

Du kan også bruge multiGet() metode til at trække flere nøgleværdi-par. Metoden vil tage en række nøgler, der skal være strenge.

Flet data ved hjælp af metoderne mergeItem() og multiMerge().

Det mergeItem() og multiMerge() metoder fusionerer den givne værdi med den eksisterende værdi for den givne nøgle. Værdien overført til mergeItem() kan være enhver type data. Det er dog vigtigt at bemærke, at AsyncStorage ikke krypterer dataene, så alle med adgang til enheden kan læse dataene:

vente AsyncStorage.mergeItem('navn', 'Jane Doe');

mergeItem() tager nøglen for den værdi, du vil flette, og den nye værdi, du vil flette med den eksisterende værdi af nøglen. Brug multiMerge() at flette mere end ét element til en nøgleværdi.

Ryd lager ved hjælp af clear()-metoden

Det klar() metode giver dig mulighed for at fjerne alle de elementer, der er gemt i AsyncStorage. Det kan være nyttigt i forskellige scenarier, såsom når du skal nulstille appens tilstand under en brugerlog ud eller ryd cachelagrede data på din mobiltelefon.

For eksempel:

konst clearData = asynkron () => {
prøve {
vente AsyncStorage.clear();

 } fangst (e) {
konsol.fejl (e);
 }
};

Ovenstående kode vil slette alle nøgleværdi-par, der er gemt i AsyncStorage.

Derudover kan du give en tilbagekaldsfunktion til klar(), som vil blive påkaldt, når handlingen er fuldført:

AsyncStorage.clear()
 .derefter(() => {
// Ryd operation fuldført

 })
 .fangst((fejl) => {
konsol.fejl (fejl);
 });

Bemærk, at klar() metode vil permanent slette alle data, der er gemt i AsyncStorage.

Caching af data med AsyncStorage

Caching af data er en almindelig praksis i udvikling af mobilapps for at forbedre ydeevnen og reducere netværksanmodninger. Med AsyncStorage kan du nemt cache data i React Native apps.

Når du tilgår et stykke data, tjekkes dataene først for at se, om de allerede er i cachen. Hvis det er det, returneres dataene fra cachen. Hvis det ikke er, så henter programmet dataene fra den mere permanente lagerplads og gemmer dem i cachen. Næste gang du får adgang til dataene, vil de i stedet blive returneret fra cachen.

Antag, at du har en app, der viser en liste over bøger, der er hentet fra en API. For at forbedre ydeevnen kan du cache de hentede bogdata ved hjælp af AsyncStorage.

Her er et eksempel på implementering af dette:

konst [books, setBooks] = useState([]);
useEffect(() => {
konst henteBøger = asynkron () => {
prøve {
// Tjek om de cachelagrede data findes
konst cachedData = vente AsyncStorage.getItem('cachedBooks');
hvis (cachedData !== nul) {
// Hvis de cachelagrede data findes, skal du parse og indstille dem som starttilstand
 sætbøger(JSON.parse (cachedData));
 } andet {
// Hvis de cachelagrede data ikke findes, skal du hente data fra API'et
konst svar = vente hente(' https://api.example.com/books');
konst data = vente response.json();
// Cache de hentede data
vente AsyncStorage.setItem('cachedBooks', JSON.stringify (data));
// Indstil de hentede data som starttilstand
 sætbøger (data);
 }
 } fangst (fejl) {
konsol.fejl (fejl);
 }
 };
 henteBøger();
 }, []);

I dette eksempel bruger du useEffect krog for at hente bogdataene. Indenfor hente bøger funktion, skal du kontrollere, om de cachelagrede data findes ved at ringe AsyncStorage.getItem('cachedBooks'). Hvis de cachelagrede data findes, skal du analysere dem vha JSON.parse og indstil den som starttilstand ved hjælp af sætbøger. Dette giver dig mulighed for at vise de cachelagrede data med det samme.

Hvis de cachelagrede data ikke findes, hent data fra API'et ved hjælp af fetch() metoden. Når dataene er returneret, skal du cache dem ved at ringe AsyncStorage.setItem(). Indstil derefter de hentede data som starttilstand, og sørg for, at yderligere gengivelser viser de hentede data.

Du kan nu vise de cachelagrede bøger på denne måde:

importere Reager, { useEffect, useState } fra'reagere';
importere { View, Text, Flat List } fra'reager-native';
importere AsyncStorage fra'@react-native-async-storage/async-storage';
konst App = () => {
Vend tilbage (

Bogliste</Text>
 data={bøger}
 keyExtractor={(item) => item.id.toString()}
 renderItem={({ item }) => (

{item.title}</Text>
{item.author}</Text>
 </View>
 )}
 />
 </View>
 );
};
eksportStandard App;

Yderligere applanceringer eller genindlæsninger af skærme vil vise de cachelagrede data uden at lave unødvendige API-anmodninger.

Brug af AsyncStorage til dynamisk dataindlæsning

React Native AsyncStorage tilbyder en kraftfuld løsning til lagring og hentning af data. Ved at udnytte caching-kapaciteter forbedrer det ydeevnen og giver hurtigere adgang til lagrede data.

Når du kombinerer viden om AsyncStorage med teknikker som brugerdefineret paginering, kan du dynamisk indlæse og vise data i din React Native-app. Dette vil muliggøre effektiv håndtering af store datasæt.