Ce este AsyncStorage în React Native și cum se utilizează?

AsyncStorage de la React Native simplifică stocarea și păstrarea datelor într-o aplicație React Native. Cu API-ul AsyncStorage, puteți gestiona cazuri simple de date mici în aplicația dvs. fără a fi nevoie de stocarea locală a dispozitivului sau de sisteme complexe de stocare.

Ce este AsyncStorage de la React Native?

API-ul AsyncStorage este un sistem persistent de stocare cheie-valoare. API-ul acceptă o serie de Tipuri de date JavaScript, inclusiv șir, boolean, număr și obiecte JSON.

Datele stocate folosind AsyncStorage persistă și vor rămâne disponibile chiar dacă aplicația se închide sau dispozitivul repornește. Acest lucru face din AsyncStorage o soluție de stocare ideală pentru stocarea în cache a datelor și stocarea unor cantități mici de stare a aplicației.

Ce problemă se rezolvă AsyncStorage?

Înainte de apariția AsyncStorage, stocarea corectă a datelor în cache era un efort nesigur. Puteți fie să stocați datele în spațiul de stocare local, care nu poate păstra datele atunci când aplicația dvs. se închide, fie să stocați datele într-un sistem de gestionare a bazelor de date relaționale (RDBMS). Dar sunt prea complexe pentru a fi operate pentru acest caz de utilizare.

AsyncStorage rezolvă aceste probleme oferind o modalitate simplă și fiabilă de a stoca date mici și temporare în aplicațiile React Native.

Pentru a stoca date cu AsyncStorage, datele sunt mai întâi serializate într-un șir JSON. Șirul JSON este apoi stocat într-un sistem cheie-valoare. Când încercați să preluați date din AsyncStorage, datele sunt deserializate din JSON și apoi vi se returnează în formatul original.

Acestea sunt programe asincrone care rulează fără a bloca firul principal JavaScript. Făcându-l ideal pentru stocarea datelor care necesită acces frecvent, cum ar fi setările utilizatorului și starea aplicației.

Metode AsyncStorage

Pentru a instala react-native-async-storage pachet, rulați următoarea comandă în terminalul proiectului dvs.:

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

Deoarece AsyncStorage este de natură asincronă, metodele sale nu vor returna rezultate imediat. În schimb, ei returnează o promisiune care se rezolvă când operațiunea este finalizată.

Ar trebui să utilizați asincron/așteaptă sintaxă sau o tehnică similară la apelarea metodelor AsyncStorage.

Scrieți date folosind metodele setItem() și multiSet().

The setItem() și multiset() sunt folosite metode pentru a seta valorile pentru cheia dată. Aceste metode acceptă cheia și valorile ca parametri.

Metoda va returna o promisiune care se rezolvă cu o valoare booleană care indică dacă operația a avut succes sau respinge cu o eroare dacă operația a eșuat:

// Salvați o valoare pentru cheia „utilizator”
așteaptă AsyncStorage.setItem('utilizator', 'Ioan');
// Salvați mai multe valori pentru cheia „utilizator”
așteaptă AsyncStorage.multiSet(['utilizator', 'Ioan', 'căprioară']);

Citiți datele folosind metodele getItem() și multiGet().

Cu getItem() metoda, puteți extrage datele salvate din stocare folosind cheia pentru valoarea pe care doriți să o obțineți. Dacă cheia transmisă nu există, promisiunea este respinsă cu o eroare:

const nume = așteaptă AsyncStorage.getItem('utilizator');

Valoarea returnată de getItem() este o sfoară. Dacă aveți nevoie să stocați date într-un alt format, puteți utiliza JSON.stringify() pentru a converti datele într-un șir înainte de a le stoca. Apoi folosiți JSON.parse() pentru a converti șirul înapoi la tipul de date original atunci când îl recuperezi.

De exemplu:

// Salvați obiectul {nume: „John Doe”, vârsta: 30} pentru cheia „utilizator”
așteaptă AsyncStorage.setItem('utilizator', JSON.stringify({Nume: „John Doe”, vârstă: 30}));
// Obține obiectul pentru cheia „utilizator”
const utilizator = JSON.analiza(așteaptă AsyncStorage.getItem('utilizator'));

De asemenea, puteți utiliza multiGet() metodă de a extrage mai multe perechi cheie-valoare. Metoda va lua o serie de chei care trebuie să fie șiruri.

Îmbinați datele folosind metodele mergeItem() și multiMerge().

The mergeItem() și multiMerge() metodele îmbină valoarea dată cu valoarea existentă pentru cheia dată. Valoarea transmisă către mergeItem() poate fi orice tip de date. Cu toate acestea, este important de reținut că AsyncStorage nu criptează datele, astfel încât oricine are acces la dispozitiv poate citi datele:

așteaptă AsyncStorage.mergeItem('Nume', 'Femeie necunoscută');

