例えば、以下のように書いて
function Component() { return <h1>Hello</h1>; }
コンポーネントを利用したい場所で<Component>
と書いてコンポーネントとして使う方法がありますが
それとは別に、以下のように書いて
function component() { return <h1>Hello</h1>; }
この関数を呼び出したい場所で{component()}
と書いて「JavaScriptの関数を埋め込んで、その関数からJSXを返す」みたいな方法もあります。
関数コンポーネント
どちらも同じ結果になりますが、結論から言うと基本的には前者を使うべきです。
なぜなら、
- 前者の特徴:
<Component>
だと「なんらかのJSXを返すんだろうな」というのが確定している<Component>うんこ</Component>
みたいに書けば、うんこ
という文字列をComponent
にprops.children
として渡せたりもするし、他にも<MyContext.Provider>
などの便利機能がいろいろ使える- 場合によっては再レンダリングを抑えることができる。例えば「
<Component>
の中身が変わらないのであれば再レンダリングしない」みたいなことができる。
- 後者の特徴:
component()
が何をするのか予測しづらい。- もしかするとJSXを返さないかもしれない。
という理由。
基本的に、{}
を使ってJavaScript文を埋め込む場合は
{flg ?<h1>Hello!!</h1> :<h1>Good Bye!!</h1> }
のように「条件式を使うために仕方なく使う」みたいなケースでしか使用しないほうが吉。
関数
逆に、JSXを返さずに
- 単に数値を返すだけ
- 単に文字列を返すだけ
みたいな場合は後者でいいと思われます。
あと「単にコードを見やすくしたい」というだけが目的の場合、わざわざコンポーネントに分けてしまうと、いちいちprops
を渡さないといけなかったりするので、その場合も後者の方が良いと思われます。
例えば以下のようなコンポーネントがあったとして
function Company(props) { return ( <> <h1>会社概要</h1> <p>props.gaiyou</p> <h1>会社役員</h1> <p>props.yakuinn</p> <h1>事業内容</h1> <p>props.zigyounaiyou</p> </> ); }
- 会社概要
- 会社役員
- 事業内容
の3つをそれぞれ分離したいとします。(この場合は分ける意味はまったくありませんが。。)
これを後者の方法で分離する場合、以下のように書けます。
function Company(props) { function aboutCompany() { return ( <> <h1>会社概要</h1> <p>props.gaiyou</p> </> ); } function aboutCompanyOfficer() { return ( <> <h1>会社役員</h1> <p>props.yakuinn</p> </> ); } function aboutBusiness() { return ( <> <h1>事業内容</h1> <p>props.zigyounaiyou</p> </> ); } return ( <> {aboutCompany()} {aboutCompanyOfficer()} {aboutBusiness()} </> ); }
▲この形だと、「Companyコンポーネントの機能を関数に分割して整理する」みたいな意味になります。
前者の場合は、以下のように各コンポーネントにprops
をバケツリレーしないといけないので面倒です。
function Company(props) { return ( <> <AboutCompany gaiyou={props.gaiyou} /> <AboutCompanyOfficer yakuinn={props.yakuinn} /> <AboutBusiness zigyounaiyou={props.zigyounaiyou} /> </> ); } function AboutCompany(props) { return ( <> <h1>会社概要</h1> <p>props.gaiyou</p> </> ); } function AboutCompanyOfficer(props) { return ( <> <h1>会社役員</h1> <p>props.yakuinn</p> </> ); } function AboutBusiness(props) { return ( <> <h1>事業内容</h1> <p>props.zigyounaiyou</p> </> ); }
▲propsを渡すのが面倒くさい。
ちなみに前者の場合は以下のように「Componyコンポーネントの中に各コンポーネントを宣言する」みたいな形で書けば、propsを渡さなくて済みますが
function Company(props) { function AboutCompany() { return ( <> <h1>会社概要</h1> <p>props.gaiyou</p> </> ); } function AboutCompanyOfficer() { return ( <> <h1>会社役員</h1> <p>props.yakuinn</p> </> ); } function AboutBusiness() { return ( <> <h1>事業内容</h1> <p>props.zigyounaiyou</p> </> ); } return ( <> <AboutCompany /> <AboutCompanyOfficer /> <AboutBusiness /> </> ); }
▲コンポーネントの中でコンポーネントを宣言。
この形だと、Company
コンポーネントが再レンダリングされるたびにそれぞれのコンポーネントが再定義されちゃいます。
なので例えば、AboutCompany
コンポーネントの中でstate
を宣言しても、Company
コンポーネントが再レンダリングされるたびにAboutCompany
コンポーネントが初期化されちゃうので、宣言したstate
が意味をなさなくなると思われます。
おわり
コメント