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

React hooks を気合で理解する

forcia_dev_pr
March 01, 2023
180

React hooks を気合で理解する

2023/2/28開催Shinjuku.ts#2LT資料

forcia_dev_pr

March 01, 2023
Tweet

More Decks by forcia_dev_pr

Transcript

  1. 自己紹介 • 宮本 唯 • ソフトウェアエンジニア@フォルシア株式会社 ◦ 旅行会社検索アプリの運用保守・開発 • 活動領域

    ◦ webアプリケーション開発 (TypeScript, React, Redux) ◦ バックエンド開発(PostgreSQL) ◦ 技術広報 ◦ 飲み会のにぎやかし要員 2
  2. Reactを使う理由(1) 8 • Reactでは長大なHTMLを コンポネント に分割することで、簡潔さや高い保守性を実現できる … 本質的には JSX(Javascript XML),

    TSX(Typescript XML) の利用 HTMLを 書きやすくする マクロみたいな ものか… ひよっ子エンジニア ・ 宮本 イメージ
  3. Reactを使う理由(1) 9 • Reactでは長大なHTMLを コンポネント に分割することで、簡潔さや高い保守性を実現できる … 本質的には JSX(Javascript XML),

    TSX(Typescript XML) の利用 HTMLを 書きやすくする マクロみたいな ものか… ひよっ子エンジニア ・ 宮本 イメージ 完全に理解
  4. とりあえずReact hooksについて調べてみた 16 要するにフックとは? フックとは、関数コンポーネントに state やライフサイク ルといった React の機能を

    “接続する (hook into)” ための関 数です。フックは React をクラスなしに使うための機能で すので、クラス内では機能しません。 React公式ドキュメント(https://ja.reactjs.org/docs/hooks-overview.html)より抜粋 ここでmiyamotoは衝撃の事実に気づく…
  5. とりあえずReact hooksについて調べてみた 17 要するにフックとは? フックとは、関数コンポーネントに state やライフサイク ルといった React の機能を

    “接続する (hook into)” ための関 数です。フックは React をクラスなしに使うための機能で すので、クラス内では機能しません。 React公式ドキュメント(https://ja.reactjs.org/docs/hooks-overview.html)より抜粋 ここでmiyamotoは衝撃の事実に気づく… Reactのコンポーネントには クラスコンポーネントと関数コンポーネントがあるのだ!!
  6. Reactのクラスコンポーネント 18 • Javascriptのクラスの機能を利用して実装されたReactのフレームワーク 主な用語(お気持ち) props … 親から与えられたコンポーネントの状態 state …

    自分が内部に持っているコンポーネントの状態 render … HTMLを生成しDOMに書き出すプロセス propsまたはstateが更新されると renderが(何度でも)実行され画面が変化される。
  7. Reactの関数コンポーネント 19 • Javascriptの関数の機能を利用して実装されたReactのフレームワーク 19 • クラスよりも実装がシンプルで再利用しやすく、保守性が 高い • ただし、クラスコンポーネントのようにReactの機能を自由

    に使うことができなかった(stateなどReact.Component のメソッド) 関数コンポネントでも、stateなどクラスコンポーネントで 使えていた機能を使えるようにするのが React Hooks! ※React16.8で追加された比較的新しい機能
  8. • クラスコンポーネントで使えてた機能を関数コンポーネントでも使えるようにするのが React Hooks • React Hooks はReactに新機能を提供するものというより、リファクタリングのための道具を与えるものといえる • React

    Hooksのうちよく利用するのが useState と useEffect • useMemo, useCallback, useRef とかもたまに使う • useState … クラスコンポーネントの state を 関数コンポーネントでも使えるようにする • useEffect … クラスコンポーネントの 副作用 を 関数コンポーネントでも使えるようにする useState と useEffect 21
  9. • useEffect … クラスコンポーネントの 副作用 (≒レンダリング以外の処理) を 関数コンポーネントでも使えるようにする useEffect の使い方

    (1) 副作用を起こせる主なメソッド • componentDidMount 出力がDOMにrenderされた直後に呼び出し • componentDidUpdate DOMが更新された直後に呼び出し • componentWillUnmount コンポネントが破棄される直前に呼び出し 23
  10. useEffect の使い方 (2) ※ 実際はクラスと関数で微妙に副作用実行のタイミングが異なっているので、書き換えは等価ではない componentDidMount, componentDidUpdate に対応 componentWillUnmount に対応

    ※両者の違いはuseEffectの第2引数でだいたい制御可能 • useEffect … クラスコンポーネントの 副作用 (≒レンダリング以外の処理) を 関数コンポーネントでも使えるようにする 25
  11. その他のReact Hooks 紹介した以外にもReact Hooksはいっぱいある。 • useRef • refのフォワーディングを関数コンポネントで使用する • useContext

    • コンテクストを関数コンポネントで使用する • useMemo • レンダリング時の関数の実行結果をメモしパフォーマンスを改善するために使用する • useCallback • コールバック関数をメモしパフォーマンスを改善するために使用する • useReducer • Reduxっぽく状態を管理したいときにuseStateの代わりに使用する 詳しくは、https://ja.reactjs.org/docs/hooks-reference.html に書いてある。 26