Skip to content

DNET_Hooks

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

Hooks

  • 戻る（Reactの該当節を参照）

概要

  • React 16.8で正式版として登場した。

  • 関数コンポーネントから使える新しい API

    • API 上はuseから始まる名前のただの関数
    • state等の機能をfunctionalコンポーネントでも使用可能にする。
    • 従来は、classコンポーネントでしか使用できなかった。

  • Redux を置き換えるものではない。

    • が… Redux の機能を一部吸収
    • Redux 使わずに React だけで完結できはする。
      • Context と組み合わせることで、middleware なし Redux が簡単に実現できる。
      • useContext の Hooks を使うと、Redux 風の Flux が再現できる。
      • , etc.
    • ...とあるものの、
      • Reduxの方が優れている点もあり併用の提案もある。
      • 「HooksがReduxを廃れさせることは無い。」と言われている。
      • Redux自体も「まず消極的に、内部 API を変えるために用いている。」らしい。

  • React開発チームは、

    「長期的には、Hooksが React のコンポーネントを書く
    際の第一選択となることを期待しています。」

    と言っているので、今後のスタンダードになると予想される。

詳細

仕組

  • Hooksは裏で配列を持ち、それを順番に呼び出している。

  • React Fiber（Reactの該当節を参照）のHooks版として実装されている。

  • 呼び出す順番や回数がかわると問題が起きる。

  • 参考

規則

Hooksを使用する際の規則

  1. Hooksは必ずコンポーネント中の一番上(トップレベル)に定義する。
  2. HooksはReactの関数コンポーネントの中だけで呼ぶ。
  3. 禁止事項
    1. ifやforのブロックの中での呼び出し
    2. render以外のタイミングで呼び出す

種類

useState

  • クラスコンポーネントに頼らなくてもstateを持つことができる。
  • useStateは、現在のstateとsetState関数を返す関数

useReducer

  • useStateの亜種

  • ReduxのReducerとは少々違う。

    • useStateよりも複雑なstateを管理するのに役立つ。
    • Reduxがグローバルなstoreを提供し、アプリケーションのデータを集中管理する。
    • useReducer は特定のコンポーネントにローカライズされている。

useContext

  • バケツリレー（prop drilling）問題を解決する。
  • React.createContext()（Reactの該当節を参照）で作ったコンテキストを取得できるようになる。
  • アプリケーション全体のデータはReduxで管理したほうが良い。

useEffect

  • レンダリングの後に処理を動作させることができる。

  • 従来のReactの

    • componentDidMount
    • componentDidUpdate
    • componentWillUnmount

    に相当する。

  • useLayoutEffect
    レンダリング完了前に呼び出される。

useMemo

  • 値がメモ化できる。
  • 引数が前回値と同じ場合に計算を
    スキップして結果を再利用できる。

useXXX

  • 共通のロジックをコンポーネント間での再利用を可能にする。
  • useXXXと言うSFCを実装してそれを利用する。

その他

  • useCallback
    useMemoの亜種

  • useRef
    React.createRef（Reactの該当節を参照）のオブジェクト（refs）を返す。

  • useDebugValue
    React DevTools 内にカスタムフックに関するラベル付きデバッグメッセージを表示

参考

React（公式）

Qiita

mizchi's blog

Reactの5thステップ

Reactの5thステップ

移行メモ

  • 参考の見出し「React」はページ内の他の記述と紛らわしいため 「React（公式）」とした。
  • PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替え、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。

Tags: 移行, React, Hooks, useState, useEffect, useContext, useReducer, 関数コンポーネント

このWikiは「Open棟梁Project」,「OSSコンソーシアム 開発基盤部会」によって運営されています。

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally