社内勉強会の資料です。 https://water-cell.connpass.com/event/178300/
@circled9, 2020-06-04React Hooks ษڧձ #3WaterCell Inc.1
View Slide
ࣗݾհদҪ ਖ਼ࢤ ( Matsui Masashi )ϑϩϯτΤϯυΤϯδχΞcircled9useStateࡉ͔͚͘Δ2
Agenda• useRef• useImperativeHandle• useLayoutEffect• useDebugValue3
αϯϓϧʹ͍ͭͯ• εϥΠυͷ࠷ޙʹGithubͱJSFiddleͷϦϯΫ͕͋Γ·͢4
useRef5
Ref6
Ref• propsͷมߋҎ֎ͰࢠཁૉΛมߋ͢ΔͨΊͷආϋον• એݴతʹߦ͑ͳ͍ͷʹରͯ͠͏• ReactίϯϙʔωϯτͷΠϯελϯεDOMཁૉͷࢀরΛ࣋ͭ7
Ref• String Ref• Callback Ref• React.createRef()• useRef8
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
useRef12
useRef• .currentϓϩύςΟΛ࣋ͭrefΦϒδΣΫτΛฦ͢• refͷத͕มΘͬͯ࠶Ϩϯμʔൃੜ͠ͳ͍• ReactίϯϙʔωϯτͷΠϯελϯεDOMཁૉҎ֎ʹରͯ͑͠Δ• ؔίϯϙʔωϯτͷதͰ͑Δ13
useImperativeHandle14
forwardRef15
forwardRef• ࢠίϯϙʔωϯτʹrefΛͭ͢• ࠶ར༻ੑͷߴ͍ίϯϙʔωϯτͩͱ͍Ͳ͜Ζ͕͋Δ͔16
useImperativeHandle17
useImperativeHandle• forwardRefͱΈ߹Θͤͯ͏• ֎͔Βதͷrefʹରͯ͠ͷ࣮ΛݺͤΔ18
useLayoutEffect19
useLayoutEffect• useEffectʹΑ͘ࣅͯΔͭ• ඳը͞ΕΔલͷλΠϛϯάͰಉظతʹॲཧ͞ΕΔ• useEffectඇಉظͰॲཧ͞ΕΔ• ը໘ͷߋ৽͕ϒϩοΫ͞ΕΔͷͰجຊuseEffectΛ͏͖20
useDebugValue21
useDebugValue• ΧελϜϑοΫΛσόοά͢Δ࣌ʹศརͳϑοΫ• ҾͰͨ͠ΛReact DevTools্Ͱ֬ೝͰ͖Δ• ୈ2Ҿʹදࣔ༻ͷؔΛͤΔ• ϑΥʔϚοτͷॲཧίετ͕ߴ͍߹ʹ͏22
Examples23
Github• react-hooks-example• https://github.com/circled9/react-hooks-example24
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