React Hooks 勉強会 vol.3

社内勉強会の資料です。
https://water-cell.connpass.com/event/178300/

Transcript

1. @circled9, 2020-06-04 React Hooks ษڧձ #3 WaterCell Inc. 1
2. ࣗݾ঺հ দҪ ਖ਼ࢤ ( Matsui Masashi ) ϑϩϯτΤϯυΤϯδχΞ circled9 useState͸ࡉ͔͘෼͚Δ೿ 2
3. Agenda • useRef • useImperativeHandle • useLayoutEffect • useDebugValue 3
4. αϯϓϧʹ͍ͭͯ • εϥΠυͷ࠷ޙʹGithubͱJSFiddle΁ͷϦϯΫ͕͋Γ·͢ 4
5. useRef 5
6. Ref 6
7. Ref • propsͷมߋҎ֎ͰࢠཁૉΛมߋ͢ΔͨΊͷආ೉ϋον • એݴతʹߦ͑ͳ͍΋ͷʹରͯ͠࢖͏ • ReactίϯϙʔωϯτͷΠϯελϯε΍DOMཁૉͷࢀরΛ࣋ͭ 7
8. Ref • String Ref • Callback Ref • React.createRef() • useRef 8
9. String Ref • refଐੑʹจࣈྻΛઃఆ͢Δ • this.refs.foo ͰཁૉʹΞΫηε͢Δ • ϨΨγʔͳAPIͳͷͰ͍͔ͭ࡟আ͞ΕΔ͔΋ 9
10. Callback Ref • refଐੑʹؔ਺Λॻ͍ͯɺthis.fooͳͲʹཁૉΛઃఆ͢Δ 10
11. React.createRef() • 16.3͔Β࢖͑Δػೳ • createRef()ͰrefΦϒδΣΫτΛ࡞੒͢Δ • refଐੑͰ͸refΦϒδΣΫτΛࢦఆ͢Δ • ཁૉ΁ͷΞΫηε͸foo.currentͰߦ͏ 11
12. useRef 12
13. useRef • .currentϓϩύςΟΛ࣋ͭrefΦϒδΣΫτΛฦ͢ • refͷத਎͕มΘͬͯ΋࠶Ϩϯμʔ͸ൃੜ͠ͳ͍ • ReactίϯϙʔωϯτͷΠϯελϯε΍DOMཁૉҎ֎ʹରͯ͠΋࢖͑Δ • ؔ਺ίϯϙʔωϯτͷதͰ΋࢖͑Δ 13
14. useImperativeHandle 14
15. forwardRef 15
16. forwardRef • ࢠίϯϙʔωϯτʹrefΛ౉͢΍ͭ • ࠶ར༻ੑͷߴ͍ίϯϙʔωϯτͩͱ࢖͍Ͳ͜Ζ͕͋Δ͔΋ 16
17. useImperativeHandle 17
18. useImperativeHandle • forwardRefͱ૊Έ߹Θͤͯ࢖͏ • ֎͔Βதͷrefʹରͯ͠ͷ࣮૷Λݺ͹ͤΔ 18
19. useLayoutEffect 19
20. useLayoutEffect • useEffectʹΑ͘ࣅͯΔ΍ͭ • ඳը͞ΕΔલͷλΠϛϯάͰಉظతʹॲཧ͞ΕΔ • useEffect͸ඇಉظͰॲཧ͞ΕΔ • ը໘ͷߋ৽͕ϒϩοΫ͞ΕΔͷͰجຊ͸useEffectΛ࢖͏΂͖ 20
21. useDebugValue 21
22. useDebugValue • ΧελϜϑοΫΛσόοά͢Δ࣌ʹศརͳϑοΫ • Ҿ਺Ͱ౉ͨ͠஋ΛReact DevTools্Ͱ֬ೝͰ͖Δ • ୈ2Ҿ਺ʹදࣔ༻ͷؔ਺Λ౉ͤΔ • ϑΥʔϚοτͷॲཧίετ͕ߴ͍৔߹ʹ࢖͏ 22
23. Examples 23
24. Github • react-hooks-example • https://github.com/circled9/react-hooks-example 24
25. JSFiddle • String Ref • https://jsfiddle.net/circled9/gx7ak3cu/ • Callback Ref • https://jsfiddle.net/circled9/m8xk5sr0/ • createRef • https://jsfiddle.net/circled9/fvgre0su/ 25
26. JSFiddle • useRef • https://jsfiddle.net/circled9/1m8j2Lvd/ • useRef (vs state) • https://jsfiddle.net/circled9/dqxj2vsb/ • useImperativeHandle • https://jsfiddle.net/circled9/vxtja8m5/ 26