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
340
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
🔥 Hono v4 やってみた
circled9
1
48
JetBrains AI Assistant を試してみた
circled9
1
240
Fresh
circled9
0
180
JSON.stringify()
circled9
2
400
HTML
circled9
2
900
prefers-color-schemaの話
circled9
0
570
Bundle Transpile Rock'n'Roll
circled9
0
1.5k
Hello React hooks
circled9
0
690
細かくて伝わらないmacの小技選手権
circled9
0
780
Other Decks in Programming
See All in Programming
Git Rebase
bkuhlmann
11
1.6k
甘い香りに誘われてVanilla Extractを1年間運用してみた
miyahkun
1
110
StreamlitとTerraformでデータカタログを作った話
gussan0223
0
300
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
880
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
Elm Form Validation
bkuhlmann
0
500
ONE WEDGE_company_guide
1wedge_one
0
370
SpringBoot+MyBatisで例外が出たときどこを見るか
syukai
0
110
What We Can Learn From OSS
inouehi
0
400
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
220
OpenTelemetry のサービスという概念について
azukiazusa1
2
1.1k
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
460
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
59
5k
Scaling GitHub
holman
457
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Atom: Resistance is Futile
akmur
258
25k
The Mythical Team-Month
searls
215
42k
Bash Introduction
62gerente
604
210k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
The Invisible Side of Design
smashingmag
294
49k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
GitHub's CSS Performance
jonrohan
1023
450k
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