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.7k
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
GraphQLとの向き合い方2022年版
quramy
43
13k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Adopting Sorbet at Scale
ufuk
73
9.1k
KATA
mclloyd
29
14k
Why Our Code Smells
bkeepers
PRO
334
57k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
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 属性を使うこともあるらしい
ありがとうございました