reactをまだマスターしていなかった件

「え？こんな書き方あるのか、知らなかったわ〜」と思ったのでメモる笑

まあまずはこれですな・・・

配列のループ処理！意識していなかったわけではないんですけどね、、反省。。

連想配列(object)だと使えないんですけどね、ただ指定のarrayを回すときに使う


[1, 2, 3].forEach( (element, index, array) => {
  console.log(index + ":" + element);
});

indexとarrayは省略可能ですー！

新しい配列を作成したいときに使う感じですな


const elementSquareArray = [1, 2, 3].map( (element, index, array) => {
  return element * element;
});

こちらもindexとarrayは省略可能でっす！returnで返してあげましょ！

条件にあうものだけを抽出したいときに使います


const evenNumberArray = [1, 2, 3].filter( (element, index, array) => {
  return (element % 2 === 0);
});

処理をして1つの値を取得。
previousValueは前の値というより、それまでの結果と考えるとわかりやすいかもです


const total = [1,2,3].reduce( (previousValue, currentValue, index, array) => {
  return previousValue+currentValue; 
}); 


### total=6になる

これ使ったことないですけど・・・

everyは条件を全ての値が満たすか、someは条件を満たすものがあるかの判定。
結果はbooleanで返ってくるらしいです


const everyEvenFlag = [2, 4, 6].every( (element, index, array) => {
  return (element % 2 === 0);
});


const someEvenFlag = [1, 2, 3].some( (element, index, array) => {
  return (element % 2 === 0);
});

なにを返すのか問題ですね、返す型はそろえましょ！

はい、すみません。僕は適当にやってました・・・

何も描画したくないときにnullまたはfalseを返すことでそれを実現することができます。実際には裏で<noscript>タグを描画します。なんでそういうときは

return <noscript/>

とするとよいかもですね

jsx内のrender部分でif文書くとき即時間数を使って書くことが多いと思いますが、いかんせん括弧が多くて見にくくなってしまいます。


{(() => {
  if (this.props.count >= 3) {
  return  (componentとかviewを返す);
  }
})()}

こんなときに使える書き方があります、それがrenderのときの理論です。falseやnullのときはなにも表示されないのでそれを使うと以下になります。


{(this.props.count >= 3) && (
  return (
    componentとかviewを返す
  )
)}

見やすい！！

わかると思いますが、最初のif文でtrueのときの処理しか使えません。なので最初からif~elseで分けるものに対しては即時間数で書くしかありません。

react使って3ヶ月くらいですが、まだまだ知らないことがありそうなので詰めていきたいものです。

終わり。

katsuyukikun’s diary