Higher-order Components

ReduxなどReact関連のライブラリで時々出てくるHigher-order Componentsについて色々わかんなくなったので調べたことをメモ程度に留めてまとめる

通称 HoCとかHoCsとか略されるが、この記事では Higher-order Components、HoCsで統一しておく。

Higher-order Components(HoCs)とは？

語の元となったのは高階関数(Higher-order function)であると思われる。

高階関数は、「関数を引数にとり、関数を戻り値とする」ような関数の事。

HoCsも同様で、「Componentを引数にとり、Componentを戻り値とする」ような関数（または実装パターン）の事 ¹

この記事が良く出される

ざっくり要約すると

ちょっと忘れているのでおさらい。

ReactのcreateClassで利用できる、いわゆるMixin。
継承をせずに、Componentに同一の挙動を与えるものだった。

https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775
HoCsの初出（らしい）こちらのGistがわかりやすい。

噛み砕いてコードリーディングしてみる

登場するのはこの２つ
- Enhancer = コンポーネントを受け取ってコンポーネントを返す関数。HoCs
- MyComponent = 例として適応される側のコード
Enhancerを見てみる
- Enhancer = (ComposedComponent) => class extends Component...という部分がかなり特殊に見える。
- 「ワンライナーでやってるけどこういうことだよ」と展開後のコメントで書かれている
- やっていることは「ComposedComponent」という元のComponentを受けて、匿名のクラス（class extends Component）を返している
- この時に、componentDidMountだったり、stateの利用だったりをして、mixinがやっていたようなことをやっている
export default Enhance(MyComponent)で、HoCs適応済みのComponentを返している。

ということで、やっていること自体はとても簡素。好みによってはprops.childrenでも代用出来るかもしれない（多分コードの簡素さと、DOMが深くならないとかの理由でclassでwrapしてる方を採用しているんだと思う）。

HoCsは、Reduxやらreact-routerやら有名ライブラリで使われている。以下見つけられた例。

react-redux#connent
- 例：connect(null, actionCreators)(TodoApp)　というHoCsを提供している
react-router#withRouter
- withRouterという関数が、HoCs。
react-i18next#translate
- i18nをするライブラリ。translateをHoCsとして提供している
baobab-react#higher-order-components
- 名前まま。
- Qiitaにもこれを利用した実例の記事があったbaobab-reactを使って軽量fluxを回す