Higher-order Component Basic(HOC)

什麼是 Higher-Order Component 呢?在我經驗我覺得他是一個「賦予」做作用的高階元件,他本身是一個 Function,只要將我們需要「賦予」任何無論 event, props 或甚至很好拿來做元件的重複開發,講白點是可以拿來 hack 元件,很好達到設計 module 的時候,可以讓外部傳入簡單的基本元件,內部在自行替他加上 Higher-Order Component 來「賦予」作用。

範例 Higher-order Component:

import React, { Component } from ‘react’;
const HOC = BasicComponent => {
class extends Component {
constructor() {
this._onClick = () => {
console.log('HOC Click !');
}
}
render() {
return (
<BasicComponent selected={this.state.selected} onClick={this._onClick} />
)
}
}
}
export default HOC;

如何使用:

import React,  { Component } from 'react;
import HOC from './hoc';
class BasicComponent extends Component {
render() {
<button>Click Me!<button />
}
}
export default HOC(BasicComponent);

結果:

import React,  { Component } from 'react;
import { render } from 'react-dom';
import BasicComponent from './basic-component';
const app = (
return <BasicComponent />;
)
render(app, document.getElementById('app'));

大致上主程式 App Component 上應該就會有一顆按鈕然後有點擊事件功能了,在做很多 opensource 時為了方便性都會開發 HOC 來使用。