Hướng dẫn toàn tập về React Fragments

function Dashboard() {
  return (
    <div>
      <UserStats />
      <ActivityFeed />
      <Notifications />
    </div>
  );
}

Tuy nhiên, bạn sẽ nhận thấy rằng phần bổ sung <div> này đang gây ra vấn đề với bố cục CSS của bạn. Phần bổ sung này đang can thiệp vào style và gây ra vấn đề về căn chỉnh.

Các vấn đề có thể xảy ra khi xuất hiện thêm phần bổ sung <div>

• Xung đột về style: Phần bổ sung <div> này làm gián đoạn bố cục CSS, khiến việc định kiểu các thành phần theo ý muốn trở nên khó khăn hơn.
• DOM lộn xộn: Các thành phần không cần thiết làm cho DOM trở nên phức tạp hơn, điều này có thể khiến việc gỡ lỗi trở nên khó khăn hơn.
• Tác động đến hiệu suất: Các nút bổ sung có thể có tác động nhỏ đến hiệu suất hiển thị, đặc biệt là trong các ứng dụng lớn.

Đây là lúc React Fragments giải cứu nguy cấp cho bạn

React Fragment có thể giúp giải quyết vấn đề này đơn giản, bằng cách cho phép trả về nhiều phần tử mà không cần thêm các nút bổ sung vào DOM. Để thực hiện điều này, các bạn có thể làm như sau:

1. Triển khai React Fragments

Bạn hãy cập nhật thành phần Dashboard của mình để sử dụng Fragment. Bạn cũng có thể sử dụng <React.Fragment> thay cho <Fragment>.

function Dashboard() {
  return (
    <Fragment>
      <UserStats />
      <ActivityFeed />
      <Notifications />
    </Fragment>
  );
}

2. Sử dụng cú pháp viết tắt<> </>

Ngoài ra, bạn có thể sử dụng cú pháp viết tắt:

function Dashboard() {
  return (
    <>
      <UserStats />
      <ActivityFeed />
      <Notifications />
    </>
  );
}

3. Những lợi ích đạt được khi sử dụng React Fragments

• Cấu trúc DOM sạch: Không có phần tử <div> bổ sung nào được thêm vào DOM.
• Kiểu dáng đơn giản: Không có các trình bao bọc không cần thiết, bộ chọn CSS và bố cục hoạt động như mong đợi.
• Khả năng đọc được cải thiện: Mã sạch hơn và dễ hiểu hơn.

Các tính năng bổ sung khi sử dụng React Fragments

1. Sử dụng Keys với Fragments

Khi kết xuất danh sách các phần tử, bạn có thể cần gán key cho mỗi phần tử, như sau:

function ItemList({ items }) {
  return (
    <>
      {items.map(item => (
        <Fragment key={item.id}>
          <ItemDetail item={item} />
        </Fragment>
      ))}
    </>
  );
}

Lưu ý: Cú pháp viết tắt <> </> không hỗ trợ các thuộc tính như key.

2. Sử dụng Fragments đối với bảng

Trong các bảng HTML, bạn không thể gói các phần tử <td> trong <div>. React Fragments cho phép bạn trả về nhiều phần tử <td> mà không cần thêm các nút bổ sung:

function TableRow({ data }) {
  return (
    <tr>
      <Fragment>
        <td>{data.firstName}</td>
        <td>{data.lastName}</td>
        <td>{data.email}</td>
      </Fragment>
    </tr>
  );
}

3. Các Fragments lồng nhau

Bạn có thể lồng các đoạn bên trong các đoạn hoặc phần tử khác để sắp xếp các thành phần của mình:

function ComplexLayout() {
  return (
    <>
      <Header />
      <>
        <MainContent />
        <Sidebar />
      </>
      <Footer />
    </>
  );
}

4. Giới hạn của các Fragments

• Không có thuộc tính nào trong cú pháp viết tắt <> </>.
• Bạn không thể đính kèm thuộc tính ref vào một đoạn mã vì nó không tương ứng với một nút DOM.

5. Cải thiện hiệu suất

Bằng cách giảm số lượng các nút DOM không cần thiết, React Fragment có thể cải thiện hiệu suất hiển thị, đặc biệt là trong các ứng dụng lớn hoặc phức tạp.

Bằng cách sử dụng React Fragments, bạn có thể dọn dẹp mã của mình, đơn giản hóa cấu trúc DOM và giải quyết các vấn đề về kiểu dáng do các thành phần wrapper bổ sung gây ra. React Fragments là một công cụ đơn giản nhưng mạnh mẽ có thể giúp bạn viết các thành phần React sạch hơn và hiệu quả hơn. Hy vọng bài viết này sẽ hữu ích cho các bạn.