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

    View full-size slide

  2. ࣗݾ঺հ
    দҪ ਖ਼ࢤ ( Matsui Masashi )

    ϑϩϯτΤϯυΤϯδχΞ

    circled9

    useState͸ࡉ͔͘෼͚Δ೿
    2

    View full-size slide

  3. Agenda
    • useRef

    • useImperativeHandle

    • useLayoutEffect

    • useDebugValue
    3

    View full-size slide

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

    View full-size slide

  5. Ref
    • propsͷมߋҎ֎ͰࢠཁૉΛมߋ͢ΔͨΊͷආ೉ϋον

    • એݴతʹߦ͑ͳ͍΋ͷʹରͯ͠࢖͏

    • ReactίϯϙʔωϯτͷΠϯελϯε΍DOMཁૉͷࢀরΛ࣋ͭ
    7

    View full-size slide

  6. Ref
    • String Ref

    • Callback Ref

    • React.createRef()

    • useRef
    8

    View full-size slide

  7. String Ref
    • refଐੑʹจࣈྻΛઃఆ͢Δ

    • this.refs.foo ͰཁૉʹΞΫηε͢Δ

    • ϨΨγʔͳAPIͳͷͰ͍͔ͭ࡟আ͞ΕΔ͔΋
    9

    View full-size slide

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

    View full-size slide

  9. React.createRef()
    • 16.3͔Β࢖͑Δػೳ

    • createRef()ͰrefΦϒδΣΫτΛ࡞੒͢Δ

    • refଐੑͰ͸refΦϒδΣΫτΛࢦఆ͢Δ

    • ཁૉ΁ͷΞΫηε͸foo.currentͰߦ͏
    11

    View full-size slide

  10. useRef
    • .currentϓϩύςΟΛ࣋ͭrefΦϒδΣΫτΛฦ͢

    • refͷத਎͕มΘͬͯ΋࠶Ϩϯμʔ͸ൃੜ͠ͳ͍

    • ReactίϯϙʔωϯτͷΠϯελϯε΍DOMཁૉҎ֎ʹରͯ͠΋࢖͑Δ

    • ؔ਺ίϯϙʔωϯτͷதͰ΋࢖͑Δ
    13

    View full-size slide

  11. useImperativeHandle
    14

    View full-size slide

  12. forwardRef
    15

    View full-size slide

  13. forwardRef
    • ࢠίϯϙʔωϯτʹrefΛ౉͢΍ͭ

    • ࠶ར༻ੑͷߴ͍ίϯϙʔωϯτͩͱ࢖͍Ͳ͜Ζ͕͋Δ͔΋
    16

    View full-size slide

  14. useImperativeHandle
    17

    View full-size slide

  15. useImperativeHandle
    • forwardRefͱ૊Έ߹Θͤͯ࢖͏

    • ֎͔Βதͷrefʹରͯ͠ͷ࣮૷Λݺ͹ͤΔ
    18

    View full-size slide

  16. useLayoutEffect
    19

    View full-size slide

  17. useLayoutEffect
    • useEffectʹΑ͘ࣅͯΔ΍ͭ

    • ඳը͞ΕΔલͷλΠϛϯάͰಉظతʹॲཧ͞ΕΔ

    • useEffect͸ඇಉظͰॲཧ͞ΕΔ

    • ը໘ͷߋ৽͕ϒϩοΫ͞ΕΔͷͰجຊ͸useEffectΛ࢖͏΂͖
    20

    View full-size slide

  18. useDebugValue
    21

    View full-size slide

  19. useDebugValue
    • ΧελϜϑοΫΛσόοά͢Δ࣌ʹศརͳϑοΫ

    • Ҿ਺Ͱ౉ͨ͠஋ΛReact DevTools্Ͱ֬ೝͰ͖Δ

    • ୈ2Ҿ਺ʹදࣔ༻ͷؔ਺Λ౉ͤΔ

    • ϑΥʔϚοτͷॲཧίετ͕ߴ͍৔߹ʹ࢖͏
    22

    View full-size slide

  20. Github
    • react-hooks-example

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

    View full-size slide

  21. JSFiddle
    • String Ref

    • https://jsfiddle.net/circled9/gx7ak3cu/

    • Callback Ref

    • https://jsfiddle.net/circled9/m8xk5sr0/

    • createRef

    • https://jsfiddle.net/circled9/fvgre0su/
    25

    View full-size slide

  22. JSFiddle
    • useRef

    • https://jsfiddle.net/circled9/1m8j2Lvd/

    • useRef (vs state)

    • https://jsfiddle.net/circled9/dqxj2vsb/

    • useImperativeHandle

    • https://jsfiddle.net/circled9/vxtja8m5/
    26

    View full-size slide