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. Learning-Hooks Taiki Nishi Nokogiri nkgrnkgr @nkgrnkgr プロフィール - サイボウズ株式会社 -

    kintoneというプロダクトの開発してます - TypeScript / React / Java - スクラム/モブプログラミング - プロダクトでもReact⼀部使っているが触ったことない - プライベートでなんか作るときにReactを使う程度 ͸͡Ί·ͯ͠
  2. 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
  3. Learning-Hooks Hooks APIの紹介 Reactのライフサイクルメソッドに該当 -componentDidMout() -componentDidUpdate() -componentWillUnmount() useEffect - 第⼀引数に関数、第⼆引数に配列を持つ

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

    useImperativeHandle - useLayoutEffect - useDebugValue ͦͷଞHooksAPIs 公式ドキュメント https://ja.reactjs.org/docs/hooks-reference.html