「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
目次 †
概要 †
- 関数コンポーネントから使える新しい API
- API 上はuseから始まる名前のただの関数
- state等の機能をfunctionalコンポーネントでも使用可能にする。
- 従来は、classコンポーネントでしか使用できなかった。
- Redux を置き換えるものではない。
- が… Redux の機能を一部吸収
- Redux 使わずに React だけで完結できはする。
- Context と組み合わせることで、middleware なし Redux が簡単に実現できる。
- useContext の Hooks を使うと、Redux 風の Flux が再現できる。
- , etc.
- ...とあるものの、
- Reduxの方が優れている点もあり併用の提案もある。
- Redux自体も、まず消極的に、内部 API を変えるのに用いる、らしい。
- React開発チームは、
「長期的には、Hooksが React のコンポーネントを書く
際の第一選択となることを期待しています。」
と言っているので、今後のスタンダードになると予想される。
詳細 †
仕組 †
- Hooksは裏で配列を持ち、それを順番に呼び出している。
- React FiberのHooks版として実装されている。
- 呼び出す順番や回数がかわると問題が起きる。
規則 †
Hooksを使用する際の規則
- Hooksは必ずコンポーネント中の一番上(トップレベル)に定義する。
- HooksはReactの関数コンポーネントの中だけで呼ぶ。
- 禁止事項
- ifやforのブロックの中での呼び出し
- render以外のタイミングで呼び出す
種類 †
useState †
- クラスコンポーネントに頼らなくてもstateを持つことができる。
- useStateは、現在のstateとsetState関数を返す関数
useContext †
useEffect †
- 従来のReactの
- componentDidMount?
- componentDidUpdate?
- componentWillUnmount?
に相当する。
- useLayoutEffect?
レンダリング完了前に呼び出される。
useReducer †
- ReduxのReducer的なもの。
- useState の亜種で、ステートを宣言するフック
useMemo †
- 値がメモ化できる。
- 引数が前回値と同じ場合に計算をスキップして結果を再利用できる。
useXXX †
- 共通のロジックをコンポーネント間での再利用を可能にする。
- useXXXと言うSFCを実装してそれを利用する。
その他 †
- useDebugValue?
React DevTools? 内にカスタムフックに関するラベル付きデバッグメッセージを表示
参考 †
Qiita †
mizchi's blog †
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