mergeItem() ia cheia pentru valoarea pe care doriți să o îmbinați și noua valoare pe care doriți să o îmbinați cu valoarea existentă a cheii. Utilizare multiMerge() pentru a îmbina mai mult de un articol la o valoare cheie.

Clear Storage Folosind metoda clear().

The clar() metoda vă permite să eliminați toate elementele stocate în AsyncStorage. Poate fi util în diferite scenarii, cum ar fi atunci când trebuie să resetați starea aplicației în timpul deconectarii utilizatorului sau ștergeți datele din memoria cache de pe telefonul mobil.

De exemplu:

const clearData = asincron () => {
încerca {
așteaptă AsyncStorage.clear();

 } captură (e) {
consolă.eroare (e);
 }
};

Codul de mai sus va șterge toate perechile cheie-valoare stocate în AsyncStorage.

În plus, puteți oferi o funcție de apel invers clar(), care va fi invocat după finalizarea operației:

AsyncStorage.clear()
 .apoi(() => {
// Operațiune de ștergere finalizată

 })
 .captură((eroare) => {
consolă.eroare (eroare);
 });

Rețineți că clar() metoda va șterge definitiv toate datele stocate în AsyncStorage.

Memorarea în cache a datelor cu AsyncStorage

Memorarea în cache a datelor este o practică comună în dezvoltarea aplicațiilor mobile pentru a îmbunătăți performanța și a reduce solicitările de rețea. Cu AsyncStorage, puteți stoca cu ușurință datele în cache în aplicațiile React Native.

Când accesați o parte de date, datele sunt mai întâi verificate pentru a vedea dacă sunt deja în cache. Dacă este, atunci datele sunt returnate din cache. Dacă nu este, atunci programul preia datele din locația de stocare mai permanentă și le stochează în cache. Data viitoare când accesați datele, acestea vor fi returnate din cache.

Să presupunem că aveți o aplicație care afișează o listă de cărți preluate dintr-un API. Pentru a îmbunătăți performanța, puteți stoca în cache datele cărții preluate folosind AsyncStorage.

Iată un exemplu de implementare a acestuia:

const [carti, setBooks] = useState([]);
useEffect(() => {
const fetchBooks = asincron () => {
încerca {
// Verificați dacă datele din cache există
const cachedData = așteaptă AsyncStorage.getItem(„cachedBooks”);
dacă (Date în cache !== nul) {
// Dacă datele din cache există, analizați și setați-le ca stare inițială
 set de cărți(JSON.parse (cachedData));
 } altfel {
// Dacă datele din cache nu există, preluați datele din API
const răspuns = așteaptă aduce(' https://api.example.com/books');
const date = așteaptă răspuns.json();
// Memorează în cache datele preluate
așteaptă AsyncStorage.setItem(„cachedBooks”, JSON.stringe (date));
// Setați datele preluate ca stare inițială
 setBooks (date);
 }
 } captură (eroare) {
consolă.eroare (eroare);
 }
 };
 fetchBooks();
 }, []);

În acest exemplu, utilizați useEffect cârlig pentru a prelua datele cărții. În cadrul fetchBooks funcția, verificați dacă datele din cache există prin apelare AsyncStorage.getItem('cachedBooks'). Dacă datele din cache există, analizați-le folosind JSON.parse și setați-o ca stare inițială folosind set de cărți. Acest lucru vă permite să afișați imediat datele din cache.

Dacă datele din cache nu există, preluați datele din API folosind metoda fetch().. Odată ce datele sunt returnate, memorați-le în cache prin apelare AsyncStorage.setItem(). Apoi setați datele preluate ca stare inițială, asigurându-vă că randările ulterioare vor afișa datele preluate.

Acum puteți afișa cărțile stocate în cache astfel:

import Reacționează, { useEffect, useState } din'reacţiona';
import { View, Text, FlatList } din„reacționează-nativ”;
import AsyncStorage din„@react-native-async-storage/async-storage”;
const Aplicație = () => {
întoarcere (

Lista de cărți</Text>
 date={carti}
 keyExtractor={(item) => item.id.toString()}
 renderItem={({ item }) => (

{item.title}</Text>
{articol.autor}</Text>
 </View>
 )}
 />
 </View>
 );
};
exportMod implicit Aplicație;

Lansările ulterioare de aplicații sau reîncărcările de ecran vor afișa datele stocate în cache fără a face solicitări API inutile.

Utilizarea AsyncStorage pentru încărcarea dinamică a datelor

React Native AsyncStorage oferă o soluție puternică pentru stocarea și preluarea datelor. Folosind capacitățile de stocare în cache, îmbunătățește performanța și oferă acces mai rapid la datele stocate.

Când combinați cunoștințele despre AsyncStorage cu tehnici precum paginarea personalizată, puteți încărca și afișa dinamic date în aplicația React Native. Acest lucru va permite gestionarea eficientă a seturilor de date mari.