React Hooks 勉強会 vol.3

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

Transcript

1. @circled9, 2020-06-04
   React Hooks ษڧձ #3
   WaterCell Inc.
   1
   

   View Slide

2. ࣗݾ঺հ
   দҪ ਖ਼ࢤ ( Matsui Masashi )
   
   ϑϩϯτΤϯυΤϯδχΞ
   
   circled9
   
   useState͸ࡉ͔͘෼͚Δ೿
   2
   

   View Slide

3. Agenda
   • useRef
   
   • useImperativeHandle
   
   • useLayoutEffect
   
   • useDebugValue
   3
   

   View Slide

4. αϯϓϧʹ͍ͭͯ
   • εϥΠυͷ࠷ޙʹGithubͱJSFiddle΁ͷϦϯΫ͕͋Γ·͢
   4
   

   View Slide

5. useRef
   5
   

   View Slide

6. Ref
   6
   

   View Slide

7. Ref
   • propsͷมߋҎ֎ͰࢠཁૉΛมߋ͢ΔͨΊͷආ೉ϋον
   
   • એݴతʹߦ͑ͳ͍΋ͷʹରͯ͠࢖͏
   
   • ReactίϯϙʔωϯτͷΠϯελϯε΍DOMཁૉͷࢀরΛ࣋ͭ
   7
   

   View Slide

8. Ref
   • String Ref
   
   • Callback Ref
   
   • React.createRef()
   
   • useRef
   8
   

   View Slide

9. String Ref
   • refଐੑʹจࣈྻΛઃఆ͢Δ
   
   • this.refs.foo ͰཁૉʹΞΫηε͢Δ
   
   • ϨΨγʔͳAPIͳͷͰ͍͔ͭ࡟আ͞ΕΔ͔΋
   9
   

   View Slide

10. Callback Ref
    • refଐੑʹؔ਺Λॻ͍ͯɺthis.fooͳͲʹཁૉΛઃఆ͢Δ
    10
    

    View Slide

11. React.createRef()
    • 16.3͔Β࢖͑Δػೳ
    
    • createRef()ͰrefΦϒδΣΫτΛ࡞੒͢Δ
    
    • refଐੑͰ͸refΦϒδΣΫτΛࢦఆ͢Δ
    
    • ཁૉ΁ͷΞΫηε͸foo.currentͰߦ͏
    11
    

    View Slide

12. useRef
    12
    

    View Slide

13. useRef
    • .currentϓϩύςΟΛ࣋ͭrefΦϒδΣΫτΛฦ͢
    
    • refͷத਎͕มΘͬͯ΋࠶Ϩϯμʔ͸ൃੜ͠ͳ͍
    
    • ReactίϯϙʔωϯτͷΠϯελϯε΍DOMཁૉҎ֎ʹରͯ͠΋࢖͑Δ
    
    • ؔ਺ίϯϙʔωϯτͷதͰ΋࢖͑Δ
    13
    

    View Slide

14. useImperativeHandle
    14
    

    View Slide

15. forwardRef
    15
    

    View Slide

16. forwardRef
    • ࢠίϯϙʔωϯτʹrefΛ౉͢΍ͭ
    
    • ࠶ར༻ੑͷߴ͍ίϯϙʔωϯτͩͱ࢖͍Ͳ͜Ζ͕͋Δ͔΋
    16
    

    View Slide

17. useImperativeHandle
    17
    

    View Slide

18. useImperativeHandle
    • forwardRefͱ૊Έ߹Θͤͯ࢖͏
    
    • ֎͔Βதͷrefʹରͯ͠ͷ࣮૷Λݺ͹ͤΔ
    18
    

    View Slide

19. useLayoutEffect
    19
    

    View Slide

20. useLayoutEffect
    • useEffectʹΑ͘ࣅͯΔ΍ͭ
    
    • ඳը͞ΕΔલͷλΠϛϯάͰಉظతʹॲཧ͞ΕΔ
    
    • useEffect͸ඇಉظͰॲཧ͞ΕΔ
    
    • ը໘ͷߋ৽͕ϒϩοΫ͞ΕΔͷͰجຊ͸useEffectΛ࢖͏΂͖
    20
    

    View Slide

21. useDebugValue
    21
    

    View Slide

22. useDebugValue
    • ΧελϜϑοΫΛσόοά͢Δ࣌ʹศརͳϑοΫ
    
    • Ҿ਺Ͱ౉ͨ͠஋ΛReact DevTools্Ͱ֬ೝͰ͖Δ
    
    • ୈ2Ҿ਺ʹදࣔ༻ͷؔ਺Λ౉ͤΔ
    
    • ϑΥʔϚοτͷॲཧίετ͕ߴ͍৔߹ʹ࢖͏
    22
    

    View Slide

23. Examples
    23
    

    View Slide

24. Github
    • react-hooks-example
    
    • https://github.com/circled9/react-hooks-example
    24
    

    View Slide

25. JSFiddle
    • String Ref
    
    • https://jsfiddle.net/circled9/gx7ak3cu/
    
    • Callback Ref
    
    • https://jsfiddle.net/circled9/m8xk5sr0/
    
    • createRef
    
    • https://jsfiddle.net/circled9/fvgre0su/
    25
    

    View Slide

26. JSFiddle
    • useRef
    
    • https://jsfiddle.net/circled9/1m8j2Lvd/
    
    • useRef (vs state)
    
    • https://jsfiddle.net/circled9/dqxj2vsb/
    
    • useImperativeHandle
    
    • https://jsfiddle.net/circled9/vxtja8m5/
    26
    

    View Slide