例えば Component の extra という props を固定したコンポーネントを作るときに
const HogeComponent = props => <Component {...props} extra='hoge' />
と書けますが、以下のように省略して書く方法はありますか?
const HogeComponent = Component.bind({ extra: 'hoge' })
High-Order Component(通称HoC)を利用する方法があります。書き方は独特ではありますが、デザインパターンのFactory Methodパターンとやっていることは変わりません。コンポーネントを作る関数を定義してあげればよいのです。
例えば、コメントを投稿するユーザー名を固定するコンポーネントを使いまわしたいとき、次のようのにかけます。
import React from "react";
const Comment = props => {
return (
<div>
<p className="name">
<strong>{props.name}</strong>
</p>
<p className="message">{props.message}</p>
</div>
);
};
const createComponent = init => props => <Comment {...{ ...init, ...props }} />;
export default function App() {
const HogeComponent = createComponent({ name: "hoge" }); // hogeで固定
const FugaComponent = createComponent({ name: "fuga" }); // fugaで固定
return (
<>
<HogeComponent message="hoge" />
<FugaComponent message="fuga" />
<HogeComponent message="hoge hoge" />
<FugaComponent message="fuga fuga" />
</>
);
}
1つ効果的に利用な用途としては、初期化が高コストだが、それをよく使い回す場合です。例えばブログの記事をSingle Page Applicationとして作成し、ページ遷移が発生するたびに、ページ全体を再生成するのは非効率です。そのため、記事の本文以外は初期化しておき、ページの遷移を行うときは記事の内容のみを変更するようにすれば、処理コスト的に効率的であることがわかるでしょう。