1. 00:26 10/10/2026
Khi xây dựng ứng dụng đa nền tảng với React, việc có một quy trình upload file đáng tin cậy là yếu tố then chốt để mang lại trải nghiệm người dùng mượt mà. Dưới đây là hướng dẫn thực hành để tạo một hệ thống upload file linh hoạt, hỗ trợ nhiều định dạng và xử lý lỗi hiệu quả, có thể tái sử dụng trên cả React Web và React Native.
**1. Xác định các thành phần chính**
- **UploadArea**: Vùng tương tác nơi người dùng có thể chọn file hoặc kéo thả.
- **ValidationEngine**: Xác thực loại file, kích thước và các quy tắc nghiệp vụ.
- **ProgressTracker**: Hiển thị phần trăm hoàn thành, sử dụng loader trực quan.
- **ErrorHandler**: Thu thập các thông báo lỗi và hiển thị chúng một cách rõ ràng.
- **UploadService**: Giao diện gọi API để gửi file lên server.
**2. Tạo custom hooks cho logic upload**
```javascript
// useUpload.ts
function useUpload() {
const [files, setFiles] = useState([]);
const [progress, setProgress] = useState(0);
const [errors, setErrors] = useState([]);
const reset = () => {
setFiles([]);
setProgress(0);
setErrors([]);
};
return { files, setFiles, progress, setProgress, errors, setErrors, reset };
}
```
Hook này có thể được nhập vào cả component web và native, giúp logic trở nên thống nhất.
**3. Sử dụng React Query để đồng bộ dữ liệu với server**
Bọc hàm upload trong `useMutation` của React Query. Điều này cho phép cache kết quả upload, tự động làm mới dữ liệu và xử lý lỗi mạng một cách hiệu quả.
**4. Quản lý trạng thái toàn cục với Context API**
Tạo `UploadContext` để cung cấp trạng thái upload cho toàn bộ cây component, giúp tránh việc truyền prop nhiều lớp khi bạn cần hiển thị thanh tiến trình hoặc danh sách lỗi ở bất kỳ đâu.
**5. Xây dựng engine validation linh hoạt**
Xác định một mảng các rule (ví dụ: `maxSize`, `acceptedTypes`). Kiểm tra từng rule và tích lũy các lỗi. Điều này giúp bạn dễ dàng mở rộng để hỗ trợ các loại file mới mà không cần thay đổi cấu trúc code.
**6. Hỗ trợ nhiều định dạng và chuyển đổi file**
Tạo một ánh xạ các loại MIME sang tên file an toàn cho từng nền tảng. Đối với React Native, bạn có thể sử dụng `expo-file-system` để đọc file, trong khi React Web có thể sử dụng `File` API.
**7. Xử lý lỗi và hiển thị thông báo lỗi**
Bắt các lỗi từ service upload, từ validation và từ các thao tác trên client. Hiển thị chúng dưới dạng toast notification hoặc danh sách dưới vùng upload. Điều này giúp người dùng nhanh chóng hiểu vấn đề và có thể thực hiện hành động khắc phục.
**8. Tối ưu hóa hiệu suất**
- Giới hạn số lượng file upload đồng thời.
- Sử dụng compression trên client khi cần thiết.
- Cache các kết quả validation để tránh tính toán lại.
**9. Thử nghiệm và đảm bảo chất lượng**
- Viết unit test cho custom hooks bằng Jest.
- Sử dụng React Native Testing Library cho các component native.
- Thực hiện end‑to‑end test với các kịch bản upload khác nhau.
Bằng cách kết hợp các hooks có thể tái sử dụng, React Query để đồng bộ dữ liệu với server, Context API cho trạng thái toàn cục và một engine validation mạnh mẽ, bạn có thể triển khai một hệ thống upload file hoạt động trơn tru trên cả React Web và React Native. Điều này không chỉ rút ngắn thời gian phát triển mà còn đảm bảo trải nghiệm người dùng nhất quán trên các nền tảng.