Wantedlyさんの勉強会にお邪魔してReactとReduxの話を聞いた。ちょっとReact熱がまた出てきたのでちゃんとチュートリアルやろうと思って読んだ。
Hello World - React をやっただけです。以下メモ。
React
React基礎
- JSXの記法
class
はclassName
- ReactDOM.render(element)
- Props: Elementに対するパラメタ
- Props... PROPertieS
- Propsは pure functionじゃないといけない。
- "All React components must act like pure functions with respect to their props."
- コンポーネントをFnで表してきた。Functionからクラスへ
- State: そのコンポーネントが持つデータ
もっと知る
Eventをハンドルするには
onClick
に追加this
に注意。() => {}
使えば問題ない
Conditional Rendering
- いろいろなイディオム
{condition ? true : false}
{condition && something}
: somethingはconditionがtrueじゃないと評価されない
Key
- リストとかには各要素にuniqueなキーが必要
- あくまでもそのリスト内でuniqueであればOK
- DOMにはkey出てこないので、別途欲しければ
id
などにつけてくれとのこと Math.random()
などでkeyをつくるべきではない。安定した、ユニークで、予測可能なものに
Form
onChange
に入れておけばハンドル出来る。value
で値を入れ直さなければ「uncontrolled」な状態になる。- 初期値だけ決めたい場合は
value
に入れずにdefaultValue
かdefaultChecked
に入れておく。- もちろん"uncontrolled"な状態。
checkbox
のinputなどはevent.preventDefault()
するとチェックボックスが反映されなくなる。- いくつかのコンポーネントのpropsはユーザーの入力に影響を受ける:
value
:<input>
,<textarea>
checked
:<input type="checkbox">
,<input type="radio">
selected
:<option>
<textarea>
の子要素にデフォルトの値を書かずに、defaultValue
などを活用する
他コンポーネントとの連携
- https://facebook.github.io/react/docs/lifting-state-up.html をやる
- https://facebook.github.io/react/docs/lifting-state-up.html#lessons-learnedより…:
継承ではなく構成!
- 継承しまくってコンポーネントをつくるのではなく、パラメタを調整して 構成 で様々な表現をする。
WelcomeDialog
はDialog
の特別なケースだと考えられるので、外から渡すprops
でWelcome messageを表示したりすれば良い。props.children
には子要素のDOMがそのまま入っているのでこちらも活用できる。- 例えば一番外側のコンテナとか
props
には数字や文字列だけでなくReactの要素も渡せることを頭に入れておくと柔軟にやれる。
Reactで考える
- とりあえずモックがあるなら、コンポーネントに分割
- それを箇条書きで表現できるヒエラルキーにする
- 静的バージョンをつくる。とりあえず
props
に入れまくる。state
は使わない。各コンポーネントはrender
のみを持つ。 - 次は最小の
state
を作ることでインタラクティブにする- そのデータは
props
で親から渡ってくるもの? =>state
ではない
- そのデータは
- そのデータは変更することがない? =>
state
ではない
- そのデータは変更することがない? =>
- そのデータは他の
state
やを使って(計算したり)導けるもの? => (ry
- そのデータは他の
- どこに
state
を置くかが一番のキモで難しい所。 - 置き場を決めたら、インタラクティブに。
props
を使ってhandleするための関数の入れ物、handleする関数をつくる。setState
!!!!!
おまけ: ReactのDiffアルゴリズム
- DOM構造が異なれば破棄してすぐ作り直す
- DOM構造が同じでattributeだけ違うならそこだけ変更
- 配列に追加するような場合、
key
を手がかりにして次どうするべきかを決める
Wantedlyの人から聞いたコツ
- 一からコンポーネントにしようとしない
- とりあえず全部書いてみる。そこから切り出す
まとめ
Reactのpropsやstateについてようやく理解できたと言えるようになった。stateの位置がメチャメチャ重要。ReduxはWantedlyの勉強会で50%くらい理解できたのであとはQuick Startを読めば良さそう。
最近の気づきですが、Qiitaの記事とかを見るのはきっかけづくりになって良いのだけれど、最終的入門は公式チュートリアル読むのが良いなと思う。英語から逃げないで読んだほうが良い。優秀なエンジニアが手間暇かけて書いてるはずなので、それを読むのが一番良いなと思った。
追記
メモ
StoreはDB ActionはRequest Pathがあってそこにパラメタ DispatcherはServer アクションは1つの所にまとめておいたほうが良いので/utils/actionTypesとかに入れておくと便利 actionはユニークじゃないといけない