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

目次

概要

  • 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のHooks版として実装されている。
  • 呼び出す順番や回数がかわると問題が起きる。

規則

Hooksを使用する際の規則

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

種類

useState

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

useReducer

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

useContext

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

useEffect

  • レンダリングの後に処理を動作させることができる。
  • 従来のReact
    • componentDidMount?
    • componentDidUpdate?
    • componentWillUnmount?

に相当する。

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

useMemo

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

useXXX

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

その他

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

参考

Qiita

mizchi's blog


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-10-24 (木) 17:40:34 (18d)