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
35
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
830
Classi リプレイスプロジェクト フロントエンドアーキテクチャ変遷 / Classi Angular Night #4
kasaharu
3
1.6k
Deep dive into component / classi-angular-night-number-3
kasaharu
0
2.2k
Angular Way をまっすぐ歩くために / classi-angular-night-number-2
kasaharu
1
2k
リプレイスプロジェクトで考えるフロントエンド開発 / Classi Angular Night #1
kasaharu
3
2.4k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
4 Signs Your Business is Dying
shpigford
180
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
For a Future-Friendly Web
brad_frost
175
9.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.1k
Optimizing for Happiness
mojombo
376
69k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
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 属性を使うこともあるらしい
ありがとうございました