React Hook
React公式ドキュメント：フックはReact 16.8の新機能です。クラスを記述することなく、ステートやその他のReactの機能を使用できるようになります。
リアクトフックは、クラスのすべてを達成することができますが、また、クラスコンポーネントの問題のいくつかを解決したので、どのような理由Reactフックを受け入れることができないのですか？
クラスコンポーネントの問題のいくつか
- コンポーネント間でステートロジックを再利用するのが難しい
- 複雑なコンポーネントを理解するのが難しい
- クラス・コンポーネントの理解の問題
React Hooksは、このような問題を解決するのに非常に適しています。例えば、1つ目の問題では、カスタムHookを使うことで、この問題を解決することができます。新人の私としては、今回は彼女をしっかりと抱きしめなければなりません。
現在のReactの組み込みHook API
- 一般的なフック
- useState
- useEffect
- useContext
- useReducer
- useMemo
- useCallback
- useRef
- その他のHook
- useImperativeHandle
- useLayoutEffect
- useDebugValue
useState
ファンクションコンポーネントでステートを使用する必要がある場合、クラスコンポーネントに変換するしかありませんでしたが、useStateを使用することで、ファンクションコンポーネントにステートを書き込むことができるようになりました。
useStateは1つのパラメータを取り、配列を返します。
上記のuseStateの意味は、カウントを宣言し、初期値0を与える。reactが再レンダリングするときに、この変数を読み込んで使うことができる。
最後の値は更新時に記憶され、setCount関数に渡される。末尾の名前も同じ意味であり、ここでの要点は、複数宣言できることの意味を説明することである；
(注意：useStateは、if関数の中からは呼び出せない。...else...このように条件文の中でHookを呼び出し、トップレベルでのみ使用することで、Hookが呼び出されるたびに確実に使用されるようになる。
はすべて、レンダリングにおいて同じ順序で呼び出される。これにより、ReactはuseStateとuseEffectを複数回呼び出す間、フックの状態を正しく保つことができる）。
useEffect
クラスコンポーネントの使用では、componentDidMountまたはcomponentDidUpdateに要求などを送信する必要がありますが、また、componentWillUnMountで以前の機能コンポーネントの副作用をクリアするためにいくつかのことを行うには、ライフサイクルを持っていない、当然対処することはできませんが、今があります。useEffectは、彼女はあなたが関数コンポーネントの操作で副作用を実行することができます、あなたもクリア副作用の操作を行うことができます、一般的にクールです！コードを見てみましょう
useEffect
1, ReactuseEffect関数は、最初のレンダリングで1回、その後のレンダリングで1回呼び出され、最初のレンダリングを表す2つのライフサイクル関数（componentDidM
onut)このように、React Functionsの中でしかHookを呼び出さないことで、内部状態と対応するHookを正しく関連付けることができる。
2, useEffectcomponentDidMoutで定義された関数の実行は、ブラウザによるビューの更新を妨げない、つまり非同期に実行されるのに対し、componentDidMoutとcomponentDidMoutは非同期に実行される。
Updateのコードは
3,useEffectバインドの解除は関数を返す形で行うことができ、useEffectが第2引数を書かない場合、実際には状態が変わるたびにバインドが解除される。
空の配列が2番目のパラメータとして渡された場合、それらはコンポーネントが破棄されたときにのみアンバインドされる; それらはレンダリング時に作成されるが、ブラウザが描画された後に実行される。詳細はこのスレッドの後半を参照のこと！
useContext
useContext は、コンポーネントのレベルを越えてデータを共有し、変数を渡すことができます。注意： useContext のパラメータはコンテキストオブジェクト自身でなければなりません。使い方は以下の通りです！
ちょっと適当だが、悪しからず！useContextを呼び出すコンポーネントは、コンテキストの値が変わると必ず再レンダリングする。
useContextuseContextは、コンテキストの値を読んだり、コンテキストの変更をサブスクライブしたりできる。
useReducer
useReducerは2つの引数を取ります。1つ目はreducer関数、2つ目は初期状態です。reduxのreducerも全く同じで、どちらも純粋な関数で、状態とアクションを受け取り、それを新しい状態に変換して返します。
ひとつはreduxサイトでのreducerの使用例、もうひとつはuseReducerの使用例で、あまり変わっていないので一目で理解できるはずだ。
useMemo
useMemoは、主にReact Hooksの冗長なレンダリング問題を解決するためのパフォーマンス最適化ツールとして使用されます。shouldComponentDidUpdateのようなライフサイクル関数がないため、コンポーネントを再レンダリングするために何らかの状態変化を判定することができません。useMemoはこの冗長なレンダリング問題を解決するためのものです！
useRef
useRefはあまり使われないので、私がよく知っている使い方をいくつか紹介します！ useRefは、.current属性が渡されたパラメータに初期化された、変更可能なrefオブジェクトを返します。返されたrefオブジェクトは、コンポーネントの寿命が尽きるまで変化しません。これがすべての基本です。
使い方 1: useRef を使用して DOM 要素を取得し、それを直接操作します（公式ドキュメントから直接拝借）。
使用法 2: 一時的に変数を保存します。
useCallback
useCallback の目的は、useMemo と併用される memo と連動して、サブコンポーネントのレンダリング時間を最適化することです。useMemo は現在のコンポーネントのレンダリングを最適化し、useCallback はサブコンポーネントのレンダリングを最適化します。
useImperativeHandle、useLayoutEffect、useDebugValueこれら3つのフックについては、次回以降に話すとして、これらの3つは、表現するのに十分なほど慣れているときには、あまり使いません！
フックのルールについて話しましょう
フックは基本的にJavaScriptの関数ですが、使用する際には2つのルールがあります。
条件1：フックはトップレベルでしか使わない
関数コンポーネントにthisがないため、どの状態がどのsetStateに対応するかを確認する方法がなく、Reactはこれを確認するためにHookの呼び出し順序に依存するため、Hookはトップレベルに配置されます。ReactはHookの呼び出し順序に依存して確認するため、Hookは階層の最上位に配置され、実行順序に影響を与えるif判定なしで実行されるため、内部状態は対応するHookに正しく関連付けられます。
条件2：HooksはReact関数の中でしか呼び出されません。
記事を書くのは本当に大変ですが、心のあるところで頑張ります！
