其中，High-order component也是代替inheritance的一種方式。HOC為一個function，接收一個component為params，然後回傳另一個component。最常見的HOC就是react-redux的connect，此function幫助整個app可以綁定唯一的store，將邏輯與UI分離卻又很方便的建立component。
hocFactory:: W: React.Component => E: React.Component
對我來說，最大的好處就是不同的component可以使用HOC掛載相同的行為或屬性。
const Logger = (WrappedComponent) => {
return class ClickLogger extends React.Component {
handleClick => (e) {
console.log(e)
}
render() {
return (
<WrappedComponent {...this.props} onClick={this.handleClick} />
);
}
}
}上述的function可以綁定任何的component，也是為什麼composition比inheritance好的原因。不過這其實這應該回到oo design討論，若只是為了code reuse，完全不應該使用inheritance。inheritance分為implementation inheritance（實作繼承)與interface inheritance（介面繼承)，我們應該為了interface而繼承(is-a的概念)，而implementation inheritance則使用composition取代。
並且，inheritance擁有最高的耦合度，在現在流行的functional progaming完全相反，或者說，functional progaming的一部份目的本來就是為了降低耦合度。
另外一個使用情境就是對props做一些處理，例如修改或是新增props (props proxy)
const Loggin = (WrappedComponent) {
return class LogginWrap extends React.Component {
render() {
const newProps = {
user: currentLoggedInUser
}
return <WrappedComponent
{
...this.props,
organization: this.props.organization.toUpperCase(),
}
{ ...newProps }
/>
}
}
}這篇文章還有更多應用像是inheritance inversion(看了一下很有趣，debug part看起來很好用，另一個不知道使用境)，然後naming超實用!!
HOC.displayName = `HOC(${getDisplayName(WrappedComponent)})`
//or
class HOC extends ... {
static displayName = `HOC(${getDisplayName(WrappedComponent)})`
...
}Decorator與Recompose研究一下，下一篇再介紹。