UseEffect React の舞台裏

useEffect について詳しく知り、react を深く理解する前に。 JavaScript のこれらの概念を理解しておくことをお勧めします。

https://www.geeksforgeeks.org/top-javascript-concepts-to-know-before-learning-react/

React 開発者として最も重要な概念の 1 つは、useEffect がどのように機能するかを理解することです。

使用効果の原則

UseEffect は、react コンポーネントで副作用を実行するために使用されます。

副作用とは何ですか?

副作用とは、React コンポーネントの範囲外の世界と対話する操作を指します。

何かを行うために反応コンポーネントの外側に到達する必要がある場合、副作用を実行します!!

いくつかの一般的な副作用:

• API からデータを取得しています。
• DOM ドキュメントとウィンドウを更新しています。
• タイマー関数 setTimeout および setInterval。

反応における useEffect の署名:

useEffect(
    () => {
        // execute side effect
    },
    // optional dependency array
    [
        // 0 or more entries
    ] 
)

または、次のコードでのみ動作します:

useEffect(() => { 
    // execute side effect
})

useEffect に関する基本理論を説明した後、実際の動作を確認してみましょう!!

useEffect を使用した簡単な例:

import {useState, useEffect} from "react";

export default function App() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `${count} new messages!`;
    })


    return (
        <>
            <h3>{ count } new Messages!</h3>   
            <button onClick={ () => setCount(count + 1) }>Increase</button>
        </>
  )
}

このコードでは何をしているのでしょうか?

• コンポーネントは最初、カウントを 0 に設定してレンダリングします。

• useEffect フックはドキュメントのタイトルを「0 件の新規メッセージ!」に更新します

ボタンをクリックしたとき:

• setCount 関数が呼び出され、カウント状態がインクリメントされます。
• コンポーネントは更新されたカウント値で再レンダリングされます。
• useEffect フックが再度トリガーされ、新しいカウントを反映するようにドキュメントのタイトルが更新されます。
• このコードは、React の useState フックと useEffect フックの基本的な使用法を示し、状態を管理し、副作用を実行し、ドキュメントのタイトルを更新する単純なカウンターを作成します。

useEffect はコンポーネントが変更されるたびに実行されます。

空の配列でEffect を使用

コードに小さな変更を加えます:

  useEffect(() => {
        document.title = `${count} new messages!`;
        console.log('Run useEffect');
    }, [])

useEffect のパラメータに空の配列を追加しています。

• コンポーネントが作成または初期化されるときにのみ実行されます。

データをフェッチするときに非常に便利です。その場合、コードの一部を 1 回だけ実行する必要があることがわかっています。

変数を使用した useEffect

useEffect のバリエーションとして、変数 (1 つ以上) を追加します。
この変数が変更されると、コードの一部が実行されます。

例を確認してみましょう:

import {useState, useEffect} from "react";

export default function App() {
    const [count, setCount] = useState(0);
    const [newCount, setNewCount] = useState(5);

    useEffect(() => {
        document.title = `${newCount} new messages!`;
        console.log('Run useEffect');
    }, [newCount])


    return (
        <div>
           <>
              <h3>{ count } new Messages!</h3>   
              <button onClick={ () => setCount(count + 1) }>Increase</button>
          </>

          <>
              <h3>{ newCount } new Messages!</h3>   
              <button onClick={ () => setNewCount(newCount + 5) }>Increase</button>
          </>
        </div>

  )
}

useState を持つ新しい変数を追加し、newCount に応じて useEffect を追加しました。

次の場合にレンダリングされます:

• コンポーネントの先頭で、newCount をページのタイトルに設定します。
• newCount var.の変更を検出した後

注: カンマを追加してさらに多くの変数を渡すことができます

useEffect(
    () => {
        // execute side effect
    },
    // optional dependency array
    [
        // 0 or more entries
    ] 
)

cleanUp 関数でエフェクトを使用

場合によっては、Promise などのいくつかの機能をクリーンアップする必要があります。

例を挙げて詳しく説明します。

タイマーを作成してページに表示します。

setInterval を使用してこれを行うことができますが、クリーンアップを実装しないと、タイマーがリソースを消費し、アプリが遅くなります。

したがって、clearInterval を返す必要があります。

ここにコードがあります。

useEffect(() => { 
    // execute side effect
})

結論:

useEffect について簡単に説明します。

useEffect.-

UseEffect は、react コンポーネントで副作用を実行するために使用されます。

次のような副作用が考えられます:

• API からデータを取得しています
• DOM の更新 - ドキュメント、ウィンドウ
• タイマー イベント - setInterval、setTimeOut

useEffect(コールバック、依存関係)

1 コールバックは関数 - SideEffect ロジック - 実行対象です。
2 依存関係 - 変数の配列 (オプション) - いつ実行するか。

最後に、useEffect の 3 つのバリエーションがあります:

1. 依存関係のない UseEffect - 最初のレンダリングで実行され、検出された変更でも実行されます。

2. 空の配列を使用した UseEffect - 最初のレンダリング時にのみ実行されます。

3. 変数を使用した UseEffect - 最初のレンダリング時に実行され、その変数の変更時に実行されます。

4. クリーンアップ関数を使用した UseEffect - タイムアウト、サブスクリプション、イベント リスナー、またはその他の関数をサブスクリプション解除するか、使用後に不要になり、クリーンアップ関数で破棄できます。

以上がUseEffect React の舞台裏の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。