Chắc hẳn ai cũng biết tới nguyên lý đầu tiên của SOLID đó là trách nhiệm đơn nhất. Nghĩa là mỗi một đối tượng chỉ làm một nhiệm vụ duy nhất. Đơn giản vì với tính đơn nhất chúng ta sẽ dễ dàng kiểm soát mã nguồn hơn (cho cả người code lần người review). Chưa kể tới việc với tính đơn nhất thì mã nguồn của bạn cũng trở nên trong sáng hơn. Với anh em lập trình React cũng vậy, bài toán khá đau đầu là làm sao tách logic ra khỏi phần mã nguồn kết xuất HTML. Cách làm như vậy giúp chúng ta thay vì viết một React Component để là cả hai việc thì bây giờ chúng ta sẽ viết hai React Component để làm hai nhiệm vụ khác nhau. Trong bài viết này tôi sẽ hướng dẫn các bạn sử dụng mấu container để làm việc đó.
Container component là gì?
Chúng ta không có một định nghĩa chính xác nào về container component cả, container component đơn giản là một React Component làm nhiệm vụ goi API để lấy dữ liệu và sau đó truyền nó xuống một React Component để kết xuất mã HTML.
Định nghĩa container
Để các bạn dễ hình dung tôi sẽ viết thử một container, container này sẽ thực hiện lấy thông tin của octocat
src/containers/OctocatContainer.jsx
import React, { useState, useEffect } from 'react';
import { Octocat } from '../components/Octocat';
export function OctocatContainer() {
const [octocat, setOctocat] = useState(null);
useEffect(() => {
async function getOctocat() {
// gọi hàm fetch với phướng thực mặc định là GET
const response = await fetch('https://api.github.com/users/octocat');
const body = await response.json();
// sử dụng React Hook để thông tin octocat vào state
setOctocat(body);
}
getOctocat();
}, []); // tham số mảng rỗng thể hiện hàm effect không phụ thuộc vào đối tượng nào, nó tương đương với hàm componentDidMount
return <Octocat {...octocat} />;
}
Trong ví dụ trên tôi có sử dụng thêm JSX spread attributes để tránh việc phải khai báo props
cho Octocat component. Mẫu này đặc biệt có ý nghĩa đối với các component mà bạn cần khai báo nhiều props
.
Định nghĩa component để kết xuất mã HTML
Sau khi có dữ liệu rồi thì chúng ta sẽ kết xuất nó ra HTML như sau:
src/components/Octocat/Octocat.jsx
import React from 'react';
export function Octocat(props) {
const { login, avatar_url, name } = props;
return (
<ul>
<li>{login}</li>
<li>{name}</li>
<li>
<img src={avatar_url} alt={login} />
</li>
</ul>
);
}
Như các bạn thấy, component trên chỉ làm nhiệm vụ bind dữ liệu lên màn hình mà thôi.
Cùng xem kết quả nhé 🙂