Reactのコンポーネントに関する覚書

JSX記法はReact.createElementの糖衣構文という文脈で色々と実験してみた結果

JSXのタグ名は変数名でも可

ユーザー定義のタグ(大文字から始まるもの)は参照できる範囲の識別子なら可能なので、適当な変数に代入してその変数名を使っても良い。
(React.createElementの第一引数に過ぎないので)
ただ、先頭を大文字にしないと独自コンポーネントと認識してくれないのでそこだけは守る必要あり

表示するコンポーネントの動的切替なんかもタグと{}の中から追い出すことも出来る

const Hoge = FugaComponent;

//render内
<Hoge/> //FugaComponentが出力される

const Hoge = someCondition ? FugaComponent : PiyoComponent;

<Hoge/> //someConditionに応じてどちらが表示されるか決まる

JSX記法とReact.createElementは混ぜても使える

以下のような感じ

render () {
 <React.Fragment>
   {React.createElement('div',{},'hoge')}
 </React.Fragment>
}
//<div>hoge</div>になる

JSXのタグで挟まれた要素は、React.createElementの第3引数(children)に渡される
JSX要素とReact.createElementの戻り値は内部的に同じになるなのでこれでもOK。

実務での使いどころはあるのかというと多分ないけれど。

ただ、JSXのタグの子要素はあくまで第3引数渡される値ということを認識しておくと、
軽く条件分岐する時にifではなく三項演算子を使う理由や、
ループを回す際にmapを使う理由辺りにも納得がいきやすい。
無名関数の実行とreturnし忘れ等も減るのではないかと。

まとめ

• タグ名はあくまで第一引数
• タグの子要素は第三引数に渡す値　=> よって{}内は式でないといけない
• 内部的にJSXタグとReact.createElementは等価なので混ぜても使える