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

Learning-Hooks

 Learning-Hooks

391ed5f8562a797f010ec510b65075d7?s=128

Nokogiri

July 19, 2019
Tweet

Transcript

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

  2. Learning-Hooks Taiki Nishi Nokogiri nkgrnkgr @nkgrnkgr プロフィール - サイボウズ株式会社 -

    kintoneというプロダクトの開発してます - TypeScript / React / Java - スクラム/モブプログラミング - プロダクトでもReact⼀部使っているが触ったことない - プライベートでなんか作るときにReactを使う程度 ͸͡Ί·ͯ͠
  3. Learning-Hooks 今⽇お話しすること ࠓߋͳ͕ΒHooksͷษڧͨ͠ͷͰڞ༗͍ͨ͠✍ ‧2018年12⽉にHooksが発表されてから半年ほどReactのキャッチアップサボってた ‧せっかく勉強したので、LTしたい ‧マサカリOK(ただし、優しく殺してください)

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

    Hooks API の紹介
  5. Ice Break

  6. Learning-Hooks Reactの⼈気

  7. Learning-Hooks Reactの⼈気

  8. Learning-Hooks Reactの⼈気

  9. React はいいぞ

  10. Hooksとは

  11. 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
  12. あとは公式ドキュメント読んどいて

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

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

  15. Hooks以前の話

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

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

  18. Learning-Hooks Hooks以前の話 Recompose 関数コンポーネントやHOCのためのサードパーティのReactユーティリティ - Local State - ライフサイクルメソッド -

    複数のHOCを合成する 関数コンポーネント + HOC + Recompose は鉄板だった
  19. Learning-Hooks Hooks以前の話 Recompose すでに開発が停⽌が発表されいる 2018年11⽉ React Confで α版のHooksが発表されて、 数⽇後Recomposeは開発停⽌を発表 Recompose作者の

    Andrew Clark さんがFacebookでHooksの開発にジョイン
  20. Hooks API の紹介

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

    useState
  22. Learning-Hooks Hooks APIの紹介 ྫ 関数コンポーネント + Hooks クラスコンポーネント

  23. Learning-Hooks Hooks APIの紹介 Recompose ྫ

  24. Learning-Hooks Hooks APIの紹介 Reactのライフサイクルメソッドに該当 -componentDidMout() -componentDidUpdate() -componentWillUnmount() useEffect - 第⼀引数に関数、第⼆引数に配列を持つ

    - doSomethingは初回レンダリング時に実⾏される - watchVarが変更されない限り、再レンダリング時は実⾏されない - 初回レンダリング時のみ実⾏したい場合は空の配列を渡す - 第⼆引数を省略すると再レンダリング時に毎回実⾏される - 戻り値のclearSomethingはアンマウント時に実⾏される
  25. Learning-Hooks Hooks APIの紹介 ྫ 関数コンポーネント + Hooks クラスコンポーネント

  26. Learning-Hooks Hooks APIの紹介 Recompose ྫ

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

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

    useMemo
  29. Learning-Hooks Hooks APIの紹介 - useContext - useReducer - useCallback -

    useImperativeHandle - useLayoutEffect - useDebugValue ͦͷଞHooksAPIs 公式ドキュメント https://ja.reactjs.org/docs/hooks-reference.html
  30. ご静聴ありがとうございました'