ReactJS - Thành phần không có trạng thái: Hướng dẫn cho người mới bắt đầu

Xin chào các pháp sư React tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình đầy thú vị vào thế giới của các thành phần React, đặc biệt là tập trung vào các thành phần không có trạng thái. Đừng lo lắng nếu bạn là người mới bắt đầu lập trình; tôi sẽ là người hướng dẫn thân thiện của bạn, giải thích mọi thứ từng bước một. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và chúng ta cùng bắt đầu!

ReactJS - Stateless Component

Thành phần là gì trong React?

Trước khi chúng ta nói về các thành phần không có trạng thái, hãy hiểu thành phần là gì trong React. Hãy tưởng tượng các thành phần như những mảnh LEGO. Cũng như bạn có thể xây dựng các cấu trúc phức tạp từ những mảnh LEGO đơn giản, bạn có thể tạo ra các ứng dụng web phức tạp bằng cách sử dụng các thành phần React.

Loại thành phần

Trong React, chúng ta có hai loại thành phần chính:

Thành phần có trạng thái (Class Components)
Thành phần không có trạng thái (Functional Components)

Hôm nay, chúng ta sẽ tập trung vào các thành phần không có trạng thái, nhưng hãy cùng điểm qua các thành phần có trạng thái để hiểu sự khác biệt.

Thành phần có trạng thái: Lược览

Thành phần có trạng thái, còn được gọi là class components, giống như瑞士军刀 của React. Chúng có thể làm nhiều điều, bao gồm cả quản lý trạng thái của riêng mình. Dưới đây là một ví dụ đơn giản:

import React, { Component } from 'react';

class Greeting extends Component {
constructor(props) {
super(props);
this.state = { name: 'World' };
}

render() {
return <h1>Hello, {this.state.name}!</h1>;
}
}

Trong ví dụ này, Greeting là một thành phần có trạng thái quản lý trạng thái name của riêng mình. Nhưng đôi khi, chúng ta không cần tất cả sức mạnh này, và đó là khi các thành phần không có trạng thái xuất hiện!

Thành phần không có trạng thái: Đơn giản là tốt nhất

Thành phần không có trạng thái, còn được gọi là functional components, giống như những công nhân hiệu quả của React. Chúng làm một công việc và làm nó tốt: render UI dựa trên props mà chúng nhận được. Hãy cùng xem một ví dụ:

const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};

Thật tuyệt vời phải không? Thành phần này làm cùng công việc như class component trước đó nhưng với ít mã hơn nhiều. Nó giống như sự khác biệt giữa việc sử dụng búa lớn và búa thường để treo khung ảnh - đôi khi, đơn giản hơn là tốt hơn!

Tại sao sử dụng thành phần không có trạng thái?

Đơn giản: Chúng dễ đọc và dễ viết hơn.
Hiệu suất: Chúng hơi nhanh hơn vì React không cần thiết lập quản lý trạng thái.
Khả năng kiểm thử: Với ít bộ phận di chuyển, chúng dễ kiểm thử hơn.
Khả năng tái sử dụng: Chúng tập trung hơn, dễ tái sử dụng hơn.

Tạo thành phần không có trạng thái đầu tiên của bạn

Hãy tạo một thành phần không có trạng thái đơn giản cho preview bài viết blog:

const BlogPostPreview = ({ title, excerpt, author }) => {
return (
<div className="blog-post-preview">
<h2>{title}</h2>
<p>{excerpt}</p>
<span>By {author}</span>
</div>
);
};

Đây là những gì đang xảy ra:

Chúng ta định nghĩa một hàm叫做 BlogPostPreview.
Nó nhận một đối tượng làm đối số, và chúng ta ngay lập tức tách ra để lấy title, excerpt, và author.
Hàm trả về JSX, mô tả thành phần nên render như thế nào.

Để sử dụng thành phần này:

const App = () => {
return (
<div>
<BlogPostPreview
title="React is Awesome!"
excerpt="Learn why React is taking the web development world by storm."
author="Jane Doe"
/>
</div>
);
};

Props: Máu của thành phần không có trạng thái

Props (viết tắt của properties) là cách chúng ta truyền dữ liệu cho các thành phần không có trạng thái. Chúng giống như nguyên liệu bạn đưa cho đầu bếp - thành phần nhận những props này và "nấu" chúng thành một UI ngon lành!

Hãy tạo một ví dụ phức tạp hơn: một thẻ thông tin hồ sơ người dùng.

const ProfileCard = ({ name, job, avatar, socialLinks }) => {
return (
<div className="profile-card">
<img src={avatar} alt={`${name}'s avatar`} />
<h2>{name}</h2>
<p>{job}</p>
<div className="social-links">
{socialLinks.map((link, index) => (
<a key={index} href={link.url}>
{link.platform}
</a>
))}
</div>
</div>
);
};

Ở đây, chúng ta sử dụng các props phức tạp hơn, bao gồm một mảng các liên kết mạng xã hội. Hãy phân tích:

Chúng ta tách name, job, avatar, và socialLinks từ props.
Chúng ta sử dụng các giá trị này để điền vào JSX.
Đối với socialLinks, chúng ta sử dụng hàm map để tạo một liên kết cho mỗi nền tảng mạng xã hội.

Để sử dụng thành phần này:

const App = () => {
const socialLinks = [
{ platform: 'Twitter', url: 'https://twitter.com/johndoe' },
{ platform: 'LinkedIn', url: 'https://linkedin.com/in/johndoe' }
];

return (
<ProfileCard
name="John Doe"
job="React Developer"
avatar="https://example.com/avatar.jpg"
socialLinks={socialLinks}
/>
);
};

Practices tốt cho thành phần không có trạng thái

Dưới đây là một số lời khuyên để làm cho các thành phần không có trạng thái của bạn tỏa sáng:

Giữ chúng tập trung: Mỗi thành phần nên làm một việc tốt.
Sử dụng prop-types: Mặc dù không được đề cập trong hướng dẫn này, prop-types giúp phát hiện lỗi bằng cách kiểm tra loại props.
Sử dụng props mặc định: Cung cấp giá trị mặc định cho props khi cần thiết.
Tách props: Nó làm cho mã của bạn sạch sẽ và dễ đọc hơn.

Kết luận

Chúc mừng! Bạn đã刚刚 bước vào thế giới của các thành phần không có trạng thái trong React. Nhớ rằng, như bất kỳ kỹ năng mới nào, thực hành là chìa khóa để thành thạo. Hãy thử tạo ra các thành phần không có trạng thái của riêng bạn, thử nghiệm với các props khác nhau, và quan trọng nhất, hãy vui vẻ!

Trong bài học tiếp theo, chúng ta sẽ sâu hơn vào cách sử dụng các thành phần này để xây dựng một ứng dụng thực tế. Đến那个时候, chúc bạn lập trình vui vẻ!

Credits: Image by storyset

Hướng Dẫn Trước:

ReactJS - API Quản lý Trạng thái

Hướng Dẫn Tiếp Theo:

ReactJS - Quản lý trạng thái bằng React Hooks