半空洞男女関係

思ったこととかプログラミングしてるときのメモとか色々かいてます。メールはidそのままgmail

ReactとかReduxを勉強しなおす

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

wantedly.connpass.com

Hello World - React をやっただけです。以下メモ。

React

React基礎

  • JSXの記法
    • classclassName
  • 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 に入れずに defaultValuedefaultChecked に入れておく。
  • checkbox のinputなどは event.preventDefault() するとチェックボックスが反映されなくなる。
  • いくつかのコンポーネントのpropsはユーザーの入力に影響を受ける:
    • value: <input>, <textarea>
    • checked: <input type="checkbox">, <input type="radio">
    • selected: <option>
  • <textarea> の子要素にデフォルトの値を書かずに、defaultValue などを活用する

コンポーネントとの連携

継承ではなく構成!

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

Reactで考える

  • とりあえずモックがあるなら、コンポーネントに分割
  • それを箇条書きで表現できるヒエラルキーにする
  • 静的バージョンをつくる。とりあえず props に入れまくる。 state は使わない。各コンポーネントrender のみを持つ。
  • 次は最小の state を作ることでインタラクティブにする
      1. そのデータは props で親から渡ってくるもの? => state ではない
      1. そのデータは変更することがない? => state ではない
      1. そのデータは他の 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はユニークじゃないといけない