Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React 初心者が初級者になるまで / react-sakana

Wataru KASAHARA
December 19, 2016
35

React 初心者が初級者になるまで / react-sakana

Wataru KASAHARA

December 19, 2016
Tweet

Transcript

  1. 自己紹介 • 笠原 渉 (かさはら わたる) • 株式会社 ACCESS 所属

    • React 初級者 ◦ チームスピリットさんで React 書いてます • Qiita やってます ◦ http://qiita.com/kasaharu
  2. React を使うときに気にすること • props と state • Virtual DOM ◦

    list 表示時の key について • フォームのイベントハンドラについて
  3. props について • コンポーネントに渡す任意のプロパティ ◦ string でも number でも、さらには function

    や node でもよい • 金額を表示する Currency コンポーネントなるものがあるとした場合 • さらに…
  4. props について • 指定可能な PropTypes の例 ◦ React.PropTypes.number / string

    ▪ 数値 / 文字列 ◦ React.PropTypes.array / object ▪ 配列 / オブジェクト ◦ React.PropTypes.func ▪ 関数 ◦ React.PropTypes.arrayOf(React.PropTypes.string) ▪ 文字列型の配列 ◦ React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]) ▪ 数値か文字列
  5. state について • checkbox の状態とかを持 つときに便利 • 状態の変更には setState() を使用する

    ◦ 直接の変更は NG ◦ setState() を使うことで状態 が変化し、再描画が走るた め
  6. state について • コンポーネントごとに管理できる state だが ◦ 多様は厳禁 ◦ →

    状態の管理が複雑になる • 出来る限り state は使わず props にする ◦ 状態の変更が必要な場合も、変更のイベントハンドラを親から受け取り、親で処理する
  7. Virtual DOM • 本当の DOM と同様のツリーを JS のオブジェクトとして構築したもの ◦ JS

    オブジェクトなので、処理が軽いのが利点 • 画面を再描画する操作をした場合 ◦ 各種パラメータを新しい状態 (state)にして Virtual DOM を作成 ◦ 変更前の Virtual DOM と変更後の Virtual DOM を比較し diff を取る ◦ diff が出た部分だけを本物の DOM に反映 ◦ → 実装側は差分更新を気にする必要がない • 概念としては React に限った話ではない
  8. list 表示時の key について • コンポーネントの繰り返しで有用 ◦ Virtual DOM →

    diff が出た部分だけ再描画するので再描画のコストが少なくてすむ ◦ しかし、先程のように同じ div を list の map で繰り返すと… ▪ 仮に list の length が 6 あり、そのうち 1 つの要素にしか変更がないとしても ▪ → 6 つのうちどこが変更されたかわからない (要素のマッピングができない ) ▪ → 差分チェックが遅くなる ◦ これを解決するために ▪ div の key 属性として unique な id を付与する