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

Greater Order Element (HOC) là 1 kỹ thụât nâng cao trong React sở hữu phần đích để tái dùng logic của những element. Vậy HOC là gì? Bí quyết dùng HOC ra sao?

HOC là gì?

HOC – Greater Order Element ko nên là 1 API của React, mà được xem là 1 sample của React.

HOC thường được implement như 1 perform nhận vào 1 element và trả về 1 element new.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Ví dụ như 1 element nhận vào props để xử lý và hiển thị thành UI thì 1 HOC nhận vào 1 element và chuyển đổi thành 1 element khác.

HOC được dùng đa dạng trong những thư viện của React (Redux, Relay…)

Ưu điểm:

  • Cho phép reuse code, logic của element.
  • Bổ sung, thay thế đổi logic trước cho 1 element new trước lúc return (render hijacking)
  • Điều khiển state và props.

Chỉ dẫn dùng HOC

Trong React, những element là thành phần chính trong việc tái dùng. Chúng ta có thể tìm ra 1 vài logic tương tự động sở hữu nhau trong những element, dù rằng chúng dùng những motion, information khác nhau.

Ví du, 1 element UserList lấy dữ liệu từ state và render 1 danh sách consumer:

const customers = [ { id: “user1”, username: “Danny Le”, job: “Developer”, age: “27”, gender: “male”, level: “gold”, email: “[email protected]”, }, { id: “user2”, username: “Vivian Le”, job: “Developer”, age: “27”, gender: “male”, level: “silver”, email: “[email protected]”, }, ]; perform Person(props) { const { information } = props; return ( <> <hr /> <p> <b>Person title:</b> {information.username} </p> <p> <b>Job:</b> {information.job} </p> <p> <b>Stage:</b> {information.degree} </p> <p> <b>Contact:</b> {information.electronic mail} </p> </> ); } class UserList extends React.Element { constructor(props) { tremendous(props); this.state = { customers: [], }; } componentDidMount() { this.setState({ customers }); } render() { return ( <> <h1>Checklist Person</h1> {this.state.customers.map((consumer) => ( <Person information={consumer} /> ))} </> ); } }

Xem Thêm  Dogechain (DC) là gì? Liệu Dogechain có “ăn theo” Dogecoin để vươn lên là?

Tiếp tục, chúng ta có 1 element ProductList sở hữu sample tương tự động:

const merchandise = [ { availableSizes: [“S”, “XS”], currencyFormat: “$”, currencyId: “USD”, description: “4 MSL”, id: 12, installments: 9, isFreeShipping: true, value: 10.9, sku: 12064273040195392, fashion: “Black with customized print”, title: “Cat Tee Black T-Shirt”, }, { availableSizes: [“M”], currencyFormat: “$”, currencyId: “USD”, description: “”, id: 13, installments: 5, isFreeShipping: true, value: 29.45, sku: 51498472915966370, fashion: “Entrance print and paisley print”, title: “Darkish Thug Blue-Navy T-Shirt”, }, ]; perform Product(props) { const { information } = props; return ( <> <hr /> <p> <b>Title:</b> {information.title} </p> <p> <b>Fashion:</b> {information.fashion} </p> <p> <b>Value:</b> {information.value} </p> <p> <b>Description:</b> {information.description} </p> <p> <b>Free transport:</b> {information.isFreeShipping} </p> </> ); } class ProductList extends React.Element { constructor(props) { tremendous(props); this.state = { merchandise: [], }; } componentDidMount() { this.setState({ merchandise }); } render() { return ( <> <h1>Checklist Product</h1> {this.state.merchandise.map((product) => ( <Product information={product} /> ))} </> ); } }

2 element UserList và ProductList ko giống nhau. Chúng nhận information khác nhau để setState và render nội dung khác nhau. Tuy nhiên, element UserList và ProductList có những logic chung sở hữu nhau như:

  • Chúng đều khởi tạo 1 mảng information rỗng tại state.
  • Sau khoản thời gian render, chúng đều gọi tới hàm setState để cập nhật lại dữ liệu.
  • Hàm render đều có title, thông qua mảng information của state để render những merchandise theo dữ liệu tương ứng.

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

Xem Thêm  Actual World Property (RWA) là gì? Tổng hợp những dự án RWA giàu tiềm năng phát triển thành trong tương lai

Chúng ta viết thêm 1 perform để tạo ra những element có cùng logic như thí dụ về UserList và ProductList tại trên. Operate này sẽ nhận vào 1 element và lấy information trả về như 1 props. Ta tạo 1 hàm tên là withSubscription nhận đầu vào là element con, information và tiêu đề như sau:

perform withSubscription(WrappedComponent, dataSource, title) { // …trả về 1 element khác return class extends React.Element { constructor(props) { tremendous(props); this.state = { dataSource: [], }; } componentDidMount() { this.setState({ dataSource }); } render() { // … và render element đầu vào sở hữu dữ liệu new! return ( <> <h1>{title}</h1> {this.state.dataSource.map((information) => ( <WrappedComponent information={information} /> ))} </> ); } }; }

Tiếp tục chúng ta chỉ cần gọi tới hàm withSubscription trên, truyền vào những argument cần thiết và render như 1 element bình thường như sau:

const UserList = withSubscription(Person, customers, “Person Checklist”); const ProductList = withSubscription(Product, merchandise, “Product Checklist”); perform App() { return ( <div className=”App”> <UserList /> <ProductList /> </div> ); } const rootElement = doc.getElementById(“root”); ReactDOM.render(<App />, rootElement);

HOC ko chỉnh sửa hoặc khiến thay thế đổi element đầu vào WrappedComponent mà chỉ kế thừa những hành vi của element này.

HOC ‘composes‘ element đầu vào bằng bí quyết ‘wrapping‘ nó trong 1 element.

HOC là 1 pure element (ko có facet impact).

Element bên trong có thể nhận toàn bộ những props (những argument của HOC: information, title…) để dùng cho việc render. HOC ko để ý dữ liệu sẽ được element dùng như thế nào, ngược lại element con cũng sẽ ko để ý props được nhận từ đâu.

HOC chỉ là 1 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 thuộc} ý.

Xem Thêm  Bí quyết chụp màn hình máy tính Win 7, 8, 8.1, 10 và 11

Từng quan hệ giữa HOC và element con cũng dựa vào props (agument) như những element bình thường, miễn là information của HOC phân phối đủ để đáp ứng sở hữu logic của element con.

Những element được sinh ra từ 1 HOC vẫn hiển thị trên React Dev Instrument. Vì thế, chúng ta có thể dễ dàng debug:

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ư bí quyết dùng. Tới bài viết sau, chúng ta sẽ tìm hiểu xem những quy ước và lưu ý lúc dùng Greater Order Element nhé. Cám ơn người trải nghiệm đã ghé thăm bài viết!

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

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

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

  • Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Heart, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí MinhVăn phòng đại diện: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí Minh
  • Điện thoại: 0364 333 333Tổng đài miễn phí tổn: 1800 6734
  • E mail: gross [email protected]
  • Web site: www.tino.org