Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Hooks 勉強会 vol.3

React Hooks 勉強会 vol.3

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

Matsui Masashi

June 04, 2020
Tweet

More Decks by Matsui Masashi

Other Decks in Programming

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