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 Hooks 勉強会 vol.3
Search
circled9
June 04, 2020
Programming
2
420
React Hooks 勉強会 vol.3
社内勉強会の資料です。
https://water-cell.connpass.com/event/178300/
circled9
June 04, 2020
Tweet
Share
More Decks by circled9
See All by circled9
キースイッチ入門
circled9
0
57
CloudflareのAI関連の機能さわってみた
circled9
0
470
0.0.0.0 day
circled9
0
83
小数の丸め誤差の話
circled9
0
120
数値の文字列をパースしよう
circled9
0
180
🔥 Hono v4 やってみた
circled9
1
170
JetBrains AI Assistant を試してみた
circled9
1
460
Fresh
circled9
0
230
JSON.stringify()
circled9
2
480
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
700
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
350
ML.NETで始める機械学習
ymd65536
0
250
自力でTTSモデルを作った話
zgock999
0
120
Jakarta EE meets AI
ivargrimstad
0
680
オレを救った Cline を紹介する
codehex
15
14k
JAWS Days 2025のインフラ
komakichi
1
350
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
250
AIレビュー導入によるCIツールとの共存と最適化
kamo26sima
1
890
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
250
CloudRun, Spanner に対する負荷試験の反省と オブザーバビリティによるアプローチ
oyasumipants
1
180
AWS Step Functions は CDK で書こう!
konokenj
5
910
Featured
See All Featured
Building Adaptive Systems
keathley
40
2.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
660
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Docker and Python
trallard
44
3.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Side Projects
sachag
452
42k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Transcript
@circled9, 2020-06-04 React Hooks ษڧձ #3 WaterCell Inc. 1
ࣗݾհ দҪ ਖ਼ࢤ ( Matsui Masashi ) ϑϩϯτΤϯυΤϯδχΞ circled9 useStateࡉ͔͚͘Δ
2
Agenda • useRef • useImperativeHandle • useLayoutEffect • useDebugValue 3
αϯϓϧʹ͍ͭͯ • εϥΠυͷ࠷ޙʹGithubͱJSFiddleͷϦϯΫ͕͋Γ·͢ 4
useRef 5
Ref 6
Ref • propsͷมߋҎ֎ͰࢠཁૉΛมߋ͢ΔͨΊͷආϋον • એݴతʹߦ͑ͳ͍ͷʹରͯ͠͏ • ReactίϯϙʔωϯτͷΠϯελϯεDOMཁૉͷࢀরΛ࣋ͭ 7
Ref • String Ref • Callback Ref • React.createRef() •
useRef 8
String Ref • refଐੑʹจࣈྻΛઃఆ͢Δ • this.refs.foo ͰཁૉʹΞΫηε͢Δ • ϨΨγʔͳAPIͳͷͰ͍͔ͭআ͞ΕΔ͔ 9
Callback Ref • refଐੑʹؔΛॻ͍ͯɺthis.fooͳͲʹཁૉΛઃఆ͢Δ 10
React.createRef() • 16.3͔Β͑Δػೳ • createRef()ͰrefΦϒδΣΫτΛ࡞͢Δ • refଐੑͰrefΦϒδΣΫτΛࢦఆ͢Δ • ཁૉͷΞΫηεfoo.currentͰߦ͏ 11
useRef 12
useRef • .currentϓϩύςΟΛ࣋ͭrefΦϒδΣΫτΛฦ͢ • refͷத͕มΘͬͯ࠶Ϩϯμʔൃੜ͠ͳ͍ • ReactίϯϙʔωϯτͷΠϯελϯεDOMཁૉҎ֎ʹରͯ͑͠Δ • ؔίϯϙʔωϯτͷதͰ͑Δ 13
useImperativeHandle 14
forwardRef 15
forwardRef • ࢠίϯϙʔωϯτʹrefΛͭ͢ • ࠶ར༻ੑͷߴ͍ίϯϙʔωϯτͩͱ͍Ͳ͜Ζ͕͋Δ͔ 16
useImperativeHandle 17
useImperativeHandle • forwardRefͱΈ߹Θͤͯ͏ • ֎͔Βதͷrefʹରͯ͠ͷ࣮ΛݺͤΔ 18
useLayoutEffect 19
useLayoutEffect • useEffectʹΑ͘ࣅͯΔͭ • ඳը͞ΕΔલͷλΠϛϯάͰಉظతʹॲཧ͞ΕΔ • useEffectඇಉظͰॲཧ͞ΕΔ • ը໘ͷߋ৽͕ϒϩοΫ͞ΕΔͷͰجຊuseEffectΛ͏͖ 20
useDebugValue 21
useDebugValue • ΧελϜϑοΫΛσόοά͢Δ࣌ʹศརͳϑοΫ • ҾͰͨ͠ΛReact DevTools্Ͱ֬ೝͰ͖Δ • ୈ2Ҿʹදࣔ༻ͷؔΛͤΔ • ϑΥʔϚοτͷॲཧίετ͕ߴ͍߹ʹ͏
22
Examples 23
Github • react-hooks-example • https://github.com/circled9/react-hooks-example 24
JSFiddle • String Ref • https://jsfiddle.net/circled9/gx7ak3cu/ • Callback Ref •
https://jsfiddle.net/circled9/m8xk5sr0/ • createRef • https://jsfiddle.net/circled9/fvgre0su/ 25
JSFiddle • useRef • https://jsfiddle.net/circled9/1m8j2Lvd/ • useRef (vs state) •
https://jsfiddle.net/circled9/dqxj2vsb/ • useImperativeHandle • https://jsfiddle.net/circled9/vxtja8m5/ 26