Tính toán tiến trình với React useFormStatus: Ước tính tiến trình thời gian thực để nâng cao trải nghiệm người dùng

Trong các ứng dụng web hiện đại, việc cung cấp phản hồi rõ ràng và tức thì cho người dùng trong quá trình gửi biểu mẫu là rất quan trọng để có trải nghiệm người dùng tích cực. Một kỹ thuật hiệu quả là triển khai bộ tính toán tiến trình thời gian thực, giúp người dùng xác nhận bằng hình ảnh rằng dữ liệu của họ đang được xử lý. Điều này không chỉ làm giảm sự lo lắng của người dùng mà còn tăng cường sự tương tác. Hook `useFormStatus` của React, kết hợp với việc theo dõi tiến trình một cách chiến lược, cho phép các nhà phát triển tạo ra các chỉ báo tiến trình tinh vi và đầy đủ thông tin.

Tìm hiểu về React useFormStatus

Hook `useFormStatus`, được giới thiệu trong React 18, cung cấp thông tin về trạng thái gửi của một phần tử `

import React from 'react';
import { useFormStatus } from 'react-dom';

function MyForm() {
  const { pending } = useFormStatus();

  async function handleSubmit(formData: FormData) {
    'use server';
    // Mô phỏng một hành động máy chủ chậm
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log('Biểu mẫu đã được gửi thành công!');
  }

  return (
    
      
      
        {pending ? 'Đang gửi...' : 'Gửi'}
      
    
  );
}

export default MyForm;

Trong ví dụ đơn giản này, `useFormStatus` được sử dụng để vô hiệu hóa nút gửi và hiển thị thông báo "Đang gửi..." trong khi biểu mẫu đang chờ xử lý. Điều này cung cấp phản hồi cơ bản cho người dùng.

Triển khai bộ tính toán tiến trình thời gian thực

Để tạo một chỉ báo tiến trình tinh vi hơn, chúng ta cần theo dõi tiến trình của quá trình gửi biểu mẫu. Điều này thường bao gồm việc chia nhỏ quá trình gửi thành nhiều giai đoạn hoặc bước. Mặc dù bản thân `useFormStatus` không cung cấp các cập nhật tiến trình chi tiết, chúng ta có thể kết hợp nó với logic tùy chỉnh để đạt được điều này.

Kịch bản ví dụ: Tải lên một tệp

Hãy xem xét kịch bản tải lên một tệp. Quá trình gửi có thể bao gồm các bước sau:

1. Xác thực tệp.
2. Thay đổi kích thước hình ảnh (nếu có).
3. Tải tệp lên máy chủ.
4. Cập nhật cơ sở dữ liệu.

Chúng ta có thể ước tính tiến trình dựa trên việc hoàn thành mỗi bước này.

Triển khai mã nguồn với theo dõi tiến trình

import React, { useState } from 'react';
import { useFormStatus } from 'react-dom';

function FileUploadForm() {
  const { pending } = useFormStatus();
  const [progress, setProgress] = useState(0);

  async function handleSubmit(formData: FormData) {
    'use server';
    // Mô phỏng xác thực (20%)
    await simulateProgress(20, setProgress);
    console.log('Xác thực tệp hoàn tất');

    // Mô phỏng thay đổi kích thước (30%)
    await simulateProgress(30, setProgress);
    console.log('Thay đổi kích thước tệp hoàn tất');

    // Mô phỏng tải lên (40%)
    await simulateProgress(40, setProgress);
    console.log('Tải tệp lên hoàn tất');

    // Mô phỏng cập nhật cơ sở dữ liệu (10%)
    await simulateProgress(10, setProgress);
    console.log('Cơ sở dữ liệu đã được cập nhật');

    console.log('Tệp đã được tải lên thành công!');
  }

  async function simulateProgress(percentage: number, setProgress: (value: ((prevState: number) => number) | number) => void) {
    return new Promise(resolve => {
      setTimeout(() => {
        setProgress(prevProgress => prevProgress + percentage);
        resolve(null);
      }, 500);
    });
  }

  return (
    

      
      
        {pending ? 'Đang tải lên...' : 'Tải lên'}
      
      {pending && (
        

          Tiến trình: {progress}%
          
        
      )}
    
  );
}

export default FileUploadForm;

Giải thích:

• Chúng ta sử dụng một hook `useState` để quản lý trạng thái `progress`, được khởi tạo là 0.
• Hàm `handleSubmit` bây giờ mô phỏng các giai đoạn khác nhau của quá trình tải tệp lên, mỗi giai đoạn cập nhật trạng thái `progress` bằng cách sử dụng hàm `simulateProgress`.
• Hàm `simulateProgress` sử dụng `setTimeout` để mô phỏng các hoạt động bất đồng bộ và cập nhật phần trăm tiến trình một cách tăng dần. Điều này tạo ra một biểu diễn trực quan về tiến trình cho người dùng.
• Trong khi biểu mẫu ở trạng thái `pending`, chúng ta hiển thị một thanh tiến trình bằng cách sử dụng phần tử HTML5 ``, phản ánh giá trị `progress` hiện tại.

Tùy chỉnh chỉ báo tiến trình

Biểu diễn trực quan của chỉ báo tiến trình có thể được tùy chỉnh theo nhiều cách khác nhau:

• Tạo kiểu thanh tiến trình: Sử dụng CSS để tạo kiểu cho phần tử `` hoặc tạo một thanh tiến trình tùy chỉnh bằng các phần tử `
  ` và hoạt ảnh CSS. Hãy xem xét màu sắc và kiểu dáng thương hiệu để phù hợp với thiết kế ứng dụng của bạn.
• Cập nhật bằng văn bản: Cung cấp các cập nhật mô tả hơn bằng cách hiển thị các thông báo như "Đang xác thực tệp...", "Đang thay đổi kích thước hình ảnh...", v.v., cùng với thanh tiến trình.
• Phản hồi trực quan: Sử dụng hoạt ảnh hoặc biểu tượng để tăng cường hơn nữa phản hồi trực quan. Một vòng quay tải hoặc một hoạt ảnh dấu kiểm khi hoàn thành có thể cải thiện trải nghiệm người dùng.

Xử lý lỗi và các trường hợp ngoại lệ

Việc xử lý các lỗi tiềm ẩn trong quá trình gửi biểu mẫu là rất quan trọng. Hook `useFormStatus` cung cấp một thuộc tính `error` có thể được sử dụng để hiển thị thông báo lỗi cho người dùng.

import React, { useState } from 'react';
import { useFormStatus } from 'react-dom';

function ErrorHandlingForm() {
  const { pending, error } = useFormStatus();
  const [progress, setProgress] = useState(0);

  async function handleSubmit(formData: FormData) {
    'use server';
    try {
      // Mô phỏng xác thực (20%)
      await simulateProgress(20, setProgress);
      console.log('Xác thực tệp hoàn tất');

      // Mô phỏng lỗi trong quá trình tải lên (sau 50%)
      if (progress >= 50) {
        throw new Error('Không thể tải tệp lên.');
      }

      // Mô phỏng thay đổi kích thước (30%)
      await simulateProgress(30, setProgress);
      console.log('Thay đổi kích thước tệp hoàn tất');

      // Mô phỏng tải lên (40%)
      await simulateProgress(40, setProgress);
      console.log('Tải tệp lên hoàn tất');

      // Mô phỏng cập nhật cơ sở dữ liệu (10%)
      await simulateProgress(10, setProgress);
      console.log('Cơ sở dữ liệu đã được cập nhật');

      console.log('Tệp đã được tải lên thành công!');
    } catch (err: any) {
      console.error('Lỗi trong quá trình tải lên:', err);
      //Xử lý lỗi một cách thích hợp.
      throw err;
    }
  }

  async function simulateProgress(percentage: number, setProgress: (value: ((prevState: number) => number) | number) => void) {
    return new Promise(resolve => {
      setTimeout(() => {
        setProgress(prevProgress => prevProgress + percentage);
        resolve(null);
      }, 500);
    });
  }

  return (
    

      
      
        {pending ? 'Đang tải lên...' : 'Tải lên'}
      
      {pending && (
        

          Tiến trình: {progress}%
          
        
      )}
      {error && 
Lỗi: {error.message}
}
    
  );
}

export default ErrorHandlingForm;

Những lưu ý quan trọng:

• Error Boundaries (Biên lỗi): Bao bọc biểu mẫu của bạn trong một Error Boundary để xử lý các lỗi không mong muốn một cách mượt mà.
• Thông báo thân thiện với người dùng: Hiển thị các thông báo lỗi rõ ràng và đầy đủ thông tin cho người dùng, hướng dẫn họ cách giải quyết vấn đề. Tránh các thuật ngữ kỹ thuật và tập trung vào lời khuyên có thể hành động.
• Rollback (Hoàn tác): Nếu xảy ra lỗi, hãy xem xét việc triển khai cơ chế hoàn tác để đảo ngược bất kỳ thay đổi nào đã được thực hiện trong quá trình gửi.

Những lưu ý về khả năng tiếp cận

Đảm bảo rằng chỉ báo tiến trình của bạn có thể tiếp cận được với tất cả người dùng, bao gồm cả những người khuyết tật:

• Thuộc tính ARIA: Sử dụng các thuộc tính ARIA như `aria-valuenow`, `aria-valuemin`, và `aria-valuemax` để cung cấp thông tin ngữ nghĩa về thanh tiến trình cho các trình đọc màn hình.
• Độ tương phản đủ: Đảm bảo rằng thanh tiến trình có độ tương phản màu sắc đủ cho người dùng khiếm thị.
• Điều hướng bằng bàn phím: Đảm bảo rằng biểu mẫu và các phần tử của nó có thể điều hướng bằng bàn phím.
• Quản lý tiêu điểm (Focus): Quản lý tiêu điểm một cách thích hợp, đặc biệt là khi hiển thị thông báo lỗi hoặc hoàn thành quá trình gửi.

Ví dụ và trường hợp sử dụng trong thực tế

Việc sử dụng bộ tính toán tiến trình thời gian thực có lợi trong nhiều tình huống khác nhau:

• Tải lên tệp lớn: Cung cấp cho người dùng phản hồi về tiến trình tải lên các tệp lớn, chẳng hạn như video hoặc hình ảnh có độ phân giải cao.
• Xử lý dữ liệu phức tạp: Thông báo cho người dùng về tiến trình của các hoạt động xử lý dữ liệu phức tạp, chẳng hạn như tạo báo cáo hoặc phân tích các tập dữ liệu lớn.
• Biểu mẫu nhiều bước: Hướng dẫn người dùng qua các biểu mẫu nhiều bước, hiển thị tiến trình đã hoàn thành trong mỗi bước.
• Thanh toán thương mại điện tử: Cung cấp phản hồi trong quá trình thanh toán, trấn an người dùng rằng đơn hàng của họ đang được xử lý.
• Cài đặt phần mềm: Hiển thị tiến trình cài đặt hoặc cập nhật phần mềm.

Ví dụ, một dịch vụ lưu trữ đám mây có thể sử dụng thanh tiến trình để chỉ ra trạng thái tải lên của các tệp, trong khi một trình chỉnh sửa hình ảnh trực tuyến có thể sử dụng nó để hiển thị tiến trình áp dụng các bộ lọc hoặc hiệu ứng.

Các phương pháp tốt nhất để triển khai bộ tính toán tiến trình

• Ước tính tiến trình chính xác: Cố gắng ước tính tiến trình càng chính xác càng tốt, cung cấp phản hồi thực tế cho người dùng. Ước tính quá cao có thể dẫn đến sự thất vọng nếu quá trình mất nhiều thời gian hơn dự kiến.
• Cung cấp cập nhật chi tiết: Cung cấp các cập nhật thường xuyên và chi tiết cho chỉ báo tiến trình, mang lại cho người dùng cảm giác tiến bộ liên tục.
• Tránh các bước nhảy vọt trong tiến trình: Tránh các bước nhảy vọt đột ngột trong tiến trình, vì điều này có thể gây khó chịu và khó hiểu cho người dùng. Chuyển tiếp mượt mà được ưu tiên hơn.
• Tối ưu hóa hiệu suất: Tối ưu hóa hiệu suất của logic tính toán tiến trình để tránh ảnh hưởng đến hiệu suất tổng thể của ứng dụng.
• Kiểm thử kỹ lưỡng: Kiểm thử chỉ báo tiến trình một cách kỹ lưỡng trong các điều kiện khác nhau, bao gồm tốc độ mạng và kích thước tệp khác nhau, để đảm bảo rằng nó cung cấp phản hồi chính xác và đáng tin cậy.

Các phương pháp thay thế useFormStatus để theo dõi tiến trình

Mặc dù `useFormStatus` rất tuyệt vời để theo dõi việc gửi biểu mẫu cơ bản, các phương pháp khác có thể được sử dụng để kiểm soát tiến trình chi tiết hơn:

• Custom Hooks với Promises: Tạo các hook React tùy chỉnh bao bọc các hoạt động bất đồng bộ (như tải tệp lên) và sử dụng Promises để theo dõi tiến trình của chúng.
• Web Workers: Chuyển các tác vụ tính toán chuyên sâu (như thay đổi kích thước hình ảnh) sang Web Workers để tránh chặn luồng chính và cung cấp các cập nhật tiến trình mượt mà hơn.
• Server-Sent Events (SSE): Sử dụng SSE để nhận các cập nhật thời gian thực từ máy chủ về tiến trình của các tác vụ nền.
• WebSockets: Sử dụng WebSockets để giao tiếp hai chiều với máy chủ, cho phép các cơ chế theo dõi tiến trình và phản hồi phức tạp hơn.

Kết luận

Triển khai bộ tính toán tiến trình thời gian thực bằng hook `useFormStatus` của React là một kỹ thuật có giá trị để nâng cao trải nghiệm người dùng trong quá trình gửi biểu mẫu. Bằng cách cung cấp phản hồi rõ ràng và tức thì, bạn có thể giảm bớt sự lo lắng của người dùng, tăng cường sự tương tác và xây dựng lòng tin. Hãy nhớ xem xét khả năng tiếp cận, xử lý lỗi và tối ưu hóa hiệu suất khi triển khai các chỉ báo tiến trình. Mặc dù `useFormStatus` cung cấp một phương pháp tiếp cận hợp lý, việc khám phá các phương pháp theo dõi tiến trình thay thế dựa trên độ phức tạp của ứng dụng của bạn có thể mang lại kết quả tốt hơn. Bằng cách xem xét cẩn thận nhu cầu của người dùng và các yêu cầu cụ thể của ứng dụng, bạn có thể tạo ra các chỉ báo tiến trình vừa cung cấp thông tin vừa hấp dẫn.