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
Matsui Masashi
June 04, 2020
Programming
2
370
React Hooks 勉強会 vol.3
社内勉強会の資料です。
https://water-cell.connpass.com/event/178300/
Matsui Masashi
June 04, 2020
Tweet
Share
More Decks by Matsui Masashi
See All by Matsui Masashi
数値の文字列をパースしよう
circled9
0
65
🔥 Hono v4 やってみた
circled9
1
97
JetBrains AI Assistant を試してみた
circled9
1
310
Fresh
circled9
0
190
JSON.stringify()
circled9
2
430
HTML
circled9
2
920
prefers-color-schemaの話
circled9
0
600
Bundle Transpile Rock'n'Roll
circled9
0
1.6k
Hello React hooks
circled9
0
710
Other Decks in Programming
See All in Programming
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
【Go言語】ジェネリクス
tomo1227
0
170
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
Advanced App Shrinking Techniques
cbeyls
2
150
유연한 Composable 설계
l2hyunwoo
0
380
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
CSC307 Lecture 12
javiergs
PRO
0
220
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
Featured
See All Featured
Bash Introduction
62gerente
607
210k
A Tale of Four Properties
chriscoyier
155
22k
Statistics for Hackers
jakevdp
792
220k
Building Your Own Lightsaber
phodgson
101
5.9k
Making Projects Easy
brettharned
111
5.7k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
How to name files
jennybc
67
96k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Fireside Chat
paigeccino
25
2.8k
Side Projects
sachag
451
42k
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