有効なフックフック

ようこそ!
これは、我々は反応で使用される別のフックについて学んでいる反応フックシリーズで2番目のブログです、そして私たちの今日のフックはuseEffect フック.始める前に、このシリーズの最後のブログを読むことをお勧めしますuseState Hook . このフックは完全に独立していますがuseState フック、あなたが読むことができますし、フックの任意の事前知識なしでそれから学ぶ、フックのいくつかの基本的な理解を持って有益です.

どのような反応で使用するフックの使用ですか？

The useEffect フックは副作用を実行するために我々のコンポーネントで使用されます.副作用は、通常のコンポーネント評価の外部で発生するタスクです.データ取得、Web API、および手動でDOMを変更する副作用のいくつかの例です.

UseEffectフックの使い方

インポート用フック

次のコードを使用して、反応ライブラリから破壊することによってインポートできます.

import {useEffect} from "react"

UseEffectフックの構文

useEffect (  <function> , [dependency] )

二つの引数があります.
( i )最初は、すべてのレンダリングに対して呼び出される関数ですdependence が提供されます.
( 2 )第2引数はdependence を指定します.useEffect 変更した場合は、指定した関数を呼び出します.

なぜ依存関係を使うのか

前述の通りuseEffect フックは、すべてのレンダリングで、無限ループで結果として、ブラウザをクラッシュコールします.しかしながら、依存性を提供することによってそれを避ける方法があります.
依存性として空の配列[]を提供する

 useEffect( () =>{

// it will run only on the first render

},[]}

2 )依存関係として小道具または状態を提供する

useEffect( () =>{

// it will run on the first render
// it will also run every time the given dependencies changes

},[  props , state  ]}

ファイルをチェックNonEmptyDependency.js , and EmptyDependency.js . そして、例をよく理解するために、以下のCodesandBoxのコンソールを見てください.

クリーンアップ機能

ユーザのIDを通して特定のユーザのフェッチを取得するが、フェッチが完了する前に、私たちは自分の考えを変え、別のユーザを得ることを試みる.前の検索要求はまだ進行中です、prop、またはこの例では、id、更新.
アプリケーションをメモリリークに晒すのを避けるために、クリーンアップ関数を使用してフェッチをキャンセルしなければなりません.
毎回useEffect が呼び出されると、クリーンアップ関数も最初のレンダリングを除いて実行されます.
タイムアウト関数をuseEffect 次のコード表示ボックスにフックします.
それはこのブログのためのすべてです.この反応フックシリーズは、反応フックについての詳細をご覧ください.次のブログでは、「usecontext」フックを見てみましょう.
以下のコメントであなたの貴重なフィードバックを残してお気軽に.
反応、JavaScript、およびWeb開発の詳細については、私に従ってください.
参考文献: w 3 schoolBlog