Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
useRefについて調べてみた
Kazuki Shibata
September 04, 2019
Technology
1
92
useRefについて調べてみた
2019.09.04 React LT会の発表資料です。
https://informetis.connpass.com/event/142183/
Kazuki Shibata
September 04, 2019
Tweet
Share
More Decks by Kazuki Shibata
See All by Kazuki Shibata
microCMSでif文を作る
shibe97
1
450
SvelteKitでJamstackを試す
shibe97
1
530
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.3k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
800
CSR / SSR / SSGの動向2020
shibe97
2
990
Jamstack×microCMS 実装編
shibe97
4
460
SentryでSPAのエラーログを収集する
shibe97
1
770
フロントエンドエンジニアのキャリアパス
shibe97
9
3.1k
Containerどこに置く?
shibe97
1
1.6k
Other Decks in Technology
See All in Technology
スタートアップと技術選定と AWS
track3jyo
PRO
2
330
複数のスクラムチームをサポートするエンジニアリングマネジメントの話
okeicalm
0
1.1k
サイボウズの アジャイル・クオリティ / Agile Quality at Cybozu
cybozuinsideout
PRO
4
2.2k
マネージャーからみたスクラムと自己管理化
shibe23
0
1k
スクラムのスケールとチームトポロジー / Scaled Scrum and Team Topologies
daiksy
1
430
Modern Android dependency injection
hugovisser
1
130
雑な攻撃からELBを守る一工夫 +おまけ / Know-how to protect servers from miscellaneous attacks
hiroga
0
490
MRTK3 - DataBinding and Theming 入門
futo23
0
180
組織の崩壊と再生、その中で何を考え、感じたのか。 そして本当に必要だったもの
kosako
10
4k
Retca Cloud
bau
0
470
Custom GitHub Actions by Java
kazamori
0
280
JFrog 最新情報 - JFrog DevOps プラットフォームの今までとこれから / jfrog-update-for-devopskaigi-2022
tsuyo
0
150
Featured
See All Featured
Designing with Data
zakiwarfel
91
3.9k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
A designer walks into a library…
pauljervisheath
196
16k
Teambox: Starting and Learning
jrom
123
7.7k
Git: the NoSQL Database
bkeepers
PRO
415
59k
Designing Experiences People Love
moore
130
22k
Building Flexible Design Systems
yeseniaperezcruz
310
34k
Code Review Best Practice
trishagee
43
9.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
Producing Creativity
orderedlist
PRO
333
37k
Agile that works and the tools we love
rasmusluckow
319
19k
Transcript
useRefʹ͍ͭͯௐͯΈͨ @shibe97 2019.9.4 React LTձ
ࣲా ف ΥϯλגࣜձࣾͰmicroCMSͱ͍͏ϔουϨεCMSΛ ࡞͍ͬͯ·͢ɻ ීஈReact͍Ͱɺ࠷ۙVueͪΐͬͱ৮Γ·͢ɻ @shibe97
None
ೖྗϑΥʔϜͱAPIΛඵͰ࡞Ͱ͖ΔαʔϏε
React Hooksͱ • React 16.8͔ΒՃ͞Εͨػೳ • Functional ComponentʹClass Componentͱಉ༷ͷॲཧ͕ Ͱ͖ΔΑ͏ʹՃ͞Εͨ
• stateϥΠϑαΠΫϧ૬ͷͷ
useRefͱ • DOMͷࢀরʹ͑Δ • ࠶ඳըͤ͞ͳ͍มཧ͕Ͱ͖Δ
DOMͷࢀরʹ͑ΔʢެࣜྫΑΓʣ function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick
= () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); }
࠶ඳըͤ͞ͳ͍มཧ͕Ͱ͖Δ • refΦϒδΣΫτΛcurrentϓϩύςΟʹอ࣋͢Δ • ࠶ඳը࣌ɺຖճಉ͡refΦϒδΣΫτΛฦ͢ • currentʹೖͯ͠࠶ඳը͞Εͳ͍ { current: initialValue
}
useRefͷ࣮ function mountRef<T>(initialValue: T): {current: T} { const hook =
mountWorkInProgressHook(); const ref = {current: initialValue}; if (__DEV__) { Object.seal(ref); } hook.memoizedState = ref; return ref; } function updateRef<T>(initialValue: T): {current: T} { const hook = updateWorkInProgressHook(); return hook.memoizedState; } ϝϞϦ্ͷΛຖճฦ͚ͩ͢ ϝϞϦ্ͰΦϒδΣΫτΛอ࣋ currentϓϩύςΟʹΛอ࣋
͜ͷΈΛར༻Ͱ͖ΔྫͬͯͳΜͩΖ͏
DOMͩʂ
inputཁૉͷྫ: useState function TextInput() { const [ text, setText ]
= useState(‘’); const onChange = useCallback(e => { setText(e.target.value); }; return ( <input onChange={onChange} type="text" /> ); } ςΩετΛมߋ͢Δͨͼʹඳը͞ΕΔ
inputཁૉͷྫ: useRefʢcurrentࢦఆʣ function TextInput() { const { current } =
useRef(null); const onChange = useCallback(e => { current = e.target.value; }); return ( <input onChange={onChange} type="text" /> ); } ςΩετΛมߋͯ͠࠶ඳը͞Εͳ͍
͋ΕɺͰ͜Εͬͯɾɾɾ
inputཁૉͷྫ: useRefʢDOMࢀরʣ function TextInput() { const inputEl = useRef(null); return
( <input ref={inputEl} type="text" /> ); } ͪΖΜ͜ͷํ๏࠶ඳը͞Εͳ͍
·ͱΊ • useRefΛอ࣋Ͱ͖Δ্ʹɺมߋͯ͠࠶ඳը͞Εͳ͍ • inputཁૉʹuseStateΑΓuseRefͷํ͕ύϑΥʔϚϯεྑ͍ • ͪΖΜControlled Componentʹ͍ͨ͠߹useStateʹ͢Δ ඞཁ͋Γ
͓·͚
useRefΦϒδΣΫτΛࢀর͍ͯ͠Δ͔Β ෦ϓϩύςΟมߋͨ͠ͱ͜ΖͰ࠶ඳը͞Εͳ͍ΜͩΖ͏
Α͠ɺLTωλ͜ΕͰ͍͜͏ʂ
useRefͷ࣮ function mountRef<T>(initialValue: T): {current: T} { const hook =
mountWorkInProgressHook(); const ref = {current: initialValue}; if (__DEV__) { Object.seal(ref); } hook.memoizedState = ref; return ref; } function updateRef<T>(initialValue: T): {current: T} { const hook = updateWorkInProgressHook(); return hook.memoizedState; } ϝϞϦ্ͷΛຖճฦ͚ͩ͢ ϝϞϦ্ͰΦϒδΣΫτΛอ࣋ currentϓϩύςΟʹΛอ࣋
·ͬͨؔ͘ͳ͔ͬͨ
Thanks :) @shibe97