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
useRefについて調べてみた
Search
Kazuki Shibata
September 04, 2019
Technology
1
150
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
1.1k
SvelteKitでJamstackを試す
shibe97
1
1.1k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.9k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
1.2k
CSR / SSR / SSGの動向2020
shibe97
2
1.6k
Jamstack×microCMS 実装編
shibe97
4
940
SentryでSPAのエラーログを収集する
shibe97
1
1.7k
フロントエンドエンジニアのキャリアパス
shibe97
9
3.8k
Containerどこに置く?
shibe97
1
1.9k
Other Decks in Technology
See All in Technology
MCP でモノが動くとおもしろい/It is interesting when things move with MCP
bitkey
3
600
Docker Compose で手軽に手元環境を実現する / Simplifying Local Environments with Docker Compose #CinemaDeLT
nabeo
0
240
LLM アプリケーションのためのクラウドセキュリティ - CSPM の実装ポイント-
osakatechlab
0
460
Amplifyとゼロからはじめた AIコーディング。失敗と気づき
mkdev10
1
150
SONiCで構築・運用する生成AI向けパブリッククラウドネットワーク
sonic
0
240
Cursorを全エンジニアに配布 その先に見据えるAI駆動開発の未来 / 2025-05-13-forkwell-ai-study-1-cursor-at-loglass
itohiro73
2
670
Vibe Coding Tools
ijin
1
290
Terraform にコントリビュートしていたら Azure のコストをやらかした話 / How I Messed Up Azure Costs While Contributing to Terraform
nnstt1
1
560
LangfuseではじめるAIアプリのLLMトレーシング
codenote
0
190
LLMの開発と社会実装の今と未来 / AI Builders' Community (ABC) vol.2
pfn
PRO
2
180
インラインRBSコメントに鯛pe checkersもニッコリ
sansantech
PRO
1
120
とあるEdTechベンチャーのシステム構成こだわりN選 / edtech-system
gotok365
5
360
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
33k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
4 Signs Your Business is Dying
shpigford
183
22k
Designing for humans not robots
tammielis
253
25k
The World Runs on Bad Software
bkeepers
PRO
68
11k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
580
Bash Introduction
62gerente
613
210k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
The Language of Interfaces
destraynor
158
25k
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