🐣 React Hooks APIについて学んだこと
作成日: 2021/12/14
3

React のバージョン 16.8 から使用できる API です。Hooks APIを使うことで関数コンポーネントでもuseStateなどのメソッドを使用して状態管理が行うことができる。

以下がHooksAPIの全容

  • useState
  • useEffect
  • useContext
  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue

Hookとは、「プログラム中のある場所に、開発者が処理を埋め込めるための仕組み」とのことで、

JavaScript ではユーザがボタンをクリックした時に、
アラートを表示させる
別の画面に遷移させる
などの処理を開発者が決めて実装できますが、こちらもフックの一種です。

従来のメソッド定義が以下のような書き方になりますが、

var obj = {
  foo: function() {
    /* コード */
  },
  bar: function() {
    /* コード */
  }
};

*** 複雑になりがちだった従来のクラスコンポーネントを用いた実装を、関数コンポーネントでより簡潔に記述できるようにしてくれるメソッド群***
とのことで、HooksAPIを使用すると以下のように書ける↓

const [state, setState] = useState(initialState);

であり、何か特定のタイミングに処理を埋め込むような実装の際にフックするみたい。