Higher Order Components Trong React Là Gì

Trong bài viết này mình sẽ cùng nhau tìm hiểu Higher Order Components trong ReactJS là gì, Higher Order Components mình sẽ viết tắt là HOCs, Khi các bạn làm việc chung với redux, rc-form trong reactJS, các bạn sẽ gặp cách viết mã như sau:

const RechargeForm = Form.create()(props => {
  const { 
    modalVisible,
    form, 
    handleModalVisible, 
    currentMember, 
    handleRecharge 
  } = props;
  return (
  	<h1>Recharg form</h1>
  )

}

hoặc

@Form.create()
const RechargeForm = (props => {
  const { 
    modalVisible,
    form, 
    handleModalVisible, 
    currentMember, 
    handleRecharge 
  } = props;
  return (
  	<h1>Recharg form</h1>
  )

}

thật ra thì 2 cách trên chỉ cho ta một kết quả, mà khi sài đến khái niệm HOCs trong reactJS ta sẽ thường gặp.
Một ví dụ khác khi sài redux, là:

import React, { Component } from 'react';
import { connect } from 'react-redux';


class Counter extends Component {
	render() {
		return <h1>Counter Component </h1>
	}
}

export default connect(mapStateToProps )(CounterCompoent)

// hoặc
@connect
class Counter extends Component {
	render() {
		return <h1>Counter Component </h1>
	}
}
export CounterComponent

đó làm 2 cách gọi HOCs trong reactJS, gọi trực tiếp hoặc sài decorator @connect

vậy HOCs là gì, và khi nào ta sài HOCs

còn tiếp