TL;DR
高階コンポーネント（Higher-Order Component、HOC）を使って、React のコンポーネントのロジックを再利用するパターン。HOC はコンポーネントを受け取って新しいコンポーネントを返す関数である。
なぜ必要か
複数のコンポーネントが同じロジックを持つことがある。公式ドキュメントの例では、コメント一覧とブログ記事のコンポーネントが、どちらもデータソースを購読し、リスナーを登録・解除し、変更があれば state を更新している。HOC を使うと、このロジックを 1 か所で定義し、多くのコンポーネントで共有できる。
仕組み
HOC は React の API の一部ではなく、React のコンポーネントを組み合わせる性質から生まれたパターンである。コンポーネントが Props を UI に変換するのに対し、HOC はあるコンポーネントを別のコンポーネントに変換する。HOC は元のコンポーネントを書き換えず、コンテナで包んで組み合わせる。高階関数と同じ考え方である。
function withSubscription(WrappedComponent, selectData) {
return function WithSubscription(props) {
// データソースの購読などの共通ロジック
return <WrappedComponent data={selectData(props)} {...props} />
}
}注意点
- コンポーネントの render の中で HOC を適用しない。render のたびに新しいコンポーネントの型が作られ、React はその部分木をアンマウントして作り直してしまう。HOC はコンポーネントの定義の外で適用する。
- 元のコンポーネントの static メソッドは、HOC が返すコンポーネントにコピーされない。
refは Props として渡らない。HOC で包んだコンポーネントに付けたrefは、一番外側のコンテナを指す。- 公式ドキュメントでは、HOC は今の React のコードではあまり使われないとしている。