笠原 渉 React 初心者が初級者になるまで

自己紹介 ● 笠原 渉 (かさはら わたる) ● 株式会社 ACCESS 所属 ● React 初級者 ○ チームスピリットさんで React 書いてます ● Qiita やってます ○ http://qiita.com/kasaharu

React を使うときに気にすること ● props と state ● Virtual DOM ○ list 表示時の key について ● フォームのイベントハンドラについて

props について ● コンポーネントに渡す任意のプロパティ ○ string でも number でも、さらには function や node でもよい ● 金額を表示する Currency コンポーネントなるものがあるとした場合 ● さらに…

props について ● propTypes ○ 呼び出されるコンポーネント側では親から渡される props のバリデーションが可能 ● 型のチェックや必須か任意かの定義も可能 ○ 欠点はないので積極的に使うべき

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]) ■ 数値か文字列

state について ● コンポーネント内の状態を持つときに使用される

state について ● checkbox の状態とかを持 つときに便利 ● 状態の変更には setState() を使用する ○ 直接の変更は NG ○ setState() を使うことで状態 が変化し、再描画が走るた め

state について ● コンポーネントごとに管理できる state だが ○ 多様は厳禁 ○ → 状態の管理が複雑になる ● 出来る限り state は使わず props にする ○ 状態の変更が必要な場合も、変更のイベントハンドラを親から受け取り、親で処理する

Virtual DOM ● 本当の DOM と同様のツリーを JS のオブジェクトとして構築したもの ○ JS オブジェクトなので、処理が軽いのが利点 ● 画面を再描画する操作をした場合 ○ 各種パラメータを新しい状態 (state)にして Virtual DOM を作成 ○ 変更前の Virtual DOM と変更後の Virtual DOM を比較し diff を取る ○ diff が出た部分だけを本物の DOM に反映 ○ → 実装側は差分更新を気にする必要がない ● 概念としては React に限った話ではない

list 表示時の key について ● コンポーネントの繰り返しで有用

list 表示時の key について ● コンポーネントの繰り返しで有用 ここが List 分繰り返される

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

● コンポーネントの繰り返しで有用 list 表示時の key について key 属性に unique な id を振る

list 表示時の key について ● key 属性の付与を徹底することで Virtual DOM の利点を活かす ○ パフォーマンスの改善につながる

フォームのイベントについて ● 複数のフォームと onChange イベントハンドラ

フォームのイベント処理について ● 単純にフォームを書くと、フォームの 数だけイベントハンドラが出来てしまう ○ 1 コンポーネント内で完結するならともかく … ○ → props で渡し続けるのはしんどい ○ → そこで

フォームのイベント処理について ● イベントハンドラに追加の引数を渡す ことで回避する ○ name 属性を使うこともあるらしい

ありがとうございました