Hướng dẫn thân thiện về Render Props trong ReactJS cho người mới bắt đầu

Xin chào các bạn开发者 React! Hôm nay, chúng ta sẽ cùng tìm hiểu một khái niệm thú vị gọi là "Render Props." Đừng lo lắng nếu ban đầu nó có vẻ khó hiểu - tôi hứa rằng bạn sẽ thành thạo vào cuối bài hướng dẫn này. Hãy cùng bắt đầu hành trình thú vị này!

Render Props là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu render props là gì. Hãy tưởng tượng bạn có một hộp ma thuật có thể làm một điều gì đó thú vị, nhưng bạn muốn quyết định cách hiển thị nội dung của nó. Đó chính là điều render props làm trong React!

Render prop là một kỹ thuật chia sẻ mã giữa các thành phần React bằng cách sử dụng một prop có giá trị là một hàm. Nó cho phép một thành phần biết điều gì cần hiển thị bằng cách gọi một hàm prop trả về một phần tử React.

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

class MagicBox extends React.Component {
render() {
return (
<div>
{this.props.render('Abracadabra!')}
</div>
)
}
}

// Sử dụng MagicBox
<MagicBox render={(magic) => <h1>{magic}</h1>} />

Trong ví dụ này, MagicBox là thành phần của chúng ta, và nó có một prop叫做 render. Prop render này là một hàm mà MagicBox gọi với một số dữ liệu ('Abracadabra!' trong trường hợp này). Hàm này sau đó trả về điều cần hiển thị.

Cách sử dụng Render Props

Bây giờ chúng ta đã có một hiểu biết cơ bản, hãy cùng khám phá cách sử dụng render props trong các tình huống thực tế hơn. Chúng ta sẽ tạo một thành phần theo dõi vị trí chuột - một ví dụ kinh điển để minh họa render props.

class MouseTracker extends React.Component {
state = { x: 0, y: 0 };

handleMouseMove = (event) => {
this.setState({
x: event.clientX,
y: event.clientY
});
}

render() {
return (
<div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
{this.props.render(this.state)}
</div>
);
}
}

// Sử dụng MouseTracker
<MouseTracker
render={({ x, y }) => (
<h1>Vị trí chuột là ({x}, {y})</h1>
)}
/>

Hãy phân tích này:

1. Chúng ta có một thành phần MouseTracker theo dõi vị trí chuột.
2. Nó cập nhật trạng thái mỗi khi chuột di chuyển.
3. Trong phương thức render, nó gọi hàm render prop, truyền trạng thái hiện tại.
4. Khi chúng ta sử dụng MouseTracker, chúng ta cung cấp một hàm nhận các tọa độ chuột và trả về điều cần hiển thị.

Phương pháp này cho phép chúng ta tái sử dụng logic theo dõi chuột trong khi quyết định cách hiển thị thông tin trong các ngữ cảnh khác nhau.

Áp dụng Render Props

Bây giờ chúng ta đã quen thuộc với các nguyên tắc cơ bản, hãy áp dụng render props để giải quyết một vấn đề phức tạp hơn. Chúng ta sẽ tạo một thành phần lấy dữ liệu có thể được sử dụng để hiển thị các loại dữ liệu khác nhau.

class DataFetcher extends React.Component {
state = { data: null, loading: true, error: null };

componentDidMount() {
this.fetchData();
}

fetchData = async () => {
try {
const response = await fetch(this.props.url);
const data = await response.json();
this.setState({ data, loading: false });
} catch (error) {
this.setState({ error, loading: false });
}
}

render() {
return this.props.render(this.state);
}
}

// Sử dụng DataFetcher để lấy dữ liệu người dùng
<DataFetcher
url="https://api.example.com/user"
render={({ data, loading, error }) => {
if (loading) return <div>Đang tải...</div>;
if (error) return <div>Lỗi: {error.message}</div>;
return <div>Xin chào, {data.name}!</div>;
}}
/>

// Sử dụng DataFetcher để lấy dữ liệu sản phẩm
<DataFetcher
url="https://api.example.com/products"
render={({ data, loading, error }) => {
if (loading) return <div>Đang tải sản phẩm...</div>;
if (error) return <div>Thất bại khi tải sản phẩm: {error.message}</div>;
return (
<ul>
{data.map(product => (
<li key={product.id}>{product.name}: ${product.price}</li>
))}
</ul>
);
}}
/>

Trong ví dụ này, thành phần DataFetcher của chúng ta xử lý logic lấy dữ liệu, trong khi render prop cho phép chúng ta quyết định cách hiển thị dữ liệu (hoặc các trạng thái tải/đ错误) trong các ngữ cảnh khác nhau.

Các phương thức Render Props

Dưới đây là bảng tóm tắt một số phương thức thường gặp sử dụng với render props:

Phương thức	Mô tả
render	Tên phổ biến nhất cho hàm render prop
children	Có thể sử dụng như một render prop, cho phép JSX nesting tự nhiên hơn
Tên tùy chỉnh	Bạn có thể sử dụng bất kỳ tên prop nào bạn thích cho hàm render

Kết luận

Render props là một mẫu mạnh mẽ trong React cho phép sự linh hoạt và tái sử dụng mã. Bằng cách tách biệt logic của một thành phần khỏi việc hiển thị, chúng ta có thể tạo ra mã modular và dễ bảo trì hơn.

Nhớ rằng, giống như bất kỳ công cụ nào, render props không phải lúc nào cũng là giải pháp tốt nhất. Đôi khi các mẫu đơn giản hơn như composition hoặc hooks có thể phù hợp hơn. Khi bạn có nhiều kinh nghiệm hơn, bạn sẽ phát triển trực giác để biết khi nào nên sử dụng mỗi mẫu.

Tiếp tục thực hành, 保持好奇心, và chúc các bạn mã hóa vui vẻ! Ai biết được, có thể bạn sẽ tạo ra thư viện React lớn tiếp theo sử dụng render props. Đã có những điều kỳ lạ hơn xảy ra trong thế giới lập trình!

Credits: Image by storyset