React Hooks 勉強会 vol.3

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