Reactでよく使うHigher Order Components(HOC)とは何？使い所と使い方を徹底解説

Higher Order Componentとは何か？

Higher Order Components はComponentのラッパーみたいなもので、よくHOCと略され紹介されています。日本語に訳すると「高階コンポーネント」ですが、その名の通り高階関数を理解しているとHOCもすんなり理解できます。

どういう状況で使われてる？

Reduxを使っていればすでに使用しているconnectがHOCです！
mapStateToPropsとactionsをコンポーネントのthis.propsに渡しているやつですね。

HOCはあるコンポーネントによく使う機能を追加したい時に使います。
例えば、ユーザーがログインしている時のみコンポーネントを描画したいといった時に、いちいち実装してもいいのですが、requiredLoginみたいなHOCを作っておいて、必要があるたびにそれを付け足すといったイメージです。

pythonだとデコレータがこれに相当します。あるものを修飾して機能を付け足すといったイメージです。

HOCの作り方

1. コンポーネントでよく使いそうな部分（ロジック）を書き出してみる
2. HOCファイルを作成して、HOCの”ひな形”を作成する
3. よく使いそうな部分をHOCの中に貼り付ける
4. propsとconfigとbehaviorの全てをchild componentに渡せるようにしておく

HOCの”ひな形”

何もしないHOCのひな形です
hoc.jsという名前を付けます

import React, { Component } from 'react';

export default ChildComponent => {
  class ComposedComponent extends Component {
    render() {
      return <ChildComponent />;
    }
  }
  return ComposedComponent;
};

呼び出し方
CommentBoxというコンポーネントをhocに入れます。

import CommentBox from 'CommentBox'
import hoc from 'hoc'
hoc(<CommentBox>)

CommentBoxはChildComponentとしてhocの中に入り、ComposedComponentの中でレンダリングされます。hocはreturn ComposedComponentでComposedComponentを返し、その後、<ChildComponet />はレンダリングされます。

このケースではComposedComponentは何もしていません。