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
75
CloudflareのAI関連の機能さわってみた
circled9
0
630
0.0.0.0 day
circled9
0
110
小数の丸め誤差の話
circled9
0
140
数値の文字列をパースしよう
circled9
0
230
🔥 Hono v4 やってみた
circled9
1
190
JetBrains AI Assistant を試してみた
circled9
1
530
Fresh
circled9
0
250
JSON.stringify()
circled9
2
490
Other Decks in Programming
See All in Programming
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
Go製CLIツールをnpmで配布するには
syumai
0
580
NEWT Backend Evolution
xpromx
1
150
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
270
slogパッケージの深掘り
integral0515
0
150
AIともっと楽するE2Eテスト
myohei
9
3.1k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
型で語るカタ
irof
1
840
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
460
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
170
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
330
AIのメモリー
watany
11
1k
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
The Language of Interfaces
destraynor
158
25k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Music & Morning Musume
bryan
46
6.7k
Agile that works and the tools we love
rasmusluckow
329
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Git: the NoSQL Database
bkeepers
PRO
431
65k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Writing Fast Ruby
sferik
628
62k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
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