[React] 何謂 higher-order-component ？
Higher-Order Component
Higher Order Component 這個詞是延伸自 Higher Order Function。
維基百科的定義如下：
A higher-order function is a function that does at least one of the following:
- Takes one or more functions as arguments
- Returns a function as its result
所以 HOC 對應就應該也是一個 function：
- Takes one or more components as arguments
- Returns a component as its result
吃 一個以上 component 進去，如此如此這般這般後，再吐出一個 component。
如果以 React 來實作的話，大概會長這樣：
const hoc1 = (Component) => class extends React.Component {
constructor(props) {
super(props);
}
// do whatever you may want
render() {
// pass new properties to wrapped component
return <Component {...this.props} {...this.state} />
}
};
也就是將某個 component 餵進去，把props 或 state 處理處理，然後 render 出來，有點 middleware 的味道。可以用來實作一些固定需要完成的事。
當然 HOC 最好是能遵循 functional programming 的原則，設計成 pure 而沒有其他副作用。
Recompose 則是一個 React 的functional programming 工具專門來做這類的事，提供了一些常用的 HOC ，並且提供像是 compose 這樣的工具，讓使用者可以一次套用多個 HOC 。像這樣：
const composedHoc = compose(hoc1, hoc2, hoc3)
// Same as
const composedHoc = BaseComponent => hoc1(hoc2(hoc3(BaseComponent)))