Čo je to AsyncStorage v React Native a ako ho používať?

AsyncStorage React Native zjednodušuje ukladanie a uchovávanie údajov v aplikácii React Native. Pomocou rozhrania AsyncStorage API môžete spracovať jednoduché prípady malých údajov vo vašej aplikácii bez potreby lokálneho úložiska zariadenia alebo zložitých úložných systémov.

Čo je to AsyncStorage React Native?

AsyncStorage API je trvalý úložný systém kľúč – hodnota. API podporuje celý rad Typy údajov JavaScriptvrátane objektov typu string, boolean, number a JSON.

Údaje uložené pomocou AsyncStorage pretrvávajú a zostanú dostupné, aj keď sa aplikácia zatvorí alebo sa zariadenie reštartuje. Vďaka tomu je AsyncStorage ideálnym riešením na ukladanie údajov do vyrovnávacej pamäte a ukladanie malého množstva stavu aplikácie.

Aký problém rieši AsyncStorage?

Pred príchodom AsyncStorage bolo správne ukladanie údajov do vyrovnávacej pamäte nespoľahlivým úsilím. Údaje môžete uložiť buď do lokálneho úložiska, ktoré nedokáže uchovávať údaje po zatvorení aplikácie, alebo môžete údaje uložiť do systému správy relačných databáz (RDBMS). Ale sú príliš zložité na to, aby fungovali pre tento prípad použitia.

AsyncStorage rieši tieto problémy tým, že poskytuje jednoduchý a spoľahlivý spôsob ukladania malých a dočasných údajov v aplikáciách React Native.

Na ukladanie údajov pomocou AsyncStorage sa údaje najskôr serializujú do reťazca JSON. Reťazec JSON je potom uložený v systéme kľúč – hodnota. Keď sa pokúsite získať údaje z AsyncStorage, údaje sa deserializujú z JSON a potom sa vám vrátia v pôvodnom formáte.

Toto sú asynchrónne programy ktoré bežia bez blokovania hlavného vlákna JavaScriptu. Vďaka tomu je ideálny na ukladanie údajov, ktoré vyžadujú častý prístup, ako sú nastavenia používateľa a stav aplikácie.

AsyncStorage Methods

Ak chcete nainštalovať reakčné-natívne-asynchrónne-úložisko balík, spustite nasledujúci príkaz v termináli vášho projektu:

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

Keďže AsyncStorage je vo svojej podstate asynchrónny, jeho metódy nevrátia výsledky okamžite. Namiesto toho vrátia prísľub, ktorý sa vyrieši po dokončení operácie.

Mali by ste použiť async/čakať syntax alebo podobnú techniku ​​pri volaní metód AsyncStorage.

Zápis údajov pomocou metód setItem() a multiSet().

The setItem() a multiSet() metódy sa používajú na nastavenie hodnôt pre daný kľúč. Tieto metódy akceptujú kľúč a hodnoty ako parametre.

Metóda by vrátila prísľub, ktorý sa vyrieši s boolovskou hodnotou označujúcou, či bola operácia úspešná, alebo odmietne s chybou, ak operácia zlyhá:

// Uloženie hodnoty pre kľúč "user"
čakať AsyncStorage.setItem('používateľ', 'john');
// Uloženie viacerých hodnôt pre kľúč "user"
čakať AsyncStorage.multiSet(['používateľ', 'john', 'laň']);

Čítanie údajov pomocou metód getItem() a multiGet().

S getItem() metódou, môžete vytiahnuť uložené dáta z úložiska pomocou kľúča pre hodnotu, ktorú chcete získať. Ak odovzdaný kľúč neexistuje, prísľub sa odmietne s chybou:

konšt meno = čakať AsyncStorage.getItem('používateľ');

Hodnota vrátená používateľom getItem() je reťazec. Ak potrebujete ukladať dáta v inom formáte, môžete použiť JSON.stringify() na konverziu údajov na reťazec pred ich uložením. Potom použite JSON.parse() na konverziu reťazca späť na pôvodný typ údajov pri jeho získavaní.

Napríklad:

// Uložte objekt {meno: "John Doe", vek: 30} pre kľúč "user"
čakať AsyncStorage.setItem('používateľ', JSON.stringify({názov: "John Doe", Vek: 30}));
// Získanie objektu pre kľúč "user"
konšt užívateľ = JSON.parse(čakať AsyncStorage.getItem('používateľ'));

Môžete tiež použiť multiGet() metóda na získanie viacerých párov kľúč – hodnota. Metóda bude mať pole kľúčov, ktoré musia byť reťazce.

Zlúčiť údaje pomocou metód mergeItem() a multiMerge().

The mergeItem() a multiMerge() metódy zlúčia danú hodnotu s existujúcou hodnotou pre daný kľúč. Hodnota odovzdaná do mergeItem() môže ísť o akýkoľvek typ údajov. Je však dôležité poznamenať, že AsyncStorage nešifruje údaje, takže ktokoľvek s prístupom k zariadeniu môže čítať údaje:

čakať AsyncStorage.mergeItem('názov', "Jane Doe");

mergeItem() vezme kľúč pre hodnotu, ktorú chcete zlúčiť, a novú hodnotu, ktorú chcete zlúčiť s existujúcou hodnotou kľúča. Použite multiMerge() zlúčiť viac ako jednu položku s kľúčovou hodnotou.

Vymazať úložisko Pomocou metódy clear().

The jasný() umožňuje odstrániť všetky položky uložené v AsyncStorage. Môže to byť užitočné v rôznych situáciách, napríklad keď potrebujete obnoviť stav aplikácie počas odhlásenia používateľa alebo vymazať údaje z vyrovnávacej pamäte v mobilnom telefóne.

Napríklad:

konšt clearData = async () => {
skúste {
čakať AsyncStorage.clear();

 } chytiť (e) {
konzoly.chyba (e);
 }
};

Vyššie uvedený kód odstráni všetky páry kľúč – hodnota uložené v úložisku AsyncStorage.

Okrem toho môžete poskytnúť funkciu spätného volania jasný(), ktorý bude vyvolaný po dokončení operácie:

AsyncStorage.clear()
 .potom(() => {
// Vymazanie dokončené

 })
 .catch((chyba) => {
konzoly.chyba (chyba);
 });

Všimnite si, že jasný() metóda natrvalo odstráni všetky údaje uložené v AsyncStorage.

Ukladanie údajov do vyrovnávacej pamäte pomocou AsyncStorage

Ukladanie údajov do vyrovnávacej pamäte je bežnou praxou pri vývoji mobilných aplikácií na zlepšenie výkonu a zníženie požiadaviek siete. S AsyncStorage môžete jednoducho ukladať údaje do vyrovnávacej pamäte v aplikáciách React Native.

Keď pristupujete k údaju, údaje sa najskôr skontrolujú, či sa už nenachádzajú vo vyrovnávacej pamäti. Ak áno, údaje sa vrátia z vyrovnávacej pamäte. Ak nie je, potom program načíta údaje z trvalejšieho miesta uloženia a uloží ich do vyrovnávacej pamäte. Pri ďalšom prístupe k údajom sa namiesto toho vrátia z vyrovnávacej pamäte.

Predpokladajme, že máte aplikáciu, ktorá zobrazuje zoznam kníh získaných z rozhrania API. Ak chcete zvýšiť výkon, môžete načítané údaje knihy uložiť do vyrovnávacej pamäte pomocou AsyncStorage.

Tu je príklad implementácie tohto:

konšt [books, setBooks] = useState([]);
useEffect(() => {
konšt fetchBooks = async () => {
skúste {
// Skontrolujte, či existujú údaje uložené vo vyrovnávacej pamäti
konšt cachedData = čakať AsyncStorage.getItem('cachedBooks');
ak (údaje vo vyrovnávacej pamäti !== nulový) {
// Ak údaje uložené vo vyrovnávacej pamäti existujú, analyzujte ich a nastavte ich ako počiatočný stav
 setBooks(JSON.parse (cachedData));
 } inak {
// Ak údaje vo vyrovnávacej pamäti neexistujú, načítajte údaje z API
konšt odpoveď = čakať priniesť (' https://api.example.com/books');
konšt údaje = čakať response.json();
// Uložte načítané údaje do vyrovnávacej pamäte
čakať AsyncStorage.setItem('cachedBooks', JSON.stringify (údaje));
// Nastaví načítané údaje ako počiatočný stav
 setBooky (dáta);
 }
 } chytiť (chyba) {
konzoly.chyba (chyba);
 }
 };
 fetchBooks();
 }, []);

V tomto príklade použijete useEffect háčik na načítanie údajov knihy. V rámci fetchBooks pomocou funkcie skontrolujte, či existujú údaje uložené vo vyrovnávacej pamäti AsyncStorage.getItem('cachedBooks'). Ak údaje vo vyrovnávacej pamäti existujú, analyzujte ich pomocou JSON.parse a nastavte ho ako počiatočný stav pomocou setBooky. To vám umožní okamžite zobraziť údaje uložené vo vyrovnávacej pamäti.

Ak údaje vo vyrovnávacej pamäti neexistujú, načítajte údaje z API pomocou metódy fetch().. Po vrátení údajov ich uložte do vyrovnávacej pamäte volaním AsyncStorage.setItem(). Potom nastavte načítané údaje ako počiatočný stav a zabezpečte, aby sa pri ďalších vykresľovaniach zobrazili načítané údaje.

Teraz môžete zobraziť knihy uložené vo vyrovnávacej pamäti takto:

importovať Reagovať, { useEffect, useState } od'reagovať';
importovať { View, Text, FlatList } od„react-native“;
importovať AsyncStorage od'@react-native-async-storage/async-storage';
konšt Aplikácia = () => {
vrátiť (

Zoznam kníh</Text>
 data={books}
 keyExtractor={(item) => item.id.toString()}
 renderItem={({ item }) => (

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

Ďalšie spustenia aplikácie alebo opätovné načítanie obrazovky zobrazia údaje uložené vo vyrovnávacej pamäti bez zbytočných požiadaviek API.

Použitie AsyncStorage na dynamické načítanie údajov

React Native AsyncStorage ponúka výkonné riešenie na ukladanie a získavanie údajov. Využitím možností ukladania do vyrovnávacej pamäte zvyšuje výkon a poskytuje rýchlejší prístup k uloženým údajom.

Keď skombinujete znalosti o AsyncStorage s technikami, ako je vlastné stránkovanie, môžete dynamicky načítať a zobraziť údaje vo svojej aplikácii React Native. To umožní efektívne zaobchádzanie s veľkými súbormi údajov.