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
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Adaptive Systems
keathley
43
2.7k
How GitHub (no longer) Works
holman
314
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Embracing the Ebb and Flow
colly
86
4.8k
It's Worth the Effort
3n
185
28k
Agile that works and the tools we love
rasmusluckow
329
21k
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 属性を使うこともあるらしい
ありがとうございました