HOCs

Higher Order Components là một kỹ thuật nâng cao trong React được dùng để tái sử dụng các logic trong component

import React,{ Component } from "react";  

export default class ButtonComponent extends Component{
  constructor(props){
    super(props);
    this.state = {
      count : 0,
    }
  }
  increment_ = () => {
    this.setState({count : this.state.count + 1});
  }
  render(){
    return(
      <div>
        <button
          onClick = {this.increment_}
        >
          Button 
          Increment: {this.state.count} 
        </button>
      </div>
    )
  }
}

import React, { Component } from "react";

export default class HoverComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  increment_ = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    return (
      <div>
        <h2 onMouseOver={this.increment_}
        style={{position : "absolute"}}
        >
          {" "}
          Hover Increment: {this.state.count}
        </h2>
      </div>
    );
  }
}

import React from "react";
import "./styles.css";
import ButtonComponent from "./ButtonComponent";
import HoverComponent from "./HoverComponent";
export default class App extends React.Component {
  render() {
    return (
      <div>
        <ButtonComponent />
        <HoverComponent />
      </div>
    );
  }
}

Kết quả

Ta nhận thấy khi sử dụng sự kiện onClick hay sự kiện onMouseOver đều thực hiện một logic tăng giá trị lên 1 nhưng như vậy sẽ bị lặp lại logic, do đó HOCs ra đời để giải quyết vấn đề này

Bây giờ chúng ta sẽ tạo ra một HOCs có tên là WrapperComponent với mục đích thực hiện logic tăng giá trị lên 1

import React from "react";
import "./styles.css";

const WrapperComponent = OriginalComponent => {
  class WrapperComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0
      };
    }
    increment_ = () => {
      this.setState({ count: this.state.count + 1 });
    };
    render() {
      return (
        <OriginalComponent
          increment={this.increment_}
          count={this.state.count}
        />
      );
    }
  }
  return WrapperComponent;
};
export default WrapperComponent;

Đây là một HOCs

Áp dụng vào ButtonComponent ta có

import React,{ Component } from "react";  
import  WrapperComponent from "./WrapperComponent";
class ButtonComponent extends Component{
 
  render(){
    return(
      <div>
        <button
          onClick = {this.props.increment}
        >
          {this.props.name}{" "}
          Button 
          Increment: {this.props.count}
        </button>
      </div>
    )
  }
}
export default WrapperComponent(ButtonComponent);

Để sử dụng các logic và value của HOCs ta dùng props

Tiếp tục áp dụng với HoverComponent

import React, { Component } from "react";
import WrapperComponent from "./WrapperComponent";
class HoverComponent extends Component {
  render() {
    return (
      <div>
        <h2 onMouseOver={this.props.increment} style={{ position: "absolute" }}>
          {" "}
          Hover Increment: {this.props.count}
        </h2>
      </div>
    );
  }
}
export default WrapperComponent(HoverComponent);

Mặc dù kết quả không thay đổi nhưng ta đã tái sử dụng được logic tăng giá trị lên 1 trên các component khác nhau

Tiếp đến ta sẽ truyền props có tên là name như đoạn code dưới

import React from "react";
import "./styles.css";
import ButtonComponent from "./ButtonComponent";
import HoverComponent from "./HoverComponent";
export default class App extends React.Component {
  render() {
    return (
      <div>
        <ButtonComponent name='PexpA' />
        <HoverComponent />
      </div>
    );
  }
}

nhưng kết quả

Không đúng với logic ta biết về cách sử dụng props chúng ta mong muốn kết quả trả về sẽ là

Lý do ở đây là ta đã có 1 HOCs bọc bên ngoài ButtonComponent mà HOCs chỉ có 2 props duy nhất là count và increment để sử dụng props từ ButtonComponent ta sẽ phải sửa lại WrapperComponent

import React from "react";
import "./styles.css";

const WrapperComponent = OriginalComponent => {
  class WrapperComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0
      };
    }
    increment_ = () => {
      this.setState({ count: this.state.count + 1 });
    };
    render() {
      return (
        <OriginalComponent
          increment={this.increment_}
          count={this.state.count}
          {...this.props}
        />
      );
    }
  }
  return WrapperComponent;
};
export default WrapperComponent;

Sử dụng spread syntax để duyệt toàn bộ các props của ButtonComponent

Ta có thể hiểu khi sử dụng HOCs nó sẽ thêm một số logic hoặc value vào component mà nó bọc bên ngoài

Khi WrapperComponent bọc ButtonComponent thì OriginalComponent tương đương với ButtonComponent

Lúc này ButtonComponent được bọc bởi WrapperComponent , chỉ có 2 props đó là increment và count khi chưa có {...this.props}

mặc dù bản thân ButtonComponent còn có 1 props nữa là name nhưng vẫn sẽ không hoạt động vì ButtonComponent mà ta đang sử dụng đã được bọc bởi một HOCs để sử dụng nó ta sẽ phải thêm {...this.props} với mục đích duyệt toàn bộ props từ OriginalComponent hay ButtonComponent chưa bọc bởi HOCs trong ví dụ