Tối ưu hóa hiển thị danh sách lớn trong ReactJS với React-window và React-virtualized

Trong quá trình phát triển ứng dụng ReactJS , công việc xử lý và hiển thị danh sách dữ liệu là một tác vụ rất phổ biến. Tuy nhiên, với danh sách có số lượng phần tử lớn (hàng trăm, hàng sản phẩm), hiệu suất xuất khẩu sẽ được hiển thị hoàn hảo nếu không được tối ưu hóa.

Trong bài viết này, CodeFresher sẽ hướng dẫn bạn cách hiển thị danh sách cơ bản và hiệu suất tối ưu bằng cách sử dụng hai thư mạnh mẽ: React-window và React-virtualized.

Hiển thị danh sách trong ReactJS

ReactJS cung cấp khả năng hiển thị danh sách thông tin qua hàm map(). Đây là cách tiếp cận phổ biến và đơn giản để hiển thị nhiều phần tử dựa trên một dữ liệu mảng.

const data = ['A', 'B', 'C'];
return (
  <ul>
    {data.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

Cách này hoạt động tốt với danh sách nhỏ. Tuy nhiên, nếu danh sách lên đến hàng ngàn mục, React phải render toàn bộ DOM cây. Điều này gây ảnh hưởng đến tốc độ tải và tương tác.

Giới thiệu thư viện React-window và React-virtualized

Để giải quyết vấn đề tính toán khi xử lý danh sách lớn, bạn nên sử dụng thư viện hỗ trợ kỹ thuật số kỹ thuật cuộn – chỉ hiển thị các phần tử đang hiển thị ở chế độ xem chế độ. Hai thư viện phổ biến nhất là:

1. React-window

Đây là một thư viện thư giãn được phát triển bởi chính tác giả của React-virtualized. React-window rất dễ sử dụng và phù hợp với hầu hết các use case hiển thị danh sách đơn giản.

Ví dụ sử dụng:

import { FixedSizeList as List } from 'react-window';

const MyList = () => (
  <List height={300} itemCount={1000} itemSize={35} width={300}>
    {({ index, style }) => <div style={style}>Item {index}</div>}
  </List>
);

Chỉ hiển thị những mục này trong khung nhìn mới được hiển thị. Điều này giúp ứng dụng hoạt động mượt mà hơn đáng kể.

2. React-virtualized

Đây là phiên bản đầy đủ và linh hoạt hơn. Nó hỗ trợ nhiều loại dữ liệu như Grid, Table và có nhiều tùy chọn mở rộng hơn React-window.

Ví dụ sử dụng:

import { List } from 'react-virtualized';

const rowRenderer = ({ index, key, style }) => (
  <div key={key} style={style}>Item {index}</div>
);

const MyList = () => (
  <List
    width={300}
    height={300}
    rowHeight={35}
    rowCount={1000}
    rowRenderer={rowRenderer}
  />
);

Dù có phần phức tạp hơn, React-ảo hóa lại cực kỳ hữu dụng trong các dự án lớn, nơi cần kiểm soát nhiều loại danh sách, bảng dữ liệu có tiêu đề cố định hoặc nhiều cột.

Hiển thị có điều kiện – Hiển thị có điều kiện

Trong thực tế, không phải lúc nào bạn cũng hiển thị toàn bộ dữ liệu. Hỗ trợ hỗ trợ xuất điều kiện React, cho phép bạn kiểm soát hiển thị thông tin về logic điều kiện.

Ví dụ:

{isLoading ? <p>Đang tải dữ liệu...</p> : <ListComponent />}

Kết hợp với cuộn ảo, bạn có thể thiết lập hiệu ứng tải hoặc lười tải cực kỳ hiệu quả.

Tóm lại, việc hiển thị danh sách lớn trong ReactJS không còn là vấn đề khó khăn nếu bạn áp dụng đúng kỹ thuật. Vui lòng sử dụng thư viện React-window hoặc React-virtualized khi cần:

• Ưu tiên tối đa khi danh sách dài.
• Tránh hiển thị toàn bộ DOM không cần thiết.
• Cải thiện trải nghiệm người dùng với tốc độ mượt mà hơn.

Bạn nên bắt đầu với React-window để làm quen và chuyển sang React-virtualized khi cần xử lý phức tạp hơn. Ngoài ra, hãy xem các plugin được cung cấp để tạo điều kiện hiển thị dữ liệu theo một cách thông tin, có Kiểm soát.

Đừng quên theo dõi CodeFresher để cập nhật thông tin mới nhất về các khóa học lập trình!

Link đăng ký khóa học: https://laptrinh-online.vn/courses/tat-ca-khoa-hoc

Địa chỉ: Trung tâm CodeFresher – Số 104 Hoàng Ngân, Cầu Giấy, Hà Nội.

SĐT: Ms Nga – 0968089175 , Ms Diệu – 0332026803 (zalo/call)