はじめに
javascriptはコーディングをするたびにその記法に驚かせられます。
でも覚えると便利なんですよね…笑
今回は『論理 && 演算子』や三項演算子による条件分岐の特殊記法について話していきます。
論理 && 演算子編
ソースコードはこちら
See the Pen React_&&_performance by atsushiIMG (@atsushiimg) on CodePen.
動作の解説
ボタンが押されるたびにclickHandlerメソッドが呼び出され、isExistの値を現在持っているブーリアン値の逆にしてくれます。
それをみたDOMが現在のコンポーネントを再レンダーし、その時にisExistの値によってh1タグを描画するかどうか決めます。
- Trueなら→h1を出現させる
- Falseなら→h1は出現させない
今回は簡単な例での実装にはなりますが、実践的にはModalの出現だったり、配列のレンダー(map使うヤツ)などで使われます。
三項演算子編
ソースコードはこちら
See the Pen React_3condition_performance by atsushiIMG (@atsushiimg) on CodePen.
動作の解説
例によって三項演算子による実装です。
動き自体は上と変わりません。
上では既存タグをレンダーしていましたが、自作コンポーネントをレンダーすることも可能です。
参考サイト↓
おわり
コメント