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
0
80
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
shibe97
15
3.7k
shibe97
3
500
shibe97
2
720
shibe97
4
310
shibe97
0
470
shibe97
9
2.9k
shibe97
1
1.4k
shibe97
2
1.3k
shibe97
7
4.2k
Other Decks in Technology
See All in Technology
piazza
0
130
kentaro
1
750
dena_tech
1
220
hayatan
0
200
clustervr
0
250
udonyuya
1
570
mot_ai_tech
0
110
110y
2
11k
ks91
PRO
0
150
masakazu
0
200
koukyo1994
6
1.7k
htomine
0
170
Featured
See All Featured
cassininazir
347
20k
jonrohan
1021
380k
garrettdimon
288
110k
pedronauck
652
110k
eileencodes
113
25k
davidbonilla
70
3.6k
brianwarren
82
4.7k
lauravandoore
10
1.6k
rasmusluckow
318
18k
maggiecrowley
10
510
shpigford
369
42k
moore
125
21k
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