Reactの公式ドキュメント読んでみた その1 MAIN CONCEPT編
最近はReactのドキュメントに目を通している。 以前にいきなり納期がタイトなReactの案件を振られて、四苦八苦しながらコード書いて以降、Reactについてわかった気になっていたが、改めてドキュメントを読むと色々と学びがあったのでメモしておく。
ある条件下でレンダリングさせない
これは知らなかった。
returnでnullを返せばそのコンポーネントのレンダリングを阻止できるのね。
見せたくないだけなら、条件分岐の元になるフラグでdisplay: noneをスタイルに追加すればいいかなと思ってたけど、どっちがいいんだろう。
stackoverflowにこんな質問があったけど、CSSでやれば早いし、return null でやればDOMは小さくなるよ、って感じなのかな。
そもそもそんなに気にしなくてもいいのかも。
map で要素を繰り返し表示するときに key にindex を使わない
これまでは普通にkeyにindex使ってた...。
ただ、前に書いたコードを見たら並び替えはないから特に問題はなさそう。
ここで紹介されているkeyにindexを使ったサンプルを見ると確かにヤバそう。
本当は頭に行を追加したいはずなのに、末尾に追加されてしまってる。
codeburst.io
ここにはどういうものをkeyにすればいいかの指針が載っている。
フォームでは制御コンポーネント(controlled components)を使う
制御コンポーネントってのはstateでinputの値を管理するようなもので、そうしないものが非制御コンポーネント(uncontrolled components)。
refを使う場合は非制御コンポーネントになる。
僕はreactを使う案件にアサインされたはじめのほうでref使えって言われたから盲目的にそうしていたけど、
ja.reactjs.org この記事の中で
ほとんどの場合では、フォームの実装には制御されたコンポーネントを使用することをお勧めしています。
と書いているし、stateを使うほうが公式のやり方なのか。
ただ、stateでやると入力値が変わるたびにstateの更新が走ってそれはそれでめんどくさくないかと思ってたらこういう記事を見つけた。 この記事の結論はとてもわかりやすい。
goshakkk.name 次フォームを扱う時はこのやり方に倣おう。
Reactで画面を作る過程
この記事は全体的に最高。
特にコンポーネントの切り出しにUIイメージを使うとかstateの決定の仕方とかとても参考になった。
まとめ
前に少し読んでclassで書かれてるじゃん...って思ってスルーしていたが、ちゃんと読んでみたらすごいためになる内容だった。
次は ADVANCED GUIDES とか HOOKSを読んでいきたい。
