Trong dự án phần mềm đa năng và dẫn đầu của bạn, chắc chắn rằng việc tạo mã sẽ là một phần quan trọng. Vì vậy, trong bài học này, chúng ta sẽ tập trung vào HOCs để tạo ra các logic có thể tái sử dụng, cho phép bạn chia sẻ chức năng chung trên nhiều thành phần mà không cần bản sao mã.
Bước đầu tiên là bắt đầu với ReactJS. Vì vậy, chúng ta sẽ xem xét nó từ góc độ của một lập trình viên.
REACTJS
Là một công nghệ cho phép bạn xây dựng các ứng dụng tương tác một cách nhanh chóng và dễ dàng. ReactJS cũng là một thư viện tạo giao diện người dùng (UI) để giúp bạn tạo ra các giao diện tương tác phức tạp dễ dàng hơn.
ReactJS cho phép bạn tạo ra các thành phần và cung cấp chức năng bổ sung thông qua thuộc tính (props), điều này thật tuyệt vời. Tuy nhiên, nếu bạn muốn sử dụng các chức năng chung giữa nhiều thành phần, việc sao chép mã là không tránh khỏi. Để giải quyết vấn đề này, bạn có thể sử dụng HOCs.
HOCs
HOC là viết tắt của Higher Order Components. Nó là một giải pháp cho việc tái sử dụng logic giống nhau giữa các thành phần thông qua các thuộc tính (props). Bằng cách sử dụng HOCs, bạn có thể xây dựng các chức năng tái sử dụng và áp dụng chúng vào các thành phần hiện có.
Được tạo ra như một hàm, HOCs nhận một thành phần làm đối số và trả về một thành phần mới với các logic bổ sung.
Ví dụ, nếu bạn muốn thêm chức năng xác thực vào một thành phần, bạn cần truy cập API bên thứ ba để kiểm tra thông tin đăng nhập của người dùng. Tuy nhiên, nếu bạn muốn sử dụng chức năng này cho các thành phần khác, bạn sẽ cần phải sao chép và dán mã cho mỗi thành phần, làm cho mã của bạn trở nên khó đọc và bảo trì.
Để giải quyết vấn đề này, bạn có thể sử dụng HOCs và đóng gói chức năng xác thực vào HOCs, sau đó áp dụng chúng cho các thành phần cần sử dụng.
Ví dụ
Hãy xem xét một ví dụ bên dưới để hiểu rõ hơn về cách tạo và sử dụng HOC.
Bạn muốn tạo một thành phần để hiển thị tiêu đề trang. Bạn muốn tái sử dụng chức năng của nó cho các trang khác trong ứng dụng của bạn. Bạn cũng muốn thêm kiểm tra xác thực vào chức năng này để xác minh người dùng đăng nhập.
Đầu tiên, bạn sẽ tạo một chức năng HOC để thực hiện kiểm tra xác thực. Nó sẽ nhận một thành phần là đối số và trả về một thành phần mới. Đầu tiên, HOC sẽ kiểm tra xem người dùng có đăng nhập không. Nếu không, nó sẽ chuyển hướng người dùng đến trang đăng nhập.
import React from 'react';
import { Redirect } from 'react-router-dom';
function withAuth(Component) {
return class extends React.Component {
render() {
if (localStorage.getItem('isLoggedIn') !== 'true') {
return ;
}
return ;
}
};
}
export default withAuth;Ở đây, HOC sẽ kiểm tra xem người dùng có đăng nhập không. Nếu không, nó sẽ chuyển hướng người dùng đến trang đăng nhập. Nếu có, nó sẽ trả về một thành phần mới với các thuộc tính và tiện ích cần thiết để hiển thị tiêu đề trang.
Bây giờ, bạn có thể sử dụng HOC này trong nhiều thành phần khác nhau để kiểm tra xác thực trước khi hiển thị nội dung.
Ví dụ:
import React from 'react';
import withAuth from './withAuth';
class Profile extends React.Component {
render() {
return (
<div>
<h1>Profile</h1>
</div>
);
}
}
export default withAuth(Profile);Ở đây, code đã sử dụng HOC để kiểm tra xác thực trước khi hiển thị trang Profile.
KẾT LUẬN
HOC là một công cụ quý giá cho lập trình viên ReactJS, giúp chúng tôi tạo ra các thành phần có sức mạnh toàn diện và code dễ bảo trì.
Thông thường, bạn có thể sử dụng HOCs để thực hiện các chức năng bổ sung trên kiểu dữ liệu khác nhau. Tuy nhiên, hãy nhớ rằng việc sử dụng quá nhiều HOCs có thể làm cho code trở nên khó đọc và khó bảo trì.
Với điều kiện đúng, HOCs sẽ giúp bạn tạo ra các thành phần có thể tái sử dụng và bảo mật mã của bạn, giải phóng thời gian để tập trung vào việc tạo ra các chức năng mạnh mẽ hơn cho ứng dụng của bạn.
Chúng ta đã tìm hiểu cách sử dụng HOCs để tạo ra các logic có thể tái sử dụng, cho phép bạn chia sẻ chức năng chung trên nhiều thành phần mà không cần bản sao mã.
Bạn có thể xem các kỹ năng nâng cao khác của reactjs tại đây: Các kỹ thuật lập trình nâng cao và thực hành tốt nhất bạn phải biết.