Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React 初心者が初級者になるまで / react-sakana
Search
Wataru KASAHARA
December 19, 2016
0
39
React 初心者が初級者になるまで / react-sakana
Wataru KASAHARA
December 19, 2016
Tweet
Share
More Decks by Wataru KASAHARA
See All by Wataru KASAHARA
NgRx component と component-store について / mini-ng-japan-2020
kasaharu
0
890
Classi リプレイスプロジェクト フロントエンドアーキテクチャ変遷 / Classi Angular Night #4
kasaharu
3
1.8k
Deep dive into component / classi-angular-night-number-3
kasaharu
0
2.4k
Angular Way をまっすぐ歩くために / classi-angular-night-number-2
kasaharu
1
2.2k
リプレイスプロジェクトで考えるフロントエンド開発 / Classi Angular Night #1
kasaharu
3
2.6k
Featured
See All Featured
Bash Introduction
62gerente
613
210k
A Tale of Four Properties
chriscoyier
160
23k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
A designer walks into a library…
pauljervisheath
207
24k
The Invisible Side of Design
smashingmag
301
51k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Facilitating Awesome Meetings
lara
54
6.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
笠原 渉 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 属性を使うこともあるらしい
ありがとうございました