fbpx
close

ReactJS: Tìm hiểu Higher Order Components – HOC (Phần 1)

Tác giả: Nguyen Văn Phong Ngày cập nhật: 02/11/2021 Chuyên mục: Kiến thức tổng hợp
Disclosure
Website Wiki.tino.org được cung cấp bởi Tino Group. Truy cập và sử dụng website đồng nghĩa với việc bạn đồng ý với các điều khoản và điều kiện trong chính sách bảo mật - điều khoản sử dụng nội dung. Wiki.tino.org có thể thay đổi điều khoản sử dụng bất cứ lúc nào. Việc bạn tiếp tục sử dụng Wiki.tino.org sau khi thay đổi có nghĩa là bạn chấp nhận những thay đổi đó.
Why Trust Us
Các bài viết với hàm lượng tri thức cao tại wiki.tino.org được tạo ra bởi các chuyên viên Marketing vững chuyên môn và được kiểm duyệt nghiêm túc theo chính sách biên tập bởi đội ngũ biên tập viên dày dặn kinh nghiệm. Mọi nỗ lực của chúng tôi đều hướng đến mong muốn mang đến cho cộng đồng nguồn thông tin chất lượng, chính xác, khách quan, đồng thời tuân thủ các tiêu chuẩn cao nhất trong báo cáo và xuất bản.

Higher Order Component (HOC) là một kỹ thụât nâng cao trong React với mục đích để tái sử dụng logic của các component. Vậy HOC là gì? Cách sử dụng HOC ra sao?

HOC là gì?

HOC – Higher Order Component không phải là một API của React, mà được xem là một pattern của React.

tim-hieu-higher-order-components-phan-1
Luồng chạy của một HOC

HOC thường được implement như một function nhận vào một component và trả về một component mới.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Nếu như một component nhận vào props để xử lý và hiển thị thành UI thì một HOC nhận vào một component và chuyển đổi thành một component khác.

HOC được sử dụng rộng rãi trong các thư viện của React (Redux, Relay…)

Ưu điểm:

  • Cho phép reuse code, logic của component.
  • Bổ sung, thay đổi logic trước cho một component mới trước khi return (render hijacking)
  • Điều khiển state và props.

Hướng dẫn sử dụng HOC

Trong React, các component là thành phần chính trong việc tái sử dụng. Chúng ta có thể tìm ra một vài logic tương tự với nhau trong các component, mặc dù chúng sử dụng các action, data khác nhau.

Ví du, một component UserList lấy dữ liệu từ state và render một danh sách user:

const users = [
  {
    id: "user1",
    username: "Danny Le",
    job: "Developer",
    age: "27",
    gender: "male",
    level: "gold",
    email: "danny.thanhtruc@gmail.com",
  },
  {
    id: "user2",
    username: "Vivian Le",
    job: "Developer",
    age: "27",
    gender: "male",
    level: "silver",
    email: "vivian.le@gmail.com",
  },
];

function User(props) {
  const { data } = props;
  return (
    <>
      <hr />
      <p>
        <b>User name:</b> {data.username}
      </p>
      <p>
        <b>Job:</b> {data.job}
      </p>
      <p>
        <b>Level:</b> {data.level}
      </p>
      <p>
        <b>Contact:</b> {data.email}
      </p>
    </>
  );
}

class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
    };
  }

  componentDidMount() {
    this.setState({ users });
  }

  render() {
    return (
      <>
        <h1>List User</h1>
        {this.state.users.map((user) => (
          <User data={user} />
        ))}
      </>
    );
  }
}

Sau đó, chúng ta có một component ProductList với pattern tương tự:

const products = [
  {
    availableSizes: ["S", "XS"],
    currencyFormat: "$",
    currencyId: "USD",
    description: "4 MSL",
    id: 12,
    installments: 9,
    isFreeShipping: true,
    price: 10.9,
    sku: 12064273040195392,
    style: "Black with custom print",
    title: "Cat Tee Black T-Shirt",
  },
  {
    availableSizes: ["M"],
    currencyFormat: "$",
    currencyId: "USD",
    description: "",
    id: 13,
    installments: 5,
    isFreeShipping: true,
    price: 29.45,
    sku: 51498472915966370,
    style: "Front print and paisley print",
    title: "Dark Thug Blue-Navy T-Shirt",
  },
];

function Product(props) {
  const { data } = props;
  return (
    <>
      <hr />
      <p>
        <b>Title:</b> {data.title}
      </p>
      <p>
        <b>Style:</b> {data.style}
      </p>
      <p>
        <b>Price:</b> {data.price}
      </p>
      <p>
        <b>Description:</b> {data.description}
      </p>
      <p>
        <b>Free shipping:</b> {data.isFreeShipping}
      </p>
    </>
  );
}

class ProductList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
    };
  }

  componentDidMount() {
    this.setState({ products });
  }

  render() {
    return (
      <>
        <h1>List Product</h1>
        {this.state.products.map((product) => (
          <Product data={product} />
        ))}
      </>
    );
  }
}

Hai component UserList và ProductList không giống nhau. Chúng nhận data khác nhau để setState và render nội dung khác nhau. Tuy nhiên,component UserList và ProductList có những logic chung với nhau như:

  • Chúng đều khởi tạo một mảng data rỗng ở state.
  • Sau khi render, chúng đều gọi đến hàm setState để cập nhật lại dữ liệu.
  • Hàm render đều có title, duyệt mảng data của state để render các item theo dữ liệu tương ứng.

Trong một ứng dụng lớn, có thể có nhiều logic như trên được sử dụng lặp đi lặp lại. Chúng ta cần một nơi để gom những logic này lại để dùng chung cho các component khác. Lúc này, HOC được phát huy điểm mạnh của mình.

Chúng ta viết thêm một function để tạo ra các component có cùng logic như ví dụ về UserList và ProductList ở trên. Function này sẽ nhận vào một component và lấy data trả về như một props. Ta tạo một hàm tên là withSubscription nhận đầu vào là component con, data và tiêu đề như sau:

function withSubscription(WrappedComponent, dataSource, title) {
  // ...trả về một component khác
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        dataSource: [],
      };
    }

    componentDidMount() {
      this.setState({ dataSource });
    }

    render() {
      // ... và render component đầu vào với dữ liệu mới!
      return (
        <>
          <h1>{title}</h1>
          {this.state.dataSource.map((data) => (
            <WrappedComponent data={data} />
          ))}
        </>
      );
    }
  };
}

Sau đó chúng ta chỉ cần gọi đến hàm withSubscription trên, truyền vào các argument cần thiết và render như một component bình thường như sau:

const UserList = withSubscription(User, users, "User List");
const ProductList = withSubscription(Product, products, "Product List");

function App() {
  return (
    <div className="App">
      <UserList />
      <ProductList />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
tim-hieu-higher-order-components-phan-1
Kết quả hiển thị User List trên trình duyệt
tim-hieu-higher-order-components-phan-1
Kết quả hiển thị Product List trên trình duyệt

HOC không chỉnh sửa hoặc làm thay đổi component đầu vào WrappedComponent mà chỉ kế thừa các hành vi của component này.

HOC ‘composes‘ component đầu vào bằng cách ‘wrapping‘ nó trong một component.

HOC là một pure component (không có side effect).

Component bên trong có thể nhận tất cả các props (các argument của HOC: data, title…) để sử dụng cho việc render. HOC không quan tâm dữ liệu sẽ được component sử dụng như thế nào, ngược lại component con cũng sẽ không quan tâm props được nhận từ đâu.

HOC chỉ là một hàm bình thường, ta có thể thêm vào bất kì tham số nào, số lượng tùy ý.

Mỗi quan hệ giữa HOC và component con cũng dựa vào props (agument) như các component bình thường, miễn là data của HOC cung cấp đủ để đáp ứng với logic của component con.

Các component được sinh ra từ một HOC vẫn hiển thị trên React Dev Tool. Vì thế, chúng ta có thể dễ dàng debug:

tim-hieu-higher-order-components-phan-1
Cây component trong React Dev Tool
tim-hieu-higher-order-components-phan-1
Props trong React Dev Tool

Như vậy, trong bài viết này, chúng ta đã tìm hiểu về khái niệm HOC cũng như cách sử dụng. Đến bài viết sau, chúng ta sẽ tìm hiểu xem những quy ước và lưu ý khi sử dụng Higher Order Component nhé. Cám ơn các bạn đã ghé thăm bài viết!

Bài viết có tham khảo thông tin từ link: https://reactjs.org/docs/higher-order-components.html

Xem bài viết sau tại: ReactJS: Higher Order Components – HOC (Phần 2)

Bài viết liên quan

Mục lục

Xem nhiều

giá tốt, chất lượng cao mình rất hài lòng
chất lượng dịch vụ tốt lắm...á
chất lượng dịch vụ rất tốt.
giá tốt, chất lượng cao mình rất hài lòng
Dịch vụ chăm sóc khách hàng tốt
Dùng rất oke nha mọi người
Dịch vụ chăm sóc khách hàng tốt, mình rất hài lòng về dịch vụ của TINOHOST
Đã mua rất nhiều tên miền tại Tinohost. Chất lượng tốt
dịch vụ và chăm sóc khách hàng rất tốt , mình rất thích tinohost , mình đã sử dụng nhiều dịch vụ của tinohost rồi
tuyệt vời chăm sóc khách hàng quá tốt
dịch vụ và chăm sóc khách hàng rất tốt , mình rất thích tinohost , mình đã sử dụng nhiều dịch vụ của tinohost rồi
Quá tốt - Quá xuất sắc và tuyệt
Hỗ trợ nhiệt tình. dịch vụ chất lượng
Đội ngũ support rất nhiệt tình.
Sử dụng dịch vụ của bạn Tinohost 2 3 năm nay chưa khi nào phải thất vọng.
host dùng chất lượng, miền giá rẻ
dịch vụ hỗ trợ rất nhanh, tốc độ hosting tốt
Hộ trợ tốt, nhanh. Tuyệt vời 🥰
tuyệt vời, dịch vụ cực tốt và hỗ trợ siêu nhanh
Làm việc nhanh chóng, giá thành hợp lí.
Hosting rẻ và nhanh thích hợp cho học sinh sinh viên như mình
dịch vu tốt ! Sẽ sử dụng thưởng xuyên !
Mỗi lần cần gì, nhắn Tino là được hỗ trợ ngay. Nên một đứa không biết gì về web như mình cũng tạo được blog. Cơ bản mình chỉ lo viết, mọi thứ có anh IT của Tino lo hết.
Nhìn chung thì Tino xứng đáng là một trong những nhà cung cấp host giá rẻ #1 tại VN. Bên này support khá nhanh và nhiệt tình nên quá trình sử dụng diễn ra tương đối trơn tru.
Chất lượng quá ok so với mức giá. Các SME có thể tham khảo để dựng web nhé.
uy tín chất lượng chuẩn cho 5 sao
Dịch vụ nhanh chóng thanh toán tiện lợi
Dịch vụ nhanh chóng, giá cả hợp lý
Chất lượng phục vụ ok, support khá nhanh chóng và chất lượng gói lớn tốt, gói nhỏ cần tốt hơn.
Dịch vụ tốt, giá cả hợp lý👍
Rất hay, rất tốt, rất hữu ích
Hỗ trợ rất nhanh và nhiệt tình
Chất lượng phục vụ ok, support khá nhanh chóng và chất lượng gói lớn tốt, gói nhỏ cần tốt hơn.
dịch vụ tốt, thanh toán nhanh chống
Hài lòng dịch vụ của tinohost
Sau khi sử dụng dịch vụ của TinoHost. Mình thấy website load nhanh hơn hẳn so với sử dụng ở nhà cung cấp cũ. Giá cả do mình đc mua với giá sale 99% của TinoHost nên rất là rẻ. Gói mình mua là gòi Hosting Bussiness 20GB. Thông số cấu hình cao nên web load khá mượt
Chúc TinoHost phát triển!
domain rẻ, có nhiều gói hữu ích thích hợp cho sinh viên
Hài lòng về dịch vụ và tư vấn
Dịch vụ tốt . Support nhiệt tình
Chất lượng OK
Nhanh chóng
dịch vụ rất tốt
Nhân viên support nhanh, hỗ trợ nhiệt tình, giao dịch tự động nên khá tiện
Đã dùng nhiều dịch vụ tại Tinohost, chất lượng tốt, rất hài lòng ...😀
Sự dụng rất hài lòng với các dịch vụ của tinohost
Dịch vụ tốt, uy tín chất lượng
Tino dịch vụ quá tuyệt vời
Giá rẻ, dịch vụ tốt, hỗ trợ nhanh chóng
dịch vụ rất tốt rất tuyệt vời
Giá hợp lý cho người mới dùng
Mình thấy Tinohost có giao diện thân thiện, dễ đăng ký sử dụng cho người mới tập tành làm web như mình. Hosting hỗ trợ có nhiều lựa chọn về dung lượng và giá cả! Thanh toán qua momo thuận tiện. Recommended!
wed quá ok làm việc nhanh ngọn
Dịch vụ tốt. Khá hài lòng vì support nhiệt tình
Dịch vụ quá tuyệt vời danh cho các bạn
Xin cảm ơn đội ngủ kỹ thuật. Các bạn rất chuyên nghiệp và thân thiện. Tôi sẽ giới thiệu các bạn cho bạn bè của mình.
Dịch vụ hỗ trợ tốt, ổn định, thanh toán dễ dàng.
Mình từng dùng VPS bên Vietel IDC, hay gặp lỗi vặt và bảo trì liên tục. Nhưng Tino thì rất ok
dùng tốt, nhanh, dễ sử dụng
Giao diện đẹp mắt, dễ sử dụng
Đề nghị xem lại vấn đề phục vụ khách hàng (livchat)!
Good. Tốc độ cao. Tùy chỉnh nhiều trên shared hosting.
hosting ngon, giá luôn rẻ, tôi làm code nhưng rất thích sài host tino
Tino cung cấp host rất chuyên nghiệp. Đội ngũ kỹ thuật hỗ trợ rất tận tâm và nhiệt tình. Mình sẽ tiếp tục ủng hộ Tino 🥰.
Rất tuyệt vời🙆🙆🙆🙆🙆🙆🙆🙆🙆
Xét về tầm giá thì TinoHost rất đáng để mua và sử dụng lâu dài.
Dịch vụ chất lượng, ủng hộ 1 năm nay rồi
tuyệt vời quá đi,tuyệt vời quá đi
Tốc độ ổn định, tư vấn nhiệt tình
mới tham gia, mong mọi người hỗ trợ thêm
Tốc độ khá tốt với gói rẻ nhất 9k
Giao dịch nhanh,support nhanh và tận tình,chuyển miền nhanh,Hosting Ok
mua sản phẩm dịch vụ tinhot rất tốt tặng ad 5tr ** luon nè🥰🥰🥰
tinohost
một truong những nơi bán hosting rẻ, chất lượng dành cho anh em nào cần để làm web
mua tại : tinohost.com
mình đã mua 2 tên miền + hosting của Tino Host . quả nhiên hiệu quả SEO cải thiện đáng kể và chứng chỉ bảo mật HTTPS miễn phí của Tino Host cũng ko kém phần quang trọng cho việc SEO website của mình
Tino host là một trong nhà cung cấp tốt nhất mình từng sử dụng. Với ưu đãi khuyến mại nhiều, giá thành rẻ kèm theo đó là sự support tuyệt vời của các admin. Nếu ai chưa lựa chọn được nhà cung cấp cho bản thân mình thì Tinohost sẽ là câu trả lời tốt nhất.
dịch vụ tốt, đội ngũ support nhiệt tình, cảm ơn #tinohost
Uy tín, chất lượng, nhân viên hỗ trợ nhiệt tình
mua 2 domain tại tinohost dùng rất chất lượng
Đã mua 02 domain và hosting tại TinoHost, hài lòng cách tư vấn và chăm sóc khách hàng của TinoHost :)
Giá rẻ cấu hình mạnh, black friday là sự bùng nổ của Tino
Hay web bán tài nguyên rất ngon
dịch vụ tốt, mua luôn host chất lượng cao của công ty nhân dịp blackfriday, cảm ơn #tinohost
Dịch vụ rất tốt, nhân viên tận tình.
Hỗ trợ nhiệt tình nhất trong các nhà cung cấp mih từng dùng. Không những server mạnh, ưu đãi có 1 không 2 mà còn nhiều plugin pro bản quyền đính kèm nữa. Quyết định gắn bó "Lifetime" với tino 😁
Dịch vụ tốt hỗ trợ nhanh chóng
Thích cách tư vấn tận tình và nhanh gọn của Tino mỗi khi có vấn đề trục trặc. Hosting ổn định, giá rẻ tốt lắm nhé mọi người
mình có mua 2 tên msiền của tino, mình rât thích cách tư vấn và chăm sóc khách hàng tại đây. Ngoài ra giá domain khá rẻ, phù hợp cho mọi người. 5 sao
Dịch vụ tốt, support nhiệt tình
tinohost tuyệt vời giá cả hợp lý
domain mua rất rẻ :))))
tốt, chất lượng, hostingok
Hosting tốt, giá cả cạnh tranh
Tuyệt vời , Hosting quá ổn
Chất lượng lắm ạ. Domain mua rẻ nhất thị trường
Dịch vụ tốt và chất lượng
Chất lượng lắm ạ. Domain mua rẻ nhất thị trường
Tino Host dùng quá ngon đi !💥💥💥💥💥
Tôi đã mua domain và hosting của các nhà cung cấp khác rồi, nhưng thực sự thấy không tốt bằng Tino, ngoài ra còn hỗ trợ rất tốt. Cảm ơn tino nhiều!
Next Reviews
CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO
Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn,  Phường Bến Nghé, Q. 1, TP. Hồ Chí Minh

Văn phòng kinh doanh: Số 42 Trần Phú, Phường 4, Quận 5, TP HCM
GPKD số 0315679836 do Sở KH và ĐT TP Hồ Chí Minh cấp
Hotline: 0364 333 333
Góp ý/Phản ánh dịch vụ: 0933 000 886