AsyncStorage trong React Native là gì và cách sử dụng nó?
AsyncStorage của React Native giúp việc lưu trữ và duy trì dữ liệu trong ứng dụng React Native trở nên đơn giản. Với API AsyncStorage, bạn có thể xử lý các trường hợp dữ liệu nhỏ đơn giản trong ứng dụng của mình mà không cần bộ nhớ cục bộ hoặc hệ thống lưu trữ phức tạp của thiết bị.
Mục Lục
AsyncStorage của React Native là gì?
API AsyncStorage là một hệ thống lưu trữ khóa-giá trị liên tục. API hỗ trợ nhiều loại dữ liệu JavaScript, bao gồm các đối tượng chuỗi, boolean, số và JSON.
Dữ liệu được lưu trữ bằng AsyncStorage vẫn tồn tại và sẽ vẫn khả dụng ngay cả khi ứng dụng đóng hoặc thiết bị khởi động lại. Điều này làm cho AsyncStorage trở thành một giải pháp lưu trữ lý tưởng để lưu trữ dữ liệu vào bộ nhớ đệm và lưu trữ một lượng nhỏ trạng thái ứng dụng.
AsyncStorage đang giải quyết vấn đề gì?
Trước khi AsyncStorage ra đời, bộ nhớ đệm dữ liệu thích hợp là một nỗ lực không đáng tin cậy. Bạn có thể lưu trữ dữ liệu trong bộ nhớ cục bộ, bộ nhớ này không thể duy trì dữ liệu khi ứng dụng của bạn đóng hoặc bạn có thể lưu trữ dữ liệu trong Hệ thống quản lý cơ sở dữ liệu quan hệ (RDBMS). Nhưng chúng quá phức tạp để hoạt động cho trường hợp sử dụng này.
AsyncStorage giải quyết những vấn đề này bằng cách cung cấp một cách đơn giản, đáng tin cậy để lưu trữ dữ liệu nhỏ và tạm thời trong các ứng dụng React Native.
Để lưu trữ dữ liệu với AsyncStorage, trước tiên, dữ liệu được tuần tự hóa thành chuỗi JSON. Chuỗi JSON sau đó được lưu trữ trong một hệ thống khóa-giá trị. Khi bạn cố gắng truy xuất dữ liệu từ AsyncStorage, dữ liệu sẽ được giải tuần tự hóa khỏi JSON và sau đó được trả lại cho bạn ở định dạng ban đầu.
Đây là những chương trình không đồng bộ chạy mà không chặn chuỗi JavaScript chính. Làm cho nó lý tưởng để lưu trữ dữ liệu cần truy cập thường xuyên, chẳng hạn như cài đặt người dùng và trạng thái ứng dụng.
Phương thức lưu trữ không đồng bộ
Để cài đặt Reac-igen-async-storage gói, hãy chạy lệnh sau bên trong thiết bị đầu cuối của dự án của bạn:
npm install @react-native-async-storage/async-storage
Vì AsyncStorage về bản chất là không đồng bộ nên các phương thức của nó sẽ không trả về kết quả ngay lập tức. Thay vào đó, chúng trả lại một lời hứa giải quyết khi thao tác hoàn tất.
Bạn nên sử dụng không đồng bộ/chờ đợi cú pháp hoặc một kỹ thuật tương tự khi gọi các phương thức AsyncStorage.
Viết dữ liệu bằng các phương thức setItem() và multiSet()
Các thiết lập các mục() Và đa bộ() các phương thức được sử dụng để đặt các giá trị cho khóa đã cho. Các phương thức này chấp nhận khóa và các giá trị làm tham số.
Phương thức này sẽ trả về một lời hứa giải quyết bằng một giá trị boolean cho biết thao tác có thành công hay từ chối với lỗi nếu thao tác không thành công:
await AsyncStorage.setItem('user', 'john');
await AsyncStorage.multiSet(['user', 'john', 'doe']);
Đọc dữ liệu bằng phương thức getItem() và multiGet()
với getItem() phương pháp, bạn có thể lấy dữ liệu đã lưu từ bộ lưu trữ bằng cách sử dụng khóa cho giá trị bạn muốn nhận. Nếu khóa đã truyền không tồn tại, lời hứa sẽ từ chối kèm theo lỗi:
const name = await AsyncStorage.getItem('user');
Giá trị được trả về bởi getItem() là một chuỗi. Nếu bạn cần lưu trữ dữ liệu ở định dạng khác, bạn có thể sử dụng JSON.stringify() để chuyển đổi dữ liệu thành một chuỗi trước khi lưu trữ nó. Sau đó sử dụng JSON.parse() để chuyển chuỗi trở về kiểu dữ liệu ban đầu khi lấy ra.
Ví dụ:
await AsyncStorage.setItem('user', JSON.stringify({name: "John Doe", age: 30}));
const user = JSON.parse(await AsyncStorage.getItem('user'));
Bạn cũng có thể sử dụng multiGet() phương thức kéo nhiều cặp khóa-giá trị. Phương thức sẽ lấy một mảng các khóa phải là chuỗi.
Hợp nhất dữ liệu bằng các phương thức mergeItem() và multiMerge()
Các hợp nhấtItem() Và đa hợp nhất () các phương thức hợp nhất giá trị đã cho với giá trị hiện có cho khóa đã cho. Giá trị được chuyển đến hợp nhấtItem() có thể là bất kỳ loại dữ liệu nào. Tuy nhiên, điều quan trọng cần lưu ý là AsyncStorage không mã hóa dữ liệu, vì vậy bất kỳ ai có quyền truy cập vào thiết bị đều có thể đọc dữ liệu:
await AsyncStorage.mergeItem('name', 'Jane Doe');
hợp nhấtItem() lấy khóa cho giá trị bạn muốn hợp nhất và giá trị mới bạn muốn hợp nhất với giá trị hiện có của khóa. Sử dụng đa hợp nhất () để hợp nhất nhiều mục thành một giá trị khóa.
Xóa bộ nhớ bằng phương thức clear()
Các thông thoáng() phương pháp cho phép bạn xóa tất cả các mục được lưu trữ trong AsyncStorage. Nó có thể hữu ích trong nhiều tình huống khác nhau, chẳng hạn như khi bạn cần đặt lại trạng thái của ứng dụng trong khi người dùng đăng xuất hoặc xóa dữ liệu đã lưu trong bộ nhớ cache trên điện thoại di động của bạn.
Ví dụ:
const clearData = async () => {
try {
await AsyncStorage.clear();
} catch (e) {
console.error(e);
}
};
Đoạn mã trên sẽ xóa tất cả các cặp khóa-giá trị được lưu trữ trong AsyncStorage.
Ngoài ra, bạn có thể cung cấp chức năng gọi lại cho thông thoáng()sẽ được gọi sau khi thao tác hoàn tất:
AsyncStorage.clear()
.then(() => {
})
.catch((error) => {
console.error(error);
});
Lưu ý rằng thông thoáng() sẽ xóa vĩnh viễn tất cả dữ liệu được lưu trữ trong AsyncStorage.
Bộ nhớ đệm dữ liệu với AsyncStorage
Lưu dữ liệu vào bộ nhớ đệm là một phương pháp phổ biến trong quá trình phát triển ứng dụng dành cho thiết bị di động để cải thiện hiệu suất và giảm yêu cầu mạng. Với AsyncStorage, bạn có thể dễ dàng lưu trữ dữ liệu trong ứng dụng React Native.
Khi bạn truy cập một phần dữ liệu, trước tiên dữ liệu sẽ được kiểm tra xem liệu nó đã có trong bộ đệm chưa. Nếu có, thì dữ liệu được trả về từ bộ đệm. Nếu không, thì chương trình sẽ truy xuất dữ liệu từ vị trí lưu trữ lâu dài hơn và lưu trữ dữ liệu đó trong bộ đệm. Lần tiếp theo bạn truy cập dữ liệu, nó sẽ được trả về từ bộ đệm.
Giả sử rằng bạn có một ứng dụng hiển thị danh sách sách được tìm nạp từ API. Để nâng cao hiệu suất, bạn có thể lưu trữ dữ liệu sách đã tìm nạp vào bộ đệm ẩn bằng AsyncStorage.
Đây là một ví dụ thực hiện điều này:
const [books, setBooks] = useState([]);useEffect(() => {
const fetchBooks = async () => {
try {
const cachedData = await AsyncStorage.getItem('cachedBooks');
if (cachedData !== null) {
setBooks(JSON.parse(cachedData));
} else {
const response = await fetch('https://api.example.com/books');
const data = await response.json();
await AsyncStorage.setItem('cachedBooks', JSON.stringify(data));
setBooks(data);
}
} catch (error) {
console.error(error);
}
};
fetchBooks();
}, []);
Trong ví dụ này, bạn sử dụng sử dụnghiệu ứng hook để lấy dữ liệu sách. Trong lấy sách chức năng, hãy kiểm tra xem dữ liệu được lưu trong bộ nhớ cache có tồn tại hay không bằng cách gọi AsyncStorage.getItem(‘sách lưu trữ’). Nếu dữ liệu được lưu trong bộ nhớ cache tồn tại, hãy phân tích cú pháp bằng cách sử dụng JSON.parse và đặt nó làm trạng thái ban đầu bằng cách sử dụng bộ sách. Điều này cho phép bạn hiển thị dữ liệu được lưu trong bộ nhớ cache ngay lập tức.
Nếu dữ liệu được lưu trong bộ nhớ cache không tồn tại, hãy tìm nạp dữ liệu từ API bằng phương thức tìm nạp(). Khi dữ liệu được trả về, hãy lưu trữ nó bằng cách gọi AsyncStorage.setItem(). Sau đó, đặt dữ liệu đã tìm nạp làm trạng thái ban đầu, đảm bảo rằng các lần hiển thị tiếp theo sẽ hiển thị dữ liệu đã tìm nạp.
Bây giờ bạn có thể hiển thị những cuốn sách được lưu trong bộ nhớ cache như thế này:
import React, { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';const App = () => {
return (
<View>
<Text>Book List</Text>
<FlatList
data={books}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<View>
<Text>{item.title}</Text>
<Text>{item.author}</Text>
</View>
)}
/>
</View>
);
};
export default App;
Các lần khởi chạy ứng dụng hoặc tải lại màn hình tiếp theo sẽ hiển thị dữ liệu được lưu trong bộ nhớ cache mà không thực hiện các yêu cầu API không cần thiết.
Sử dụng AsyncStorage để tải dữ liệu động
React Native AsyncStorage cung cấp một giải pháp mạnh mẽ để lưu trữ và truy xuất dữ liệu. Tận dụng khả năng bộ nhớ đệm, nó nâng cao hiệu suất và cung cấp quyền truy cập nhanh hơn vào dữ liệu được lưu trữ.
Khi bạn kết hợp kiến thức về AsyncStorage với các kỹ thuật như phân trang tùy chỉnh, bạn có thể tự động tải và hiển thị dữ liệu trong ứng dụng React Native của mình. Điều này sẽ cho phép xử lý hiệu quả các tập dữ liệu lớn.