Higher-Order Component in React

Một HOC trong React là một pattern được dùng để chia sẻ function chung giữa các component mà không phải lặp lại phần code chung, nó thực tế không phải là component mà là function. Đây là một khái niệm khá phức tạp nhưng cũng rất là hay ho, hãy cùng tìm hiệu về nó qua một vài ví dụ dưới đây, let’s go !

Higher-Order Function

Trước tiên ta sẽ tìm hiểu qua về 1 khái niệm đó là Higher-Order Function.
Vì function trong js được coi như một object nên ta có thể truyền hàm này vào hàm khác như một tham số. High order function là hàm nhận một hàm dưới dạng đối số và trả về hàm dưới dạng đầu ra.

Vd1: Array.prototype.map, Array.prototype.filterArray.prototype.reduce là một High order function được tích hợp trong ngôn ngữ.

Vd2:

const calculator = function (inputFunction) {
    return function (...args) {
        const resultValue = inputFunction(...args);
        console.log(resultValue);
        return resultValue;
    }
}

const add = function (...all) {
    return all.reduce((a, b) => a + b, 0);
}

const multiply = function (...all) {
    return all.reduce((a,b) => a*b, 1);
}

Ta có thể sử dụng hàm calculator như sau:

calculator(mutiply)(2,4);
// => 8

calculator(add)(3,6,9,12,15,18);
// => 63

Higher Order Component

Một higher-order component là một function nhận vào một component như một argument và trả về “phiên bản mở rộng” của component đó.

function (InputComponent) {
    return ExtendedComponent
}

// hoặc
InputComponent => ExtendedComponent

ExtendedComponent là một component container, nó trả về InputComponent với một số extend


Trong ví dụ dưới đây chúng ta đã chỉ rõ example sẽ là 42 . Một số component của chúng ta cũng cần được chia sẻ thông tin này, và chúng ta sẽ tạo một HOC gọi là withExample để đưa thông tin này vào như là props.

import React from 'react';
const withExample = function (WrappedComponent) {
    return class HOC extends React.Component {
        render() {
            return (
                <WrappedComponent
                    {...this.props}
                    example={42}
                />
            );
        }
    }
    return HOC;
};
import React from 'react';
import withExample from 'components/withExample'; 
const DisplayTheExample = function (props) (  
   return <div>  The secret to life is {props.example} </div>
); 
const WrappedComponent = withExample(DisplayTheExample); 
export default WrappedComponent;

Component WrappedComponent chỉ là một version nâng cao của <DisplayTheExample /> sẽ cho phép chúng ta sử dụng example giống như prop.

Kết luận

Trên đây là một số kiến thức xoay quanh Higher Order Components, thực sự đây là một phần phức tạp tuy nhiên không thể bỏ qua sự mạnh mẽ của nó mang lại cho React Redux hay những thư viện khác nữa. Cám ơn mọi người đã theo dõi.
Have fun coding ^-^

3 Likes

Em có thể nêu ra tại sao phải sử dụng cái này được không nhỉ

3 Likes

@Leo Nó được sử dụng để chia sẻ function chung giữa các component mà không phải lặp lại phần code chung anh ạ. Ví dụ trong react-redux có một function để binding data từ redux store sang UI Component là thằng { connect }

connect(mapStateToProps, mapDispatchToProps)(TodoItem)

trong đấy mapStateToProps là state mới user, mapDispatchToProps là Action user thực hiện, TodoItem là UI Component thì thằng TodoItem sẽ thay đổi theo cái action và state mới mà user vừa dispatch.