☁️

React コンポーネントのブロック{} か()で何が違うのか

2020/11/16に公開

コンポーネントの書き方

コンポーネントを作成する際、アロー関数を使った書き方で{}か()を使用しているものがあって混乱していたのですが、ようやく理解しました。🙋‍♂️
※{}は引数の括弧ではなく関数ブロックの括弧です。そもそもこの括弧て名前なんていうんやろ🤔

まずは{}を使ってアロー関数でReactのコンポーネントを書いてみます。例は単純にHello,Worldを表示するコンポーネントです。

const Component = () => {
  return <h1>Hello,World</h1>;
};

だいたいこんな感じに書くかなと思います。

このとき、実はアロー関数の{}の部分は()でも書くことができます。この場合returnは省略して書かなければいけません。returnを省略し{}を()にするとこんな感じになります。

const Component = () => <h1>Hello,World</h1>;

さらに()自体もreturnが複数行にわたるため書いてあるだけで、1行だとこの様に括弧も省略できます。

const Component = () => <h1>Hello,World</h1>;

結論から言えば()にすることによってreturnを省略してコンポーネントを作成することができます。1行なら()も入りません。その他大きな違いとしては{}の場合は中で変数定義したりなどできるが、()の場合はreturnと書かれた状態で始まるため変数定義などができないということです。
なので、{}だと

const Component = () => {
  const text = "Hello,World"; // 変数定義したり普通の関数の処理が書ける
  return <h1>{text}</h1>;
};

こんな感じでreturnまでは普通の関数の処理と変わらないので好きに定義が可能です。
一方()で書くと上のような書き方はできないので、returnで返す戻り値のみを書くことしかできません。

メリットとしては処理させないみたいな制約をつけ、ただ表示するだけの簡単なコンポーネントを作成することができるのと若干記述量が減るくらいくらいな気がする。🙄
他の良い点はわからんけど、変に処理を挟むことができないから良いのかな？知らんけど

あと普通にreturnを省略して書く場合でもpropsは取得できます。

const Component = ({ text }) => <h1>{text}</h1>;

どちらもコンポーネントを作るという点では変わりないので、コンポーネントに何か処理をさせるなら{}、テキストやボタンだけ表示するだけのコンポーネントなら()みたいな感じで使っていけば良いと思います。

// アロー関数の唯一のステートメントが return の場合、 return を削除し
// 周囲の波括弧も削除できます
elements.map(element => element.length); // [8, 6, 7, 9]

要は波括弧を省略すると暗黙的にreturnだけを定義した状態になり、複数行に渡っている場合に()が必要って感じになるのだと思います。returnを複数行やる場合は()が必要なのでその()を書いてるだけ。
ステートメントはよくわからんけど多分こういうこといってるんやと思う。知らんけど🤪