React: Higher-Order Component - Day 15

Giới thiệu

Higher-order component (HOC) là một kỹ thuật nâng cao trong React được sử dụng trong việc sử dụng lại các component. HOCs không là một phần trong React API. Một cách cụ thể, một higher-order component là một hàm và nó nhận đối số là một component và trả về một component mới.

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React's compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component.

Higher-Order Component Structure

Để định nghĩa Higher-Order Component (HOC) trong React, bạn cần qua các bước:

- Define HOC function: Hàm này nhận vào input là component (hoặc có thêm vài parameter khác) và trả về 1 component mới với thêm 1 số tinh năng mới.

const higherFunction = (WrappedComponent) => {
  // ...
}

Định nghĩa new component

const NewComponent = () => {

  return (
    <>
    </>
  );
};

export default NewComponent;

Ở câu lệnh return, pass tất cả props (bao gồm các props trong HOC)

render() {
  return <WrappedComponent props={props} />
}

HOC function sẽ trả về NewComponent, NewComponent sẽ được dùng trong application

import NewComponent from "./NewComponent";
const higherFunction = (WrappedComponent: typeof NewComponent) => {

  	return function NewComponentV2(){

        return (
            <>
                <h3>Wrapped Component</h3>
                <WrappedComponent data = {data}></WrappedComponent>
            </>
        );
    }

}

export default higherFunction;

Sử dụng ở App.tsx

const newComponent = higherFunction(WrappedComponent);
//...
<newComponent></newComponent>

Ví dụ

Ví dụ: Tạo UserProfile là component mà chúng ta muốn được extend

import React from 'react';
import UserProfile from '../models/UserProfile';

interface ChildComponentProps {
    data: UserProfile
}

const UserProfileComponent : React.FC<ChildComponentProps> = ({ data }) => {
  return (
    <div>
      <p>Username: {data.name}</p>
    </div>
  );
};

export default UserProfileComponent;

Khai báo UserProfile model

interface UserProfile {
  name: string;
  age: number;
}

export default UserProfile;

Enhance với component withUserProfileEnhancement

import UserProfileComponent from "./UserProfileComponent";

const withUserProfileEnhancement = (WrappedComponent: typeof UserProfileComponent) => {
    
    return function UserProfileWithUser(){

        const data = {
            name: 'John',
            age: 30,
          };

        return (
            <>
                <h3>withUserProfileEnhancement</h3>
                <WrappedComponent data = {data}></WrappedComponent>
            </>
        );
    }
    
};


export default withUserProfileEnhancement;

Khai báo enhanced component

import UserProfileComponent from './components/UserProfileComponent';
//...
const UserProfileWithUserEnhancement = withUserProfileEnhancement(UserProfileComponent);

Tham khảo

Understanding React higher-order components

How to Use Higher-Order Components in React