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
98
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
580
SvelteKitでJamstackを試す
shibe97
1
710
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.4k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
880
CSR / SSR / SSGの動向2020
shibe97
2
1.1k
Jamstack×microCMS 実装編
shibe97
4
570
SentryでSPAのエラーログを収集する
shibe97
1
1k
フロントエンドエンジニアのキャリアパス
shibe97
9
3.2k
Containerどこに置く?
shibe97
1
1.6k
Other Decks in Technology
See All in Technology
David Bernstein : Five Development Practices for Building Software with Scrum
kawaguti
PRO
5
6.7k
Virtual Thread - 導入の背景と、効果的な使い方 -
skrb
3
230
チケットNFTの仕組み
sbtechnight
0
320
- Rでオブジェクト指向プログラミング- クラス設計入門の入門
kotatyamtema
1
520
ROS_Japan_UG_#49_LT
maeharakeisuke
0
190
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
8
1.7k
音をアレする
koba789
0
330
ステート管理を超えるRecoil運用の考え方
uhyo
7
5k
私見「UNIXの考え方」/20230124-kameda-unix-phylosophy
opelab
0
130
テクニカルライターよ概念図を描くのです 〜テクニカルライターのためのイラストテクニック2〜 / cybozu illust technique2
yuki_kondo
13
3.3k
ERC3525 Semi-Fungible token
sbtechnight
0
320
LINE iOSエンジニアの日々 / LINE iOS Engineer Days
line_developers
PRO
1
120
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
Scaling GitHub
holman
453
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
29k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
WebSockets: Embracing the real-time Web
robhawkes
58
6k
Six Lessons from altMBA
skipperchong
15
2.3k
5 minutes of I Can Smell Your CMS
philhawksworth
198
18k
We Have a Design System, Now What?
morganepeng
37
5.9k
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