Wat is AsyncStorage in React Native en hoe het te gebruiken?

AsyncStorage van React Native maakt het opslaan en bewaren van gegevens in een React Native-app eenvoudig. Met de AsyncStorage API kunt u eenvoudige gevallen van kleine gegevens binnen uw app afhandelen zonder dat de lokale opslag van het apparaat of complexe opslagsystemen nodig zijn.

Wat is de AsyncStorage van React Native?

De AsyncStorage API is een persistent sleutel-waardeopslagsysteem. De API ondersteunt een reeks van JavaScript-gegevenstypen, inclusief string-, boolean-, number- en JSON-objecten.

De gegevens die zijn opgeslagen met AsyncStorage blijven bestaan ​​en blijven beschikbaar, zelfs als de app wordt gesloten of het apparaat opnieuw wordt opgestart. Dit maakt AsyncStorage een ideale opslagoplossing voor het cachen van gegevens en het opslaan van kleine hoeveelheden applicatiestatus.

Welk probleem lost AsyncStorage op?

Vóór de komst van AsyncStorage was de juiste caching van gegevens een onbetrouwbare inspanning. U kunt gegevens opslaan in lokale opslag, die geen gegevens kan behouden wanneer uw app wordt gesloten, of u kunt de gegevens opslaan in een relationeel databasebeheersysteem (RDBMS). Maar ze zijn te complex om te gebruiken voor deze use case.

AsyncStorage lost deze problemen op door een eenvoudige, betrouwbare manier te bieden om kleine en tijdelijke gegevens op te slaan in React Native-applicaties.

Om gegevens op te slaan met AsyncStorage, worden de gegevens eerst geserialiseerd in een JSON-tekenreeks. De JSON-string wordt vervolgens opgeslagen in een sleutel-waardesysteem. Wanneer u probeert gegevens op te halen uit AsyncStorage, worden de gegevens gedeserialiseerd van JSON en vervolgens naar u teruggestuurd in de oorspronkelijke indeling.

Dit zijn asynchrone programma's die worden uitgevoerd zonder de belangrijkste JavaScript-thread te blokkeren. Dit maakt het ideaal voor het opslaan van gegevens die frequente toegang nodig hebben, zoals gebruikersinstellingen en applicatiestatus.

Asynchrone opslagmethoden

Om de te installeren reageren-native-async-opslag package, voert u de volgende opdracht uit in de terminal van uw project:

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

Aangezien AsyncStorage asynchroon van aard is, zullen de methoden niet onmiddellijk resultaten opleveren. In plaats daarvan geven ze een belofte terug die wordt opgelost wanneer de bewerking is voltooid.

U dient de asynchroon/wachten syntaxis of een vergelijkbare techniek bij het aanroepen van AsyncStorage-methoden.

Gegevens schrijven met behulp van de methoden setItem() en multiSet().

De setItem() En multiSet() methoden worden gebruikt om de waarden voor de gegeven sleutel in te stellen. Deze methoden accepteren de sleutel en de waarden als parameters.

De methode retourneert een belofte die wordt opgelost met een booleaanse waarde die aangeeft of de bewerking is geslaagd of weigert met een fout als de bewerking is mislukt:

// Bewaar een waarde voor de sleutel "gebruiker"
wachten AsyncStorage.setItem('gebruiker', 'John');
// Bewaar meerdere waarden voor de sleutel "gebruiker"
wachten AsyncStorage.multiSet(['gebruiker', 'John', 'doe']);

Gegevens lezen met behulp van de getItem()- en multiGet()-methoden

Met de haalItem() methode kunt u opgeslagen gegevens uit de opslag halen met behulp van de sleutel voor de waarde die u wilt ophalen. Als de doorgegeven sleutel niet bestaat, wordt de belofte afgewezen met een foutmelding:

const naam = wachten AsyncStorage.getItem('gebruiker');

De waarde geretourneerd door haalItem() is een tekenreeks. Als u gegevens in een ander formaat moet opslaan, kunt u dit gebruiken JSON.stringify() om de gegevens naar een tekenreeks te converteren voordat u deze opslaat. Gebruik dan JSON.parse() om de tekenreeks terug te converteren naar het oorspronkelijke gegevenstype bij het ophalen ervan.

Bijvoorbeeld:

// Bewaar het object {naam: "John Doe", leeftijd: 30} voor de sleutel "gebruiker"
wachten AsyncStorage.setItem('gebruiker', JSON.stringify({naam: "John Doe", leeftijd: 30}));
// Haal het object op voor de sleutel "gebruiker"
const gebruiker = JSON.ontleden(wachten AsyncStorage.getItem('gebruiker'));

U kunt ook de multiGet() methode om meerdere sleutel-waardeparen te trekken. De methode neemt een reeks sleutels die strings moeten zijn.

Gegevens samenvoegen met behulp van de methoden mergeItem() en multiMerge()

De samenvoegenItem() En multiMerge() methoden voegen de gegeven waarde samen met de bestaande waarde voor de gegeven sleutel. De waarde doorgegeven aan samenvoegenItem() kan elk type gegevens zijn. Het is echter belangrijk op te merken dat AsyncStorage de gegevens niet versleutelt, dus iedereen met toegang tot het apparaat kan de gegevens lezen:

wachten AsyncStorage.mergeItem('naam', 'Jane Doe');

samenvoegenItem() neemt de sleutel voor de waarde die u wilt samenvoegen en de nieuwe waarde die u wilt samenvoegen met de bestaande waarde van de sleutel. Gebruik multiMerge() om meer dan één item samen te voegen tot een sleutelwaarde.

Opslagruimte wissen met behulp van de clear()-methode

De duidelijk() methode kunt u alle items verwijderen die zijn opgeslagen in AsyncStorage. Het kan in verschillende scenario's nuttig zijn, bijvoorbeeld wanneer u de status van de app moet resetten tijdens het uitloggen van een gebruiker of gegevens in de cache op uw mobiele telefoon wissen.

Bijvoorbeeld:

const clearData = asynchroon () => {
poging {
wachten AsyncStorage.clear();

 } vangst (e) {
troosten.fout (e);
 }
};

De bovenstaande code verwijdert alle sleutel-waardeparen die zijn opgeslagen in AsyncStorage.

Bovendien kunt u een callback-functie aan duidelijk(), die wordt aangeroepen zodra de bewerking is voltooid:

AsyncStorage.clear()
 .Dan(() => {
// Wisbewerking voltooid

 })
 .vangst((fout) => {
troosten.fout (fout);
 });

Merk op dat de duidelijk() methode verwijdert permanent alle gegevens die zijn opgeslagen in AsyncStorage.

Gegevens cachen met AsyncStorage

Het cachen van gegevens is een gangbare praktijk bij de ontwikkeling van mobiele apps om de prestaties te verbeteren en netwerkverzoeken te verminderen. Met AsyncStorage kunt u eenvoudig gegevens cachen in React Native-apps.

Wanneer u toegang krijgt tot een stuk gegevens, wordt eerst gecontroleerd of de gegevens al in de cache staan. Als dit het geval is, worden de gegevens uit de cache geretourneerd. Als dit niet het geval is, haalt het programma de gegevens op van de meer permanente opslaglocatie en slaat deze op in de cache. De volgende keer dat u de gegevens opent, worden deze in plaats daarvan uit de cache geretourneerd.

Stel dat u een app heeft die een lijst met boeken weergeeft die zijn opgehaald uit een API. Om de prestaties te verbeteren, kunt u de opgehaalde boekgegevens cachen met behulp van AsyncStorage.

Hier is een voorbeeldimplementatie hiervan:

const [boeken, setBooks] = useState([]);
gebruikEffect(() => {
const fetchBooks = asynchroon () => {
poging {
// Controleer of de gegevens in de cache bestaan
const cachedData = wachten AsyncStorage.getItem('cachedBooks');
als (cachedData !== nul) {
// Als de gegevens in de cache bestaan, ontleedt u deze en stelt u deze in als de beginstatus
 setBoeken(JSON.parse (gegevens in cache));
 } anders {
// Als de gegevens in de cache niet bestaan, haalt u gegevens op van de API
const reactie = wachten ophalen(' https://api.example.com/books');
const gegevens = wachten reactie.json();
// Cache de opgehaalde gegevens
wachten AsyncStorage.setItem('cachedBooks', JSON.stringify (gegevens));
// Stel de opgehaalde gegevens in als de beginstatus
 setBooks (gegevens);
 }
 } vangst (fout) {
troosten.fout (fout);
 }
 };
 fetchBooks();
 }, []);

In dit voorbeeld gebruik je de gebruikEffect hook om de boekgegevens op te halen. Binnen de boeken ophalen functie, controleer of de gegevens in de cache bestaan ​​door aan te roepen AsyncStorage.getItem('cachedBooks'). Als de gegevens in de cache bestaan, ontleedt u deze met behulp van JSON.ontleden en stel het in als de beginstatus met behulp van setBoeken. Hierdoor kunt u de gegevens in de cache onmiddellijk weergeven.

Als de gegevens in de cache niet bestaan, haal de gegevens op van de API met behulp van de methode fetch().. Zodra de gegevens zijn geretourneerd, cachet u deze door te bellen AsyncStorage.setItem(). Stel vervolgens de opgehaalde gegevens in als de beginstatus en zorg ervoor dat bij verdere weergaven de opgehaalde gegevens worden weergegeven.

U kunt de boeken in de cache nu als volgt weergeven:

importeren Reageren, { useEffect, useState } van'Reageer';
importeren { Weergeven, Tekst, FlatList } van'reageren-native';
importeren Asynchrone opslag van'@react-native-async-opslag/async-opslag';
const App= () => {
opbrengst (

Boekenlijst</Text>
 data={boeken}
 keyExtractor={(item) => item.id.toString()}
 renderItem={({ item }) => (

{item.titel}</Text>
{item.auteur}</Text>
 </View>
 )}
 />
 </View>
 );
};
exporterenstandaard App;

Verdere app-lanceringen of herladen van het scherm zullen de gegevens in de cache weergeven zonder onnodige API-verzoeken te doen.

AsyncStorage gebruiken voor het dynamisch laden van gegevens

React Native AsyncStorage biedt een krachtige oplossing voor het opslaan en ophalen van data. Door gebruik te maken van cachingmogelijkheden verbetert het de prestaties en biedt het snellere toegang tot opgeslagen gegevens.

Wanneer je kennis van AsyncStorage combineert met technieken als custom paginering, kun je data dynamisch laden en weergeven in je React Native app. Dit maakt een efficiënte verwerking van grote datasets mogelijk.