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
440
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
74
CloudflareのAI関連の機能さわってみた
circled9
0
600
0.0.0.0 day
circled9
0
100
小数の丸め誤差の話
circled9
0
140
数値の文字列をパースしよう
circled9
0
220
🔥 Hono v4 やってみた
circled9
1
190
JetBrains AI Assistant を試してみた
circled9
1
520
Fresh
circled9
0
240
JSON.stringify()
circled9
2
490
Other Decks in Programming
See All in Programming
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
Team operations that are not burdened by SRE
kazatohiei
1
210
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
370
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
570
Deep Dive into ~/.claude/projects
hiragram
8
1.5k
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
890
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
250
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
160
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Invisible Side of Design
smashingmag
299
51k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
GitHub's CSS Performance
jonrohan
1031
460k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Practical Orchestrator
shlominoach
188
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Being A Developer After 40
akosma
90
590k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
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