Mi az AsyncStorage a React Native-ban és hogyan kell használni?

A React Native AsyncStorage egyszerűvé teszi az adatok tárolását és megőrzését a React Native alkalmazásban. Az AsyncStorage API-val az alkalmazáson belüli kis adatok egyszerű eseteit kezelheti anélkül, hogy az eszköz helyi tárolójára vagy összetett tárolórendszerére lenne szüksége.

Mi az a React Native AsyncStorage?

Az AsyncStorage API egy állandó kulcsérték tárolórendszer. Az API egy tartományt támogat JavaScript adattípusok, beleértve a karakterlánc-, logikai-, szám- és JSON-objektumokat.

Az AsyncStorage használatával tárolt adatok megmaradnak, és akkor is elérhetők maradnak, ha az alkalmazás bezárul vagy az eszköz újraindul. Ez teszi az AsyncStorage-ot ideális tárolási megoldássá az adatok gyorsítótárazására és kis mennyiségű alkalmazásállapot tárolására.

Milyen problémát old meg az AsyncStorage?

Az AsyncStorage megjelenése előtt a megfelelő adatgyorsítótárazás megbízhatatlan erőfeszítés volt. Tárolhatja az adatokat a helyi tárhelyen, amely nem képes megőrizni az adatokat az alkalmazás bezárásakor, vagy tárolhatja az adatokat egy relációs adatbázis-kezelő rendszerben (RDBMS). De túl bonyolultak ahhoz, hogy ehhez a használati esethez működjenek.

Az AsyncStorage megoldja ezeket a problémákat azáltal, hogy egyszerű, megbízható módot biztosít kis és ideiglenes adatok tárolására a React Native alkalmazásokban.

Az adatok AsyncStorage szolgáltatással történő tárolásához az adatokat először egy JSON-karakterláncba kell sorosítani. A JSON-karakterlánc ezután egy kulcsérték-rendszerben kerül tárolásra. Amikor megpróbál adatokat lekérni az AsyncStorage-ból, az adatokat a JSON-ból deszerializálja, majd az eredeti formátumban visszaküldi Önnek.

Ezek aszinkron programok amelyek a fő JavaScript-szál blokkolása nélkül futnak. Ideálissá teszi a gyakori hozzáférést igénylő adatok tárolására, mint például a felhasználói beállítások és az alkalmazás állapota.

AsyncStorage Methods

A telepítéshez a react-native-async-storage csomagot, futtassa a következő parancsot a projekt terminálján belül:

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

Mivel az AsyncStorage aszinkron jellegű, módszerei nem adnak azonnal eredményt. Ehelyett ígéretet adnak vissza, amely a művelet befejeztével megoldódik.

Használnia kell a async/wait szintaxist vagy hasonló technikát az AsyncStorage metódusok meghívásakor.

Írjon adatokat a setItem() és multiSet() metódusokkal

A setItem() és multiSet() metódusokat használunk az adott kulcs értékeinek beállítására. Ezek a módszerek paraméterként fogadják el a kulcsot és az értékeket.

A metódus egy ígéretet ad vissza, amely logikai értékkel oldódik meg, jelezve, hogy a művelet sikeres volt-e, vagy hibával utasítja el, ha a művelet sikertelen volt:

// Érték mentése a "user" kulcshoz
várja AsyncStorage.setItem("felhasználó", 'János');
// Több érték mentése a "user" kulcshoz
várja AsyncStorage.multiSet(["felhasználó", 'János', 'dámvadtehén']);

Adatok olvasása a getItem() és multiGet() metódusokkal

A... val getItem() módszerrel lehívhatja a mentett adatokat a tárolóból a lekérni kívánt érték kulcsával. Ha az átadott kulcs nem létezik, az ígéret hibával elutasítja:

const név = várja AsyncStorage.getItem("felhasználó");

A visszaadott érték getItem() egy karakterlánc. Ha más formátumban kell adatokat tárolnia, használhatja JSON.stringify() hogy az adatokat tárolás előtt karakterláncokká alakítsa át. Akkor használd JSON.parse() hogy visszaállítsa a karakterláncot az eredeti adattípusra lekérésekor.

Például:

// Mentse el az objektumot {name: "John Doe", kor: 30} a "user" kulcshoz
várja AsyncStorage.setItem("felhasználó", JSON.stringify({név: "Gipsz Jakab", kor: 30}));
// Szerezze be az objektumot a "user" kulcshoz
const felhasználó = JSON.parse(várja AsyncStorage.getItem("felhasználó"));

Használhatja a multiGet() módszer több kulcs-érték pár húzására. A metódus kulcsok tömbjét veszi fel, amelyeknek karakterláncoknak kell lenniük.

Adatok egyesítése a mergeItem() és multiMerge() metódusokkal

A MergeItem() és multiMerge() metódusok egyesítik az adott értéket az adott kulcshoz tartozó meglévő értékkel. A következőnek átadott érték MergeItem() bármilyen típusú adat lehet. Fontos azonban megjegyezni, hogy az AsyncStorage nem titkosítja az adatokat, így bárki, aki hozzáfér az eszközhöz, elolvashatja az adatokat:

várja AsyncStorage.mergeItem('név', "Jane Doe");

MergeItem() átveszi az egyesíteni kívánt érték kulcsát és az új értéket, amelyet össze szeretne olvasni a kulcs meglévő értékével. Használat multiMerge() hogy egynél több elemet egyesítsen egy kulcsértékkel.

Tárhely törlése a clear() módszerrel

A egyértelmű() módszer lehetővé teszi az AsyncStorage-ban tárolt összes elem eltávolítását. Különféle helyzetekben hasznos lehet, például amikor vissza kell állítania az alkalmazás állapotát a felhasználói kijelentkezés során vagy törölje a gyorsítótárazott adatokat a mobiltelefonján.

Például:

const clearData = async () => {
próbáld ki {
várja AsyncStorage.clear();

 } fogás (e) {
konzol.error (e);
 }
};

A fenti kód törli az összes AsyncStorage-ban tárolt kulcs-érték párt.

Ezenkívül visszahívási funkciót is biztosíthat egyértelmű(), amely a művelet befejezése után kerül meghívásra:

AsyncStorage.clear()
 .akkor(() => {
// A törlési művelet befejeződött

 })
 .fogás((hiba) => {
konzol.error (hiba);
 });

Vegye figyelembe, hogy a egyértelmű() metódus véglegesen törli az AsyncStorage-ban tárolt összes adatot.

Adatok gyorsítótárazása az AsyncStorage segítségével

Az adatok gyorsítótárazása bevett gyakorlat a mobilalkalmazások fejlesztésében a teljesítmény javítása és a hálózati kérések csökkentése érdekében. Az AsyncStorage segítségével könnyen gyorsítótárazhatja az adatokat a React Native alkalmazásokban.

Amikor hozzáfér egy adathoz, a rendszer először ellenőrzi, hogy az adatok már a gyorsítótárban vannak-e. Ha igen, akkor az adatok a gyorsítótárból kerülnek vissza. Ha nem, akkor a program lekéri az adatokat az állandóbb tárolóhelyről, és eltárolja a gyorsítótárban. A következő alkalommal, amikor hozzáfér az adatokhoz, az adatok a gyorsítótárból kerülnek vissza.

Tételezzük fel, hogy van egy olyan alkalmazása, amely megjeleníti az API-ból lekért könyvek listáját. A teljesítmény fokozása érdekében az AsyncStorage segítségével gyorsítótárba helyezheti a lekért könyvadatokat.

Íme egy példa ennek megvalósítására:

const [books, setBooks] = useState([]);
useEffect(() => {
const fetchBooks = async () => {
próbáld ki {
// Ellenőrizze, hogy a gyorsítótárazott adatok léteznek-e
const cachedData = várja AsyncStorage.getItem("gyorsítótárazott könyvek");
ha (cachedData !== nulla) {
// Ha a gyorsítótárazott adatok léteznek, elemezze és állítsa be kezdeti állapotként
 setBooks(JSON.parse (cachedData));
 } más {
// Ha a gyorsítótárazott adatok nem léteznek, kérje le az adatokat az API-ból
const válasz = várja fetch(' https://api.example.com/books');
const adatok = várja válasz.json();
// Gyorsítótárazza a lekért adatokat
várja AsyncStorage.setItem("gyorsítótárazott könyvek", JSON.stringify (adatok));
// A lekért adatok beállítása kezdeti állapotként
 setBooks (adatok);
 }
 } fogás (hiba) {
konzol.error (hiba);
 }
 };
 fetchBooks();
 }, []);

Ebben a példában a useEffect horog a könyv adatainak lekéréséhez. Belül fetchBooks függvény hívásával ellenőrizze, hogy a tárolt adatok léteznek-e AsyncStorage.getItem('cachedBooks'). Ha a gyorsítótárazott adatok léteznek, elemezze azokat a segítségével JSON.parse és állítsa be kezdeti állapotként a segítségével setBooks. Ez lehetővé teszi a gyorsítótárazott adatok azonnali megjelenítését.

Ha a gyorsítótárazott adatok nem léteznek, lekérni az adatokat az API-ból a fetch() metódussal. Az adatok visszaadása után gyorsítótárazzuk azokat hívással AsyncStorage.setItem(). Ezután állítsa be a lekért adatokat kezdeti állapotként, biztosítva, hogy a további renderelések megjelenítsék a lekért adatokat.

A gyorsítótárazott könyveket most így jelenítheti meg:

import React, { useEffect, useState } tól től'reagál';
import { Nézet, szöveg, lapos lista } tól től"react-native";
import AsyncStorage tól től"@react-native-async-storage/async-storage";
const App = () => {
Visszatérés (

Könyvlista</Text>
 data={books}
 keyExtractor={(elem) => item.id.toString()}
 renderItem={({ item }) => (

{item.title}</Text>
{item.author}</Text>
 </View>
 )}
 />
 </View>
 );
};
exportalapértelmezett App;

Az alkalmazás további indításakor vagy a képernyő újratöltésekor a gyorsítótárazott adatok megjelennek anélkül, hogy szükségtelen API-kéréseket kellene végrehajtani.

Az AsyncStorage használata a dinamikus adatbetöltéshez

A React Native AsyncStorage hatékony megoldást kínál az adatok tárolására és visszakeresésére. A gyorsítótárazási képességeket kihasználva növeli a teljesítményt és gyorsabb hozzáférést biztosít a tárolt adatokhoz.

Ha az AsyncStorage tudását olyan technikákkal kombinálja, mint az egyéni lapozás, akkor dinamikusan betöltheti és megjelenítheti az adatokat a React Native alkalmazásban. Ez lehetővé teszi a nagy adathalmazok hatékony kezelését.