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

Transcript

1. 笠原 渉 React 初心者が初級者になるまで
2. 自己紹介 • 笠原 渉 (かさはら わたる) • 株式会社 ACCESS 所属 • React 初級者 ◦ チームスピリットさんで React 書いてます • Qiita やってます ◦ http://qiita.com/kasaharu
3. React を使うときに気にすること • props と state • Virtual DOM ◦ list 表示時の key について • フォームのイベントハンドラについて
4. props について • コンポーネントに渡す任意のプロパティ ◦ string でも number でも、さらには function や node でもよい • 金額を表示する Currency コンポーネントなるものがあるとした場合 • さらに…
5. props について • propTypes ◦ 呼び出されるコンポーネント側では親から渡される props のバリデーションが可能 • 型のチェックや必須か任意かの定義も可能 ◦ 欠点はないので積極的に使うべき
6. 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]) ▪ 数値か文字列
7. state について • コンポーネント内の状態を持つときに使用される
8. state について • checkbox の状態とかを持 つときに便利 • 状態の変更には setState() を使用する ◦ 直接の変更は NG ◦ setState() を使うことで状態 が変化し、再描画が走るた め
9. state について • コンポーネントごとに管理できる state だが ◦ 多様は厳禁 ◦ → 状態の管理が複雑になる • 出来る限り state は使わず props にする ◦ 状態の変更が必要な場合も、変更のイベントハンドラを親から受け取り、親で処理する
10. Virtual DOM • 本当の DOM と同様のツリーを JS のオブジェクトとして構築したもの ◦ JS オブジェクトなので、処理が軽いのが利点 • 画面を再描画する操作をした場合 ◦ 各種パラメータを新しい状態 (state)にして Virtual DOM を作成 ◦ 変更前の Virtual DOM と変更後の Virtual DOM を比較し diff を取る ◦ diff が出た部分だけを本物の DOM に反映 ◦ → 実装側は差分更新を気にする必要がない • 概念としては React に限った話ではない
11. list 表示時の key について • コンポーネントの繰り返しで有用
12. list 表示時の key について • コンポーネントの繰り返しで有用 ここが List 分繰り返される
13. list 表示時の key について • コンポーネントの繰り返しで有用 ◦ Virtual DOM → diff が出た部分だけ再描画するので再描画のコストが少なくてすむ ◦ しかし、先程のように同じ div を list の map で繰り返すと… ▪ 仮に list の length が 6 あり、そのうち 1 つの要素にしか変更がないとしても ▪ → 6 つのうちどこが変更されたかわからない (要素のマッピングができない ) ▪ → 差分チェックが遅くなる ◦ これを解決するために ▪ div の key 属性として unique な id を付与する
14. • コンポーネントの繰り返しで有用 list 表示時の key について key 属性に unique な id を振る
15. list 表示時の key について • key 属性の付与を徹底することで Virtual DOM の利点を活かす ◦ パフォーマンスの改善につながる
16. フォームのイベントについて • 複数のフォームと onChange イベントハンドラ
17. フォームのイベント処理について • 単純にフォームを書くと、フォームの 数だけイベントハンドラが出来てしまう ◦ 1 コンポーネント内で完結するならともかく … ◦ → props で渡し続けるのはしんどい ◦ → そこで
18. フォームのイベント処理について • イベントハンドラに追加の引数を渡す ことで回避する ◦ name 属性を使うこともあるらしい
19. ありがとうございました