React Hooks：ディープカット

Hooks are reusable functions that allow you to use state and other functions (such as lifecycle methods, etc.) without writing classes.フック関数を使用すると、関数コンポーネントを使用してReact状態ライフサイクルを「フック」することで、クラスコンポーネントに変換せずに関数コンポーネントの状態を操作できます。

Reactはバージョン16.8にフックを導入し、それ以来フックを追加しています。一部のフックは、 useefect 、 ueseState 、 usecontext など、他のフックよりも一般的に使用され、人気があります。 Reactを使用する場合、これらのフックを使用したに違いないと思います。

しかし、私が興味を持っているのは、あまり知られていない反応フックです。すべてのReactフックには独自の機能がありますが、日々の仕事に登場しないかもしれないので、5つのフックを見せたいです。

カタログ

• usereducer
• useref>
• useimperativehandle> 3> <code> usereducer

  usereducer フックは、他のフックと同様のステータス管理ツールです。具体的には、これは usestate フックの代替です。

  usereducer フックを使用して2つ以上の状態（またはアクション）を変更する場合、個別に操作する必要はありません。フックはすべての状態を追跡し、集合的に管理します。言い換えれば、状態の変更を管理および再レンダリングします。 ueseState hookとは異なり、 usereducer は、複雑なプロジェクトで多くの州を扱うときに簡単です。

  使用シナリオ

  usereducer は、複数の状態の取り扱いの複雑さを減らすのに役立ちます。州の管理を扱い、コンポーネントのロジックを個別の懸念としてレンダリングすることができるため、複数の状態を集合的に追跡する必要があるとわかるときに使用できます。

  構文

  usereducer は3つのパラメーターを受け入れます教育者（reducer、initialstate、initfunction）//オプションの3番目のパラメーターを使用した初期化

  次の例は、テキスト入力、カウンター、およびボタンを含むインターフェイスです。各要素と対話すると、ステータスが更新されます。 usereducer を使用すると、個別に設定するのではなく、複数のケースを一度に定義できることに注意してください。

   const reducer =＆gt; 'toggle_color'：return {... state、color： ！state.color}; default：new error（）} const [dispatch] = usereducer（count：0、userinput： ''、color：false}） =>ディスパッチ（{type： 'user_input'、ペイロード： e.target.value}）}/＆gt; <br>  <p style="{{10px"> {state.count} </p> <button onclick="{（）="> dispatch（{type：' decriment '}} }）}＆gt </button> <button onclick=""> dispatch（ 'toggle_color'}）}＆gt> <button> dispatch（{type： 'golggle_color'}}＆gt; <br>   <p style="{{marge："> {state.userinput} </p> ）}上記のコードから、</button></button>

  。これは、複数の状態を持つ複雑なアプリケーションで作業するときに提供する力です。

  useref

  useref フックは、要素の参照を作成してDOMにアクセスするために使用されます。しかし、それだけでなく、 .current 属性を持つオブジェクトを返します。これは、コンポーネントの寿命を通じて使用できるため、再レンダリングを引き起こすことなくデータを持続できます。したがって、 useref 値は、レンダリングの間に変更されていません。

  使用シナリオ

  必要な場合：

  • 格納された変数情報でDOMを操作します。
  • 子供のコンポーネント（ネック付き要素）の情報にアクセスします。
  • 要素に焦点を合わせます。

  useref フックを使用できます。再レンダリングを引き起こすことなく、アプリケーションに変数データを保存する場合に最も便利です。

  syntax

  useref は、1つのパラメーターのみ、つまり初期値のみを受け入れます。

   const newRefComponent = useref（initialValue）; 

  例

  ここでは、 useref and ueseState フックを使用して、アプリケーションがテキスト入力のタイプとして更新状態を再変換する回数を表示しました。

  ）;}デフォルトアプリ; 

  テキストフィールドに各文字を入力すると、アプリケーションのステータスが更新されますが、完全な再レンダリングはトリガーされないことに注意してください。

  useimperativehandle

  子コンポーネントが親コンポーネントから渡された機能にどのようにアクセスするか知っていますか？親コンポーネントはこれらの機能を小道具に渡しますが、親コンポーネントが子コンポーネントの関数を呼び出すことができないため、この種のパスは「一方向」です。

  それから、 useimperativehandle 親コンポーネントが子供の関数にアクセスできるようにします。

  これはどのように機能しますか？

  • 子コンポーネントの関数を定義します。
  • 親コンポーネントにrefを追加します。
  • worwardref を使用します。これにより、定義されたREFを子供コンポーネントに渡すことができます。
  • useimperativativehandle ref。

  使用シナリオ

  useimperativativehandle は、子コンポーネントの変化の影響を受けられる場合にうまく機能します。したがって、焦点の変更、増加、減少、要素のぼやけなどの場合は、親コンポーネントをそれに応じて更新するためにこのフックを使用する必要があると感じる場合があります。

  syntax

   useimperativehandle（ref、createhandle、[依存関係]） <p>この例では、親コンポーネントに1つ、子コンポーネントに1つのボタンがあります。親コンポーネントからデータを取得できるように、親コンポーネントを操作できるようになります。子をクリックすると、親コンポーネントからチャイルドコンポーネントに何も渡されないということでセットアップされ、コンテンツを反対方向に渡す方法を説明するのに役立ちます。 </p> <pre class="brush:php;toolbar:false"> //「useref}」から「useref」。 ）; /> ）;}デフォルトの親コンポーネント; 

   // {forwardref、useimperativehandle、usestate} const forwardref（（props、Ref）=＆gt; int（！print）、}）; box  {print＆amp; <p>私は</p>} ）;最も一般的ではないが興味深い反応フックの1つです。特にアプリケーションでの大規模なコンピューティングでは、パフォーマンスを向上させ、遅延を軽減します。これはどうやって起こるのでしょうか？ <code> usememo </code>フックは、コンポーネントの状態が更新され、コンポーネントが再レンダリングされるたびに、値の再計算を防ぎます。  <p>関数が状態の変化に応答することがわかります。 <code> usememo </code> hookは関数を受け入れ、<strong>関数の返品値を返します</strong>。価値をキャッシュして、余分な作業が費やされて再レンダリングされないようにし、依存関係の1つが変更されたときにそれを返します。 </p> <p>このプロセスは<strong>暗記</strong>と呼ばれます。これは、以前に要求された値を記憶することでパフォーマンスを改善するのに役立ち、これらすべての計算を繰り返すことなく再度使用できます。 </p> <h4>使用シナリオ</h4> <p>最良のユースケースは、値を保存したいという重度の計算を扱っていて、それをその後の状態の変更で使用するときにいつでも行われます。それは素晴らしいパフォーマンスを高めることができますが、それの過剰使用は正反対の効果を持つことができ、したがってアプリケーションのメモリを取り上げます。 </p> <h4> syntax </h4> <pre class="brush:php;toolbar:false"> usememo（（）=＆gt; {// code here}、[]）

  例

  ボタンをクリックすると、このミニプログラムは数字が偶数か奇数であるかを示し、その後値は価値を示します。計算能力を高めるために、ループに多くのゼロを追加しました。値を数秒で返し、 usememo hookのためにまだ正常に動作しています。

   // usememo.jsインポート{usestate、usememo} {const [memoone、setmemoone] = useState（0）=（）=＆gt; 1000000000）{i} //計算額を増やしますmemoone％2 ===} squarednumber = usememo（（）=＆gt; {let i = 0; > <p> {iseven？ ;）デフォルトメモをエクスポート; </p>

  出力

  ...（サンプル出力スクリーンショットまたは説明はここに含める必要があります

  関数自体を返します。

  usecallback

  フックはもう1つの興味深いフックであり、前のセクションはその機能のネタバレです。

  見たように、 usecallback は usememo フックと同様に動作します。 usememo は、関数の計算をキャッシュ値として保存し、 usecallback を保存して返します。

  使用シナリオ

  usecallback は、覚えたコールバックとその依存関係を再貸し出しなしで保管および返品するため、優れたパフォーマンスの最適化です。

  syntax

   const getMemoizedCallback（（）=＆gt; {dosomething（）}、[]）; 

  -child "; import" ./app.css "export default function app（）{const [toggle、sittoggle] = uesestate（false）; const [data、 setData] = ueseState（「私はすべてのレンダリングで変更されないデータです」const returnfunction = usecallback（（name）=＆gt; {return data name;}、[data]、

  /サブコンポーネント

   {use effect} from "React" {returnfunction}） {returnfunction（ "hook！"）} ; <p> ...（サンプル出力のサンプルまたは説明をここに含める必要があります）</p> <p> </p><h3>要約</h3>  <p> </p><p>それだけです！私たちは、しばしば見落とされていると思う5つの非常に便利な反応フックを見ました。多くのそのようなレビューと同様に、これらのフックの表面に触れます。彼らはそれぞれ、それらを使用する際に考慮する必要がある独自の微妙さと予防策を持っています。しかし、うまくいけば、あなたはそれらが何であるか、そしてそれらが他のフックよりも適しているときの良い高度なコンセプトを持っていることを願っています。 </p>  <p> </p><p>それらを完全に理解する最良の方法は練習です。したがって、アプリでこれらのフックを使用して練習して、それらをよりよく理解することをお勧めします。これを行うには、次のリソースを見ることでそれについて詳しく知ることができます：</p>  <pre class="brush:php;toolbar:false"> <code>  -  intro to react fooks（kingsley silas） - フックチートシート（オハンズエマニュエル） - 反応ライフサイクルのサークル（キングスレーシラ） /code> </code>

以上がReact Hooks：ディープカットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。