Cách tải dữ liệu động với phân trang tùy chỉnh trong React Native
Phân trang đề cập đến hệ thống phân chia lượng lớn dữ liệu thành các phần hoặc trang nhỏ hơn, dễ quản lý hơn để cải thiện hiệu suất và khả năng sử dụng. Phân trang tùy chỉnh, nếu được triển khai đúng cách, có thể mang lại trải nghiệm người dùng tốt hơn. Tìm hiểu cách tạo giải pháp phân trang tùy chỉnh trong React Native cho phép bạn tải dữ liệu động.
Hiểu phân trang tùy chỉnh
Với phân trang tùy chỉnh, nhà phát triển có thể tạo cơ chế phân trang phù hợp với các yêu cầu cụ thể của ứng dụng của họ. Phân trang tùy chỉnh có thể liên quan đến việc thiết kế giao diện người dùng duy nhất để điều hướng giữa các trang, triển khai thuật toán để tìm nạp dữ liệu từ cơ sở dữ liệu hoặc API hoặc kết hợp các tính năng như cuộn vô hạn hoặc tải chậm.
Tạo một hệ thống phân trang tùy chỉnh cho các ứng dụng di động React Native của bạn có thể mang lại một số lợi thế:
- Nó có thể cải thiện khả năng mở rộng của ứng dụng, cho phép ứng dụng xử lý lượng dữ liệu lớn hơn hiệu quả hơn. Điều này đặc biệt quan trọng đối với các ứng dụng xử lý các tập dữ liệu lớn.
- Phân trang tùy chỉnh có thể cải thiện hiệu suất ứng dụng của bạn bằng cách chia dữ liệu thành các phần nhỏ hơn và dễ quản lý hơn. Điều này sẽ làm giảm thời gian tải.
- Với phân trang tùy chỉnh, bạn sẽ tăng tính linh hoạt và khả năng kiểm soát trong việc trình bày và truy cập dữ liệu trong ứng dụng của mình.
Khi ứng dụng React Native của bạn chỉ tải dữ liệu cần thiết mà nó cần tải vào thời điểm đó, thì nó được gọi là tải động. Để triển khai tải động với phân trang tùy chỉnh, bạn có thể làm theo các bước chung sau:
- Xác định phương pháp phân trang: Quyết định phương pháp phân trang phù hợp nhất với nội dung của bạn. Đây có thể là một truyền thống dựa trên trang hệ thống phân trang, nơi người dùng nhấp để tải trang tiếp theo hoặc một cuộn vô hạn hệ thống, nơi nhiều nội dung được tải hơn khi người dùng cuộn xuống trang.
- Viết mã phía máy chủ và phía máy khách: Bạn sẽ viết mã phía máy chủ để xử lý các yêu cầu phân trang cho các trang dữ liệu cụ thể và chỉ trả lại dữ liệu cho trang đó. Sau đó, bạn sẽ viết mã phía máy khách để lắng nghe các hành động của người dùng kích hoạt yêu cầu cung cấp thêm dữ liệu, chẳng hạn như nhấp vào một Tải thêm hoặc cuộn xuống cuối trang.
- Thực hiện tải dữ liệu: Khi người dùng kích hoạt yêu cầu thêm dữ liệu, ứng dụng sẽ gửi yêu cầu đến phía máy chủ cho trang dữ liệu tiếp theo. Sau đó, phía máy chủ sẽ chỉ trả lại dữ liệu cho trang đó mà ứng dụng có thể sử dụng để cập nhật trang.
- Cập nhật trang: Cuối cùng, bạn sẽ cập nhật trang với dữ liệu mới được tải. Điều này có thể liên quan đến việc thêm dữ liệu mới vào danh sách các mục hiện có hoặc thay thế toàn bộ danh sách bằng dữ liệu mới.
Thiết lập nguồn dữ liệu
Bước đầu tiên trong việc triển khai phân trang tùy chỉnh trong React Native là thiết lập nguồn dữ liệu của bạn. Điều này thường liên quan đến việc tìm nạp dữ liệu từ API hoặc cơ sở dữ liệu và lưu trữ dữ liệu đó trong một biến trạng thái. Hãy xem xét API REST đơn giản trả về danh sách sách.
Đây là một ví dụ về phản hồi API có thể trông như thế nào:
{
"data": [
{
"id": 1,
"title": "The Catcher in the Rye",
"author": "J.D. Salinger"
},
{
"id": 2,
"title": "To Kill a Mockingbird",
"author": "Harper Lee"
},
],
"page": 1,
"totalPages": 5
}
Để tìm nạp dữ liệu này trong ứng dụng React Native của mình, chúng ta có thể sử dụng tìm về hàm, trả về một Hứa giải quyết bằng phản hồi từ API REST.
Hãy tiến hành tạo một hàm sẽ lấy dữ liệu từ API và cập nhật trạng thái với dữ liệu mới nhận được. Chức năng này sẽ quyết định những gì sẽ hiển thị trên màn hình của ứng dụng React Native.
Chúng tôi sẽ định nghĩa chức năng này là một chức năng không đồng bộ nhận tham số trang và trả về Lời hứa sẽ giải quyết với dữ liệu đã tìm nạp.
const PAGE_SIZE = 10;const fetchBooks = async (page) => {
try {
const response = await fetch(`https://myapi.com/books?page=${page}&pageSize=${PAGE_SIZE}`);
const json = await response.json();
return json.data;
} catch (error) {
console.error(error);
return [];
}
}
Trong khối mã ở trên, lấy sách chức năng mất một trang tham số và trả về một Lời hứa giải quyết với dữ liệu từ trang đó. Ở đây, PAGE_SIZE hằng số được sử dụng để giới hạn số lượng sách được tìm nạp trên mỗi trang.
Với chức năng phân trang tùy chỉnh được xác định, giờ đây bạn có thể sử dụng chức năng này để triển khai tải động trong ứng dụng. Để làm điều này, hãy sử dụng Danh sách phẳng thành phần, là thành phần hiệu suất cao để hiển thị danh sách dữ liệu lớn trong React Native.
Đầu tiên, thiết lập các Danh sách phẳng thành phần với một số trạng thái ban đầu:
import React, { useState, useEffect } from 'react';
import { FlatList, View, Text } from 'react-native';const App = () => {
const [books, setBooks] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
useEffect(() => {
fetchBooks(currentPage).then(data => setBooks(data));
}, []);
const renderItem = ({ item }) => {
return (
<View>
<Text style={{ fontSize: 18 }}>{item.title}</Text>
<Text style={{ fontSize: 14 }}>{item.author}</Text>
</View>
);
};
return (
<FlatList
data={books}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
/>
);
}
export default App;
Đoạn mã này thiết lập thành phần FlatList với hai phần trạng thái, cụ thể là sách Và trang hiện tại. chúng tôi sử dụng sử dụngEffect() hook để tìm nạp trang dữ liệu ban đầu khi ứng dụng của chúng tôi chạy lần đầu.
Tiếp theo, chúng tôi xác định một renderItem chức năng lấy một mục từ sách mảng và trả về một Xem chứa tên sách và tác giả.
Cuối cùng, chúng tôi đã vượt qua sách mảng để dữ liệu chỗ dựa của Danh sách phẳngcùng với chúng tôi renderItem chức năng và keyExtractor.
Bây giờ chúng tôi phải đảm bảo rằng Danh sách phẳng của chúng tôi có thể phát hiện khi người dùng cuộn đến cuối danh sách. Tại thời điểm đó, nó sẽ tiến hành tìm nạp và tải dữ liệu mới cũng như hiển thị dữ liệu đó.
Để làm điều này, chúng ta sẽ sử dụng onEndReached chống đỡ cung cấp cho Danh sách phẳng, đây là một cuộc gọi lại được gọi khi người dùng cuộn đến cuối danh sách. Chúng ta cũng nên cập nhật trang hiện tại state để theo dõi xem chúng tôi hiện đang ở trang nào.
Đây là mã cập nhật thực hiện tất cả điều này:
import React, { useState, useEffect } from 'react';
import { FlatList, View, Text } from 'react-native';const App = () => {
const [books, setBooks] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
fetchBooks(currentPage).then(data => setBooks(data));
}, []);
const fetchMore = async () => {
if (isLoading) return;
setIsLoading(true);
const nextPage = currentPage + 1;
const newData = await fetchBooks(nextPage);
setCurrentPage(nextPage);
setIsLoading(false);
setBooks(prevData => [...prevData, ...newData]);
};
const renderItem = ({ item }) => {
return (
<View style={{ padding: 16 }}>
<Text style={{ fontSize: 18 }}>{item.title}</Text>
<Text style={{ fontSize: 14 }}>{item.author}</Text>
</View>
);
};
return (
<FlatList
data={books}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
onEndReached={fetchMore}
onEndReachedThreshold={0.1}
/>
);
}
export default App;
Ở đây chúng tôi đã thêm hai trạng thái mới được gọi là đang tải Và onEndReachedThreshold. đang tải theo dõi xem chúng tôi hiện đang tìm nạp dữ liệu hay không và onEndReachedThreshold bắn onEndReached gọi lại khi người dùng đã cuộn đến trong vòng 10% của phần cuối danh sách.
Chúng tôi đã tạo một chức năng mới gọi là tìm nạpThêm mà chạy khi onEndReached bị sa thải. Nó kiểm tra xem chúng tôi đã tải dữ liệu chưa và nếu chưa, nó sẽ tìm nạp trang dữ liệu tiếp theo và cập nhật danh sách của chúng tôi.
Cuối cùng, chúng tôi đã thêm các đạo cụ cần thiết mới vào Danh sách phẳng thành phần. Các Danh sách phẳng thành phần bây giờ sẽ tự động tải dữ liệu khi người dùng cuộn đến cuối danh sách.
Bạn đã học cách tải dữ liệu động trong React Native với hệ thống phân trang tùy chỉnh của riêng bạn. Phương pháp này giúp bạn linh hoạt hơn và kiểm soát tốt hơn khi xử lý lượng lớn dữ liệu trong ứng dụng của mình. Hãy nhớ điều chỉnh phân trang của bạn để phù hợp với phong cách và nhu cầu của ứng dụng. Bạn có thể tùy chỉnh nó hơn nữa để đạt được giao diện và chức năng mong muốn. Nhìn chung, nó chắc chắn sẽ giúp bạn tối ưu hóa hiệu suất của ứng dụng.