「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-[[戻る>React#aac76e99]]
*目次 [#q312d80d]
#contents
*概要 [#n794f895]
-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]] のコンポーネントを書く~
際の第一選択となることを期待しています。」
>と言っているので、今後のスタンダードになると予想される。
*詳細 [#lb526436]
**仕組 [#k08d4a55]
-Hooksは裏で配列を持ち、それを順番に呼び出している。
-[[React Fiber>React#t1dfc69f]]のHooks版として実装されている。
-呼び出す順番や回数がかわると問題が起きる。
-参考
--React HooksのuseStateがどういう原理で実現~
されてるのかさっぱりわからなかったので調べてみた~
https://sbfl.net/blog/2019/02/09/react-hooks-usestate/
**規則 [#g6b8af16]
Hooksを使用する際の規則
+Hooksは必ずコンポーネント中の一番上(トップレベル)に定義する。
+Hooksは[[React]]の関数コンポーネントの中だけで呼ぶ。
+禁止事項
++ifやforのブロックの中での呼び出し
++render以外のタイミングで呼び出す
**種類 [#w72dbc24]
***useState [#p944d91c]
-クラスコンポーネントに頼らなくてもstateを持つことができる。
-useStateは、現在のstateとsetState関数を返す関数
***useReducer [#u451f35c]
-[[useState>#p944d91c]]の亜種
-[[Redux]]のReducerとは少々違う。
--[[useState>#p944d91c]]よりも複雑なstateを管理するのに役立つ。
--Reduxがグローバルなstoreを提供し、アプリケーションのデータを集中管理する。
--useReducer は特定のコンポーネントにローカライズされている。
***useContext [#je862d2b]
-バケツリレー（prop drilling）問題を解決する。
-[[React.createContext()>React#b2c7d64b]]で作ったコンテキストを取得できるようになる。
-アプリケーション全体のデータは[[Redux]]で管理したほうが良い。
***useEffect [#jbd1ed36]
-レンダリングの後に処理を動作させることができる。
-従来の[[React]]の
--componentDidMount
--componentDidUpdate
--componentWillUnmount
>に相当する。
-useLayoutEffect~
レンダリング完了前に呼び出される。
***useMemo [#v92bdccb]
-値がメモ化できる。
-引数が前回値と同じ場合に計算を~
スキップして結果を再利用できる。
***useXXX [#zd063624]
-共通のロジックをコンポーネント間での再利用を可能にする。
-useXXXと言うSFCを実装してそれを利用する。
***その他 [#zda1c995]
-useCallback~
useMemoの亜種
-useRef~
[[React.createRef>React#ddbc9230]] のオブジェクト（refs）を返す。
-useDebugValue~
React DevTools 内にカスタムフックに関するラベル付きデバッグメッセージを表示
*参考 [#yf728fb8]
-[[React 副作用分割パターン - mizdra>https://scrapbox.io/mizdra/React_%E5%89%AF%E4%BD%9C%E7%94%A8%E5%88%86%E5%89%B2%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3]]
-React16.8 というものがリリースされたらしい - bamch0h’s diary~
http://bamch0h.hatenablog.com/entry/2019/02/08/001057
-最近Reactを始めた人向けのReact Hooks入門~
https://sbfl.net/blog/2019/11/12/react-hooks-introduction/
-React Hooksとは？各Hooksの使い方やルールを紹介~
https://microcms.io/blog/what-is-react-hooks/
**React [#i5a65162]
-フックの導入~
https://ja.reactjs.org/docs/hooks-intro.html
-フック早わかり~
https://ja.reactjs.org/docs/hooks-overview.html
**Qiita [#a1eafb16]
-[[React>#i5a65162]]の記事の翻訳
--React Hooksの概要~
https://qiita.com/tatane616/items/01d6358be5e4e4779232
--React Hooks導入の動機~
https://qiita.com/tatane616/items/9d667e32b6f82f9f7a9f
-React Reduxに相当するものをhooksでやってみる~
https://qiita.com/eretica/items/beb683d7611de1f8746a
-5分でわかるReact Hooks~
https://qiita.com/Mitsuzara/items/98d1bc4a83265a764084
-【React】ざっくり入門(Hooks)~
https://qiita.com/k-penguin-sato/items/b27e3936f8d383a4dbc7
-おまえはReact hooksを知っているか~
https://qiita.com/hystking/items/2a082ee86dc0b66793cb
-React Hooks超入門~
https://qiita.com/ossan-engineer/items/99739b60b391c8013928
--React Hooksがよくわかる4つの例~
https://qiita.com/ossan-engineer/items/a183bade1e37174f0459
--useReducerフック活用法~
https://qiita.com/ossan-engineer/items/1192c224e4252ec0f421
--useEffectフックのしくみ~
https://qiita.com/ossan-engineer/items/740425a0df937a47e093
--useContextのしくみ~
https://qiita.com/ossan-engineer/items/8f2640e4ee053b353943
--React Hooksでデータを取得する方法~
https://qiita.com/ossan-engineer/items/c3853315f59dc20bc9dc
-【暫定版】React16.8.6の個人的なベストプラクティス~
https://qiita.com/katatu801/items/89952b4ea8ca62dbdc73
-宣言的UIはReact Hooksで完成に至り、現代的設計論が必須の時代になる~
https://qiita.com/erukiti/items/fb7bcbd9d79696579d06
-🎉React 16.8: 正式版となったReact Hooksを今さら総ざらいする~
https://qiita.com/uhyo/items/246fb1f30acfeb7699da
**mizchi's blog [#nc5455dd]
-React Hooks での状態管理と副作用の表現~
https://mizchi.hatenablog.com/entry/2018/10/26/235323
-React Hooks をどう使っていくか~
https://mizchi.hatenablog.com/entry/2018/11/09/125252
-実践: React Hooks~
https://mizchi.hatenablog.com/entry/2019/02/08/154010
**[[Reactの5thステップ]] [#i3b025a0]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
