ReactとかReduxを勉強しなおす

Wantedlyさんの勉強会にお邪魔してReactとReduxの話を聞いた。ちょっとReact熱がまた出てきたのでちゃんとチュートリアルやろうと思って読んだ。

wantedly.connpass.com

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: そのコンポーネントが持つデータ
  • Propsとの違い: そのコンポーネントがデータをコントロールするかどうか。

もっと知る

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より…:
  • 「異なるコンポーネント間でstateの同期を測るより、トップダウンのデータフローにしたほうが良い」
  • もちろん”two-way binding”なアプローチとと比べれば沢山書かなくてはならないけど、バグの切り分けが簡単。
  • propsとstate、どちらでも良さそうならpropsにする

継承ではなく構成!

• 継承しまくってコンポーネントをつくるのではなく、パラメタを調整して 構成 で様々な表現をする。
• WelcomeDialog は Dialog の特別なケースだと考えられるので、外から渡す props でWelcome messageを表示したりすれば良い。
• props.children には子要素のDOMがそのまま入っているのでこちらも活用できる。
  • 例えば一番外側のコンテナとか
• props には数字や文字列だけでなくReactの要素も渡せることを頭に入れておくと柔軟にやれる。

Reactで考える

• とりあえずモックがあるなら、コンポーネントに分割
• それを箇条書きで表現できるヒエラルキーにする
• 静的バージョンをつくる。とりあえず props に入れまくる。 state は使わない。各コンポーネントは render のみを持つ。
  • 大体トップダウン。めちゃ大きいならボトムアップ。
• 次は最小の state を作ることでインタラクティブにする
  • 1. そのデータは props で親から渡ってくるもの? => state ではない
  • 1. そのデータは変更することがない? => state ではない
  • 1. そのデータは他の state やを使って(計算したり)導けるもの? => (ry
• どこに state を置くかが一番のキモで難しい所。
  • どのコンポーネントがその state を使うかを全て挙げる。
  • 共通のコンポーネントを発見する。(大抵↑のコンポーネントの一番上に居るヤツ)
  • もし良いところが見つからなかったら、 state を持つコンポーネントを作って覆い被せよう。
• 置き場を決めたら、インタラクティブに。
  • props を使ってhandleするための関数の入れ物、handleする関数をつくる。
  • setState!!!!!

おまけ: ReactのDiffアルゴリズム

• DOM構造が異なれば破棄してすぐ作り直す
• DOM構造が同じでattributeだけ違うならそこだけ変更
• 配列に追加するような場合、keyを手がかりにして次どうするべきかを決める

Wantedlyの人から聞いたコツ

• 一からコンポーネントにしようとしない
• とりあえず全部書いてみる。そこから切り出す
  • ネストしたら切り出しタイム!
  • https://facebook.github.io/react/docs/components-and-props.html#extracting-components

まとめ

Reactのpropsやstateについてようやく理解できたと言えるようになった。stateの位置がメチャメチャ重要。ReduxはWantedlyの勉強会で50%くらい理解できたのであとはQuick Startを読めば良さそう。

最近の気づきですが、Qiitaの記事とかを見るのはきっかけづくりになって良いのだけれど、最終的入門は公式チュートリアル読むのが良いなと思う。英語から逃げないで読んだほうが良い。優秀なエンジニアが手間暇かけて書いてるはずなので、それを読むのが一番良いなと思った。

---

追記

メモ

StoreはDB
ActionはRequest
  Pathがあってそこにパラメタ
DispatcherはServer

アクションは１つの所にまとめておいたほうが良いので/utils/actionTypesとかに入れておくと便利
actionはユニークじゃないといけない