Nếu như bạn đang xây dựng một giao diện người dùng phức tạp bằng React và gặp phải một vấn đề làm lộn xộn DOM của mình và gây ra ảnh hưởng lớn tới bố cục, thì bài viết này là dành cho các bạn.
Tôi sẽ giới thiệu một tính năng vô cùng thú vị, tên là React Fragments, cho phép bạn có thể nhóm danh sách các phần tử con mà không cần thêm các nút bổ sung vào DOM. Nhờ đó bố cục của bạn sẽ được đảm bảo. Hãy đọc hết bài viết để khám phá những thông tin hữu ích nhé.
Ví dụ về vấn đề đang gặp phải với React
Bạn đang làm việc trên một thành phần dashboard bao gồm một số thành phần con như: UserStats, ActivityFeed, và Notifications. Để kết xuất các thành phần này lại với nhau, bạn có thể gói chúng trong
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.