React アロー関数の書き方

アロー関数の書き方

Reactの本だったら動画を見る時に、アロー関数で、ソースを読み進める事が苦労したので、まとめ。 アロー関数は、実はReactは関係なくJavascriptの記法らしいです。

ただ、Reactでやたら出てくるので、覚えて置くと便利

通常の書き方と、アロー関数

## 通常
function MyFunction(){
  console.log("hello")
}

## アロー関数

const MyFunction = () => {
  console.log("hello")
}

アロー関数の省略基本

## 引数が一つの場合

# ()を外す事ができる
const MyFunction = props => {
  console.log("hello");
};

※引数が2つ以上の場合は、()は必須

## 返す値が1ラインの場合

const MyFunction = props => ( 1 * 1 );

{} と ()の違い

最初はこの違いがよくわかりませんでした。 {}で書く場合は、中でreturnが必要です。

# これはNGパターン
const MyFunction = props => { 
  1 * 1 
};

# これはOKパターン

const MyFunction = props => { 
  return (1 * 1 );
};

{} と ()の使い分け

自分的には、出力する前にデータを操作したい場合に、{}を使うイメージです。

# propsに lists = [1,2,3,4,5,6 ]の配列を渡したします。
# 偶数のものだけを出力したい場合

const MyFunction = props => {
  # 偶数だけをとってくる。
  const evens = props.fliter((li) li % 2 == 0)
 
  return (evens );
};

# ()の中には、出力したいモノだけしかかけないので、前処理は{}の中で行う

まとめ

Reactがある程度わかってから、分かった事は、Reactを使うにあたり、Jsの文法の割合が8割以上だという事。

Reactがわからないというのは、Jsがわからないケースが多い。

参考

Jsの基本はこちらで無料で学べるので、やって見るのは良いのかもしれません

jsprimer.net