「.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の方が優れている点もあり併用の提案もある。
- 「HooksがReduxを廃れさせることは無い。」と言われている。
- Redux自体も「まず消極的に、内部 API を変えるために用いている。」らしい。
- React開発チームは、
「長期的には、Hooksが React のコンポーネントを書く
際の第一選択となることを期待しています。」
と言っているので、今後のスタンダードになると予想される。
詳細 †
仕組 †
- Hooksは裏で配列を持ち、それを順番に呼び出している。
- React FiberのHooks版として実装されている。
- 呼び出す順番や回数がかわると問題が起きる。
規則 †
Hooksを使用する際の規則
- Hooksは必ずコンポーネント中の一番上(トップレベル)に定義する。
- HooksはReactの関数コンポーネントの中だけで呼ぶ。
- 禁止事項
- ifやforのブロックの中での呼び出し
- render以外のタイミングで呼び出す
種類 †
useState †
- クラスコンポーネントに頼らなくてもstateを持つことができる。
- useStateは、現在のstateとsetState関数を返す関数
useReducer †
- ReduxのReducerとは少々違う。
- useStateよりも複雑なstateを管理するのに役立つ。
- Reduxがグローバルなstoreを提供し、アプリケーションのデータを集中管理する。
- useReducer は特定のコンポーネントにローカライズされている。
useContext †
useEffect †
- 従来のReactの
- componentDidMount?
- componentDidUpdate?
- componentWillUnmount?
に相当する。
- useLayoutEffect?
レンダリング完了前に呼び出される。
useMemo †
- 値がメモ化できる。
- 引数が前回値と同じ場合に計算を
スキップして結果を再利用できる。
useXXX †
- 共通のロジックをコンポーネント間での再利用を可能にする。
- useXXXと言うSFCを実装してそれを利用する。
その他 †
- useDebugValue?
React DevTools? 内にカスタムフックに関するラベル付きデバッグメッセージを表示
参考 †
React †
Qiita †
mizchi's blog †