反応フック:5分で説明される効能

反応アプリを構築するとき、コンポーネントがレンダリングされた後にコードの一部を実行したい場合(APIからデータを1つの例として取り出すと思う)があります.
前にフックを反応するには、我々のアプリケーションを使用して、このタイプの機能を与えるlifecycle methods (コンポーネントのマウント、コンポーネントdidupdate、およびコンポーネントのマウントを解除します).有効なフックは本質的にそれらの3つのメソッドを1つの便利な機能にロールバックすることができます.
動作方法
useEffectフックは、2つの引数をとる関数です.コンポーネントがレンダリングされた後に実行される関数と依存配列です.依存関係の配列は省略可能です.詳細についてはもう少し詳細に説明しますが、この関数は、どのように頻繁に有効かどうかを制限することができるということです.必ずインポートする
使い方

インポートからの効果

UseEffect関数を追加し、関数(および依存する配列を渡した場合には以下の情報を渡します)

一つのことは、ある状況においては、クリーンアップ機能を返すことによって実行されるuseeffect関数をクリーンアップしたいということです.あなたはUseEffectの後にクリーンアップについての詳細を読むことができますhere または見て.
例:
依存配列のない単純なカウンタ例

// 1. Import useEffect from React
import React, {useState, useEffect} from 'react';
import './App.css';

function App() {
const [count, setCount] = useState(0)
const [clicks, setClicks] = useState(0)

// 2. Add useEffect function and pass it the function 
  useEffect(() => {console.log(`Count was updated: count is ${count} and you've clicked the console.log button ${clicks} time(s)`)})
  // Because there is no dependency array, the function inside useEffect will run everytime our App component is rendered, so essentially whenever count / clicks changes.

  return (
    <div>
      {count}
      <button onClick={() => setCount(currentCount => currentCount - 1)}>-</button>
      <button onClick={() => setCount(currentCount => currentCount + 1)}>+</button>

      <button onClick={() => setClicks(currentClicks => currentClicks + 1)}>console.log</button>
    </div>
  )
}

export default App;

依存配列
依存配列を使用できる2つの方法があります.

空の配列を渡すと、コンポーネントの最初のレンダリングに有効な効果がトリガーされます

依存関係を持つ配列を渡す(この例では、count変数).この依存関係の配列の何かが変化した場合にのみ有効な関数をトリガーします(この場合、count変数).

空の依存配列を持つ単純なカウンタ例

// 1. Import useEffect from React
import React, {useState, useEffect} from 'react';
import './App.css';

function App() {
const [count, setCount] = useState(0)
const [clicks, setClicks] = useState(0)

// 2. Add useEffect function and pass it the function and empty dependency array
  useEffect(() => {console.log(`Count was updated: count is ${count} and you've clicked the console.log button ${clicks} time(s)`)},[])
  // Because there is an empty dependency array, the function inside useEffect will run after the initial render of our app, and thats it.

  return (
    <div>
      {count}
      <button onClick={() => setCount(currentCount => currentCount - 1)}>-</button>
      <button onClick={() => setCount(currentCount => currentCount + 1)}>+</button>

      <button onClick={() => setClicks(currentClicks => currentClicks + 1)}>console.log</button>
    </div>
  )
}

export default App;

カウント変数を含む依存配列を持つ単純なカウンタ例

// 1. Import useEffect from React
import React, {useState, useEffect} from 'react';
import './App.css';

function App() {
const [count, setCount] = useState(0)
const [clicks, setClicks] = useState(0)

// 2. Add useEffect function and pass it the function and empty dependency array
  useEffect(() => {console.log(`Count was updated: count is ${count} and you've clicked the console.log button ${clicks} time(s)`)},[count])
  // Because we included count in the dependency array, the function inside useEffect will run everytime the value of count changes.

  return (
    <div>
      {count}
      <button onClick={() => setCount(currentCount => currentCount - 1)}>-</button>
      <button onClick={() => setCount(currentCount => currentCount + 1)}>+</button>

      <button onClick={() => setClicks(currentClicks => currentClicks + 1)}>console.log</button>
    </div>
  )
}

export default App;

自分で試してみて
これは、常にこのタイプの機能をtrying it out yourself . Replyに頭を戻し、repoをフォークし、これらのuseeffect例の各々をそれを複製にコピーして試してください.おそらく、コンソールを見ることができません.ログのメッセージ自体は、ので、[プレビュー]ウィンドウの上に見つかった[新しい]タブのボタンをクリックして→ コンソール
1 - no依存配列-すべてのレンダリングの後に実行されます-初期のアプリケーションのレンダリング、ときにカウンタが増加または減少し、コンソール時に.ログをクリックする

useEffect(() => {console.log(`Count was updated: count is ${count} and you've clicked the console.log button ${clicks} time(s)`)})

UE 2 -空の依存配列-私たちのアプリの最初のレンダリングの後にのみ実行されます

useEffect(() => {console.log(`Count was updated: count is ${count} and you've clicked the console.log button ${clicks} time(s)`)},[])

ue 3 - count -依存配列は'-'または'+'でcountを変更した後にのみ実行されます.コンソールで何も起こらない.ログをクリックする

useEffect(() => {console.log(`Count was updated: count is ${count} and you've clicked the console.log button ${clicks} time(s)`)},[count])

いつものように、もっと詳しい情報はDocsを参照してください.
Effect Hook
ご質問、フィードバック、または単に接続するために私の社会のいずれかに手を差し伸べる👋.