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

Learning-Hooks

 Learning-Hooks

Nokogiri

July 19, 2019
Tweet

More Decks by Nokogiri

Other Decks in Technology

Transcript

  1. / /
    React.kyoto v . .
    Learning-Hooks

    View full-size slide

  2. Learning-Hooks
    Taiki Nishi
    Nokogiri
    nkgrnkgr
    @nkgrnkgr
    プロフィール
    - サイボウズ株式会社
    - kintoneというプロダクトの開発してます
    - TypeScript / React / Java
    - スクラム/モブプログラミング
    - プロダクトでもReact⼀部使っているが触ったことない
    - プライベートでなんか作るときにReactを使う程度
    ͸͡Ί·ͯ͠

    View full-size slide

  3. Learning-Hooks
    今⽇お話しすること
    ࠓߋͳ͕ΒHooksͷษڧͨ͠ͷͰڞ༗͍ͨ͠✍
    ‧2018年12⽉にHooksが発表されてから半年ほどReactのキャッチアップサボってた
    ‧せっかく勉強したので、LTしたい
    ‧マサカリOK(ただし、優しく殺してください)

    View full-size slide

  4. Learning-Hooks
    ⽬次
    . Ice Break
    . Hooksとは
    . Hooks以前の話
    . Hooks API の紹介

    View full-size slide

  5. Learning-Hooks
    Reactの⼈気

    View full-size slide

  6. Learning-Hooks
    Reactの⼈気

    View full-size slide

  7. Learning-Hooks
    Reactの⼈気

    View full-size slide

  8. React はいいぞ

    View full-size slide

  9. Learning-Hooks
    Hooksとは
    Hooks
    ‧React . で追加されたReactの新機能 (Latest release v . . )
    ‧stateなどのReactの機能をClassでなく関数コンポーネントで使うことができる
    例)
    - useState
    - useEffect
    公式ドキュメント
    EN : https://reactjs.org/docs/hooks-reference.html
    JP : https://ja.reactjs.org/docs/hooks-reference.html

    View full-size slide

  10. あとは公式ドキュメント読んどいて

    View full-size slide

  11. ではLTにならないので

    View full-size slide

  12. Hooks出る前は?
    クラスコンポーネントや
    Recomposeとの⽐較

    View full-size slide

  13. Hooks以前の話

    View full-size slide

  14. Learning-Hooks
    Hooks以前の話
    ΫϥείϯϙʔωϯτͰ͸ͳؔ͘਺ίϯϙʔωϯτ
    FacebookのReact開発チームは公式⾒解として
    関数コンポーネント書くことを優先するように開発者にアナウンスしている。
    理由は以下の通り
    ‧クラス内のthisの挙動が難解
    ‧記述が冗⻑になりがちで、時系列が複雑なライフサイクルメソッドの挙動
    ‧今後導⼊予定の各種最適化がクラスだと難しい

    View full-size slide

  15. Learning-Hooks
    Hooks以前の話
    ΫϥείϯϙʔωϯτͰ͸ͳؔ͘਺ίϯϙʔωϯτ
    ただし、関数コンポーネントは
    Stateやライフサイクルメソッドが使えない

    View full-size slide

  16. Learning-Hooks
    Hooks以前の話
    Recompose
    関数コンポーネントやHOCのためのサードパーティのReactユーティリティ
    - Local State
    - ライフサイクルメソッド
    - 複数のHOCを合成する
    関数コンポーネント + HOC + Recompose は鉄板だった

    View full-size slide

  17. Learning-Hooks
    Hooks以前の話
    Recompose
    すでに開発が停⽌が発表されいる
    2018年11⽉ React Confで α版のHooksが発表されて、
    数⽇後Recomposeは開発停⽌を発表
    Recompose作者の Andrew Clark さんがFacebookでHooksの開発にジョイン

    View full-size slide

  18. Hooks API の紹介

    View full-size slide

  19. Learning-Hooks
    Hooks APIの紹介
    ReactのStateを利⽤することができる
    -useState の引数は初期値
    -戻り値の配列の0番⽬は stateの変数
    -戻り値の配列の1番⽬は stateを更新可能な関数
    useState

    View full-size slide

  20. Learning-Hooks
    Hooks APIの紹介

    関数コンポーネント + Hooks
    クラスコンポーネント

    View full-size slide

  21. Learning-Hooks
    Hooks APIの紹介
    Recompose

    View full-size slide

  22. Learning-Hooks
    Hooks APIの紹介
    Reactのライフサイクルメソッドに該当
    -componentDidMout()
    -componentDidUpdate()
    -componentWillUnmount()
    useEffect
    - 第⼀引数に関数、第⼆引数に配列を持つ
    - doSomethingは初回レンダリング時に実⾏される
    - watchVarが変更されない限り、再レンダリング時は実⾏されない
    - 初回レンダリング時のみ実⾏したい場合は空の配列を渡す
    - 第⼆引数を省略すると再レンダリング時に毎回実⾏される
    - 戻り値のclearSomethingはアンマウント時に実⾏される

    View full-size slide

  23. Learning-Hooks
    Hooks APIの紹介

    関数コンポーネント + Hooks クラスコンポーネント

    View full-size slide

  24. Learning-Hooks
    Hooks APIの紹介
    Recompose

    View full-size slide

  25. Learning-Hooks
    Hooks APIの紹介
    DOM への参照のための
    ref オブジェクトを返却する
    コンポーネントの存在期間全体にわたって
    存在し続ける
    インスタンス変数のような使い⽅ができる
    useRef

    View full-size slide

  26. Learning-Hooks
    Hooks APIの紹介
    特定のPropsが変更されたときだけ
    コンポーネントを再レンダリングしたい場合
    に使う
    shouldComponentUpdate() に相当するもの
    shouldComponentUpdateと違って、
    親コンポーネントに記載する必要がある
    useMemo

    View full-size slide

  27. Learning-Hooks
    Hooks APIの紹介
    - useContext
    - useReducer
    - useCallback
    - useImperativeHandle
    - useLayoutEffect
    - useDebugValue
    ͦͷଞHooksAPIs
    公式ドキュメント
    https://ja.reactjs.org/docs/hooks-reference.html

    View full-size slide

  28. ご静聴ありがとうございました'

    View full-size slide