Kaj je AsyncStorage v React Native in kako ga uporabljati?

AsyncStorage React Native poenostavlja shranjevanje in ohranjanje podatkov v aplikaciji React Native. Z API-jem AsyncStorage lahko obravnavate preproste primere majhnih podatkov v vaši aplikaciji brez potrebe po lokalnem pomnilniku naprave ali zapletenih sistemih za shranjevanje.

Kaj je AsyncStorage React Native?

API AsyncStorage je trajni sistem za shranjevanje ključev in vrednosti. API podpira vrsto podatkovni tipi JavaScript, vključno z nizi, logičnimi vrednostmi, številkami in objekti JSON.

Podatki, shranjeni z uporabo AsyncStorage, se ohranijo in bodo ostali na voljo, tudi če se aplikacija zapre ali naprava znova zažene. Zaradi tega je AsyncStorage idealna rešitev za shranjevanje podatkov za predpomnjenje podatkov in shranjevanje majhnih količin stanja aplikacije.

Katero težavo rešuje AsyncStorage?

Pred pojavom AsyncStorage je bilo pravilno predpomnjenje podatkov nezanesljivo. Podatke lahko shranite v lokalno shrambo, ki ne more obdržati podatkov, ko se vaša aplikacija zapre, ali pa jih shranite v sistem za upravljanje relacijskih baz podatkov (RDBMS). Vendar so preveč zapleteni za delovanje v tem primeru uporabe.

AsyncStorage rešuje te težave z zagotavljanjem preprostega in zanesljivega načina za shranjevanje majhnih in začasnih podatkov v aplikacijah React Native.

Za shranjevanje podatkov z AsyncStorage se podatki najprej serializirajo v niz JSON. Niz JSON se nato shrani v sistemu ključ-vrednost. Ko poskušate pridobiti podatke iz AsyncStorage, se podatki deserializirajo iz JSON in vam nato vrnejo v izvirni obliki.

To so asinhroni programi ki delujejo brez blokiranja glavne niti JavaScript. Zaradi česar je idealen za shranjevanje podatkov, ki potrebujejo pogost dostop, kot so uporabniške nastavitve in stanje aplikacije.

Metode AsyncStorage

Za namestitev react-native-async-storage paket, zaženite naslednji ukaz znotraj terminala vašega projekta:

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

Ker je AsyncStorage po naravi asinhron, njegove metode ne bodo takoj vrnile rezultatov. Namesto tega vrnejo obljubo, ki se razreši, ko je operacija končana.

Moral bi uporabiti async/počakaj sintakso ali podobno tehniko pri klicanju metod AsyncStorage.

Zapišite podatke z uporabo metod setItem() in multiSet().

The setItem() in multiSet() metode se uporabljajo za nastavitev vrednosti za dani ključ. Te metode sprejmejo ključ in vrednosti kot parametre.

Metoda bi vrnila obljubo, ki se razreši z logično vrednostjo, ki kaže, ali je bila operacija uspešna, ali zavrne z napako, če operacija ni uspela:

// Shrani vrednost za ključ "user"
čakati AsyncStorage.setItem('uporabnik', 'janez');
// Shrani več vrednosti za ključ "user"
čakati AsyncStorage.multiSet(['uporabnik', 'janez', 'srna']);

Branje podatkov z uporabo metod getItem() in multiGet().

z getitem() lahko potegnete shranjene podatke iz pomnilnika s ključem za vrednost, ki jo želite pridobiti. Če posredovani ključ ne obstaja, se obljuba zavrne z napako:

konst ime = čakati AsyncStorage.getItem('uporabnik');

Vrednost, ki jo je vrnil getitem() je niz. Če morate podatke shraniti v drugi obliki, lahko uporabite JSON.stringify() za pretvorbo podatkov v niz, preden jih shranite. Nato uporabite JSON.parse() da pretvorite niz nazaj v prvotni podatkovni tip, ko ga pridobite.

Na primer:

// Shrani objekt {name: "John Doe", starost: 30} za ključ "user"
čakati AsyncStorage.setItem('uporabnik', JSON.stringify({ime: "John Doe", starost: 30}));
// Pridobite objekt za ključ "user"
konst uporabnik = JSON.parse(čakati AsyncStorage.getItem('uporabnik'));

Uporabite lahko tudi multiGet() metoda za pridobivanje več parov ključ-vrednost. Metoda bo prevzela niz ključev, ki morajo biti nizi.

Spajanje podatkov z uporabo metod mergeItem() in multiMerge().

The mergeItem() in multiMerge() metode združijo dano vrednost z obstoječo vrednostjo za dani ključ. Vrednost, posredovana v mergeItem() je lahko katera koli vrsta podatkov. Vendar je pomembno upoštevati, da AsyncStorage ne šifrira podatkov, tako da lahko kdor koli z dostopom do naprave bere podatke:

čakati AsyncStorage.mergeItem('ime', 'Jane Doe');

mergeItem() prevzame ključ za vrednost, ki jo želite združiti, in novo vrednost, ki jo želite združiti z obstoječo vrednostjo ključa. Uporaba multiMerge() za združitev več kot ene postavke v ključno vrednost.

Počisti shrambo z metodo clear().

The počisti() vam omogoča, da odstranite vse elemente, shranjene v AsyncStorage. Uporabno je lahko v različnih scenarijih, na primer ko morate ponastaviti stanje aplikacije med odjavo uporabnika ali počistite predpomnjene podatke na svojem mobilnem telefonu.

Na primer:

konst clearData = asinh () => {
poskusi {
čakati AsyncStorage.clear();

 } ulov (e) {
konzola.napaka (e);
 }
};

Zgornja koda bo izbrisala vse pare ključ-vrednost, shranjene v AsyncStorage.

Poleg tega lahko omogočite funkcijo povratnega klica počisti(), ki bo priklican, ko bo operacija končana:

AsyncStorage.clear()
 .potem(() => {
// Operacija brisanja končana

 })
 .catch((napaka) => {
konzola.error (napaka);
 });

Upoštevajte, da je počisti() metoda bo trajno izbrisala vse podatke, shranjene v AsyncStorage.

Predpomnjenje podatkov z AsyncStorage

Predpomnjenje podatkov je običajna praksa pri razvoju mobilnih aplikacij za izboljšanje zmogljivosti in zmanjšanje omrežnih zahtev. Z AsyncStorage lahko preprosto predpomnite podatke v aplikacijah React Native.

Ko dostopate do podatka, se podatki najprej preverijo, ali so že v predpomnilniku. Če je, se podatki vrnejo iz predpomnilnika. Če ni, potem program pridobi podatke s trajnejšega mesta shranjevanja in jih shrani v predpomnilnik. Ko boste naslednjič dostopali do podatkov, bodo vrnjeni iz predpomnilnika.

Recimo, da imate aplikacijo, ki prikazuje seznam knjig, pridobljenih iz API-ja. Za izboljšanje zmogljivosti lahko predpomnite pridobljene podatke o knjigah z uporabo AsyncStorage.

Tukaj je primer izvedbe tega:

konst [knjige, setKnjige] = useState([]);
useEffect(() => {
konst fetchBooks = asinh () => {
poskusi {
// Preverite, ali predpomnjeni podatki obstajajo
konst cachedData = čakati AsyncStorage.getItem('cachedBooks');
če (cachedData !== nič) {
// Če predpomnjeni podatki obstajajo, jih razčlenite in nastavite kot začetno stanje
 setBooks(JSON.parse (cachedData));
 } drugače {
// Če predpomnjeni podatki ne obstajajo, pridobi podatke iz API-ja
konst odgovor = čakati prinesi (' https://api.example.com/books');
konst podatki = čakati odziv.json();
// Predpomnite pridobljene podatke
čakati AsyncStorage.setItem('cachedBooks', JSON.stringify (podatki));
// Nastavi pridobljene podatke kot začetno stanje
 setBooks (podatki);
 }
 } ulov (napaka) {
konzola.error (napaka);
 }
 };
 fetchBooks();
 }, []);

V tem primeru uporabite useEffect kavelj za pridobivanje podatkov o knjigi. Znotraj fetchBooks s klicem preverite, ali predpomnjeni podatki obstajajo AsyncStorage.getItem('cachedBooks'). Če predpomnjeni podatki obstajajo, jih razčlenite z uporabo JSON.parse in ga nastavite kot začetno stanje z uporabo setBooks. To vam omogoča, da takoj prikažete predpomnjene podatke.

Če predpomnjeni podatki ne obstajajo, pridobivanje podatkov iz API-ja z metodo fetch().. Ko so podatki vrnjeni, jih predpomnite s klicem AsyncStorage.setItem(). Nato nastavite pridobljene podatke kot začetno stanje in zagotovite, da bodo nadaljnji upodabljanji prikazali pridobljene podatke.

Zdaj lahko predpomnjene knjige prikažete takole:

uvoz Odziv, {useEffect, useState} od'reagirati';
uvoz {Pogled, besedilo, ravni seznam} od'react-native';
uvoz AsyncStorage od'@react-native-async-storage/async-storage';
konst Aplikacija = () => {
vrnitev (

Seznam knjig</Text>
 podatki={knjige}
 keyExtractor={(item) => item.id.toString()}
 renderItem={({ element }) => (

{item.title}</Text>
{item.author}</Text>
 </View>
 )}
 />
 </View>
 );
};
izvozprivzeto aplikacija;

Nadaljnji zagoni aplikacije ali ponovna nalaganja zaslona bodo prikazali predpomnjene podatke brez nepotrebnih zahtev API-ja.

Uporaba AsyncStorage za dinamično nalaganje podatkov

React Native AsyncStorage ponuja zmogljivo rešitev za shranjevanje in pridobivanje podatkov. Z izkoriščanjem zmogljivosti predpomnjenja izboljšuje zmogljivost in omogoča hitrejši dostop do shranjenih podatkov.

Ko združite znanje o AsyncStorage s tehnikami, kot je ostranjevanje po meri, lahko dinamično naložite in prikažete podatke v svoji aplikaciji React Native. To bo omogočilo učinkovito ravnanje z velikimi zbirkami podatkov.