ReactJS - Phragment

Xin chào các bạn nhà phát triển! Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những tính năng hữu ích của React: Phragment. Như một người giáo viên khoa học máy tính gần gũi, tôi rất vui mừng được hướng dẫn các bạn qua chủ đề này. Cuối bài học này, các bạn sẽ sử dụng Phragment như một chuyên gia! Hãy cùng bắt đầu.

Phragment là gì?

Hãy tưởng tượng bạn đang chuẩn bị hành lý cho chuyến đi, và bạn muốn giữ tất cả các vật dụng cần thiết cùng nhau mà không cần sử dụng vali cồng kềnh. Đó chính xác là điều mà Phragment làm trong React! Nó cho phép chúng ta nhóm nhiều yếu tố lại với nhau mà không thêm một nút DOM nào.

Trong React, một thành phần chỉ có thể trả về một yếu tố duy nhất. Điều này thường dẫn đến việc các nhà phát triển bao bọc nhiều yếu tố trong một <div> không cần thiết. Phragment giải quyết vấn đề này một cách tinh tế.

Hãy xem một ví dụ đơn giản:

import React from 'react';

function WithoutFragment() {
return (
<div>
<h1>Hello</h1>
<p>World</p>
</div>
);
}

function WithFragment() {
return (
<React.Fragment>
<h1>Hello</h1>
<p>World</p>
</React.Fragment>
);
}

Trong thành phần WithoutFragment, chúng ta buộc phải sử dụng <div> để bao bọc các yếu tố. Nhưng trong WithFragment, chúng ta sử dụng React.Fragment để nhóm các yếu tố mà không thêm một nút DOM nào.

Cú pháp ngắn

Hiện tại, việc gõ React.Fragment mỗi lần có thể hơi nhàm chán. Nó giống như viết tên đầy đủ của bạn trên mỗi trang của bài kiểm tra! May mắn thay, React cung cấp một cú pháp ngắn hơn:

function ShortSyntax() {
return (
<>
<h1>Hello</h1>
<p>World</p>
</>
);
}

Cặp thẻ trống <> và </> là viết tắt của <React.Fragment> và </React.Fragment>. Nó giống như sử dụng biệt danh thay vì tên đầy đủ - ngắn hơn và ngọt ngào hơn!

Tại sao sử dụng Phragment?

Bạn có thể tự hỏi, "Tại sao phải phiền phức với Phragment? Có gì sai với việc sử dụng divs?" Câu hỏi tuyệt vời! Hãy để tôi giải thích bằng một ví dụ:

function TableExample() {
return (
<table>
<tr>
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
</tr>
</table>
);
}

Trong ví dụ này, nếu chúng ta sử dụng <div> thay vì Phragment, HTML của chúng ta sẽ không hợp lệ vì <div> không được phép là con của <tr>. Phragment cho phép chúng ta nhóm các <td> này mà không làm破裂 cấu trúc bảng.

Phragment với Keys

Bây giờ, hãy nâng cấp! Đôi khi, bạn cần thêm một key vào Phragment, đặc biệt khi渲染 danh sách. Dưới đây là cách bạn có thể làm:

function Glossary(props) {
return (
<dl>
{props.items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}

Trong ví dụ này, chúng ta sử dụng React.Fragment với thuộc tính key. Điều này rất hữu ích khi bạn đang ánh xạ qua một mảng và cần gán keys cho các Phragment được tạo ra.

Lưu ý rằng bạn không thể sử dụng cú pháp ngắn <> khi bạn cần truyền một key. Nó giống như cố gắng sử dụng biệt danh trên hộ chiếu - nó simply sẽ không hoạt động!

Khi nào nên sử dụng Phragment

Dưới đây là bảng nhỏ giúp bạn quyết định khi nào nên sử dụng Phragment:

Tình huống	Sử dụng Phragment?	Giải thích
Nhóm các yếu tố mà không thêm nút DOM	Có	Phragment không tạo ra các yếu tố DOM bổ sung
Trả về nhiều yếu tố từ một thành phần	Có	Các thành phần phải trả về một yếu tố duy nhất, và Phragment cho phép điều này mà không cần bao bọc thêm
Ánh xạ qua một mảng và cần trả về nhiều yếu tố cho mỗi mục	Có	Sử dụng Phragment có key trong trường hợp này
Cần thêm样式 hoặc bộ xử lý sự kiện cho một wrapper	Không	Sử dụng <div> hoặc yếu tố phù hợp khác thay vì

Kết luận

Và thế là bạn đã có tất cả, các bạn ơi! Chúng ta đã cùng nhau hành trình qua thế giới của React Phragment. Từ việc hiểu cách sử dụng cơ bản của chúng đến việc khám phá Phragment có key, bạn现在已经装备齐全 để sử dụng tính năng mạnh mẽ này trong các ứng dụng React của mình.

Nhớ rằng, Phragment giống như keo vô hình giúp gắn kết các thành phần của bạn. Nó giữ cho DOM của bạn sạch sẽ và mã nguồn của bạn có ý nghĩa. Vậy lần sau khi bạn muốn sử dụng <div> không cần thiết, hãy nghĩ đến Phragment!

Thực hành sử dụng Phragment trong các dự án React của bạn, và bạn sẽ nhanh chóng thấy cách chúng làm cho mã của bạn sạch sẽ và hiệu quả hơn. Chúc các bạn may mắn và mong rằng Phragment sẽ luôn ở bên bạn!

Credits: Image by storyset