React の UseState および UseEffect フック

React では、useState と useEffect は、状態を管理し、機能コンポーネントの副作用を処理するために使用される 2 つの基本的なフックです。

1.ステートフックの使用

useState フックを使用すると、機能コンポーネントに状態を追加できます。 2 つの要素を含む配列を返します:

1. 現在の状態の値。
2. その状態値を更新する関数。

例:

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable called 'count' with an initial value of 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* Update state using the setCount function */}
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

この例では:

• useState(0) は、カウント状態変数を値 0 で初期化します。
• setCount は、ボタンがクリックされたときに状態を更新するために使用されます。

2.エフェクトフックの使用

useEffect フックを使用すると、データのフェッチ、サブスクリプション、DOM の手動変更などの副作用をコンポーネントで実行できます。 2 つの引数を取ります:

1. 副作用ロジックを含む関数。
2. いつエフェクトを実行するかを決定する依存関係のオプションの配列。

例:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // useEffect runs after every render, but the dependency array makes it run only when `count` changes
  useEffect(() => {
    document.title = `You clicked ${count} times`;

    // Cleanup function (optional)
    return () => {
      console.log('Cleanup for count:', count);
    };
  }, [count]); // Dependency array

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Example;

この例では:

• useEffect は、カウントが変更されるたびにドキュメントのタイトルを更新します。
• カウントが依存関係配列に含まれているため、カウントが変更されると、エフェクトはレンダリングのたびに実行されます。
• オプションのクリーンアップ関数は、エフェクトが再度実行される前、またはコンポーネントがアンマウントされたときに実行されます。これは、サブスクリプションやタイマーをクリーンアップするのに役立ちます。

両方のフックは、機能コンポーネントの状態と副作用を効果的に管理するのに役立ち、React 開発をより簡潔かつ強力にします。
.
.
.

要約しましょう....
.
.
.

React の useState フックと useEffect フックの概要は次のとおりです。

ステートフックの使用

• 目的: 機能コンポーネントの状態を管理します。
• 構文: const [state, setState] = useState(initialValue);
• パラメータ:
  • InitialValue: 初期状態の値。
• 戻り値:
  • 2 つの要素を持つ配列:
  • state: 現在の状態の値。
  • setState: 状態を更新する関数。

使用例:

const [count, setCount] = useState(0);

useEffectフック

• 目的: データの取得、サブスクリプション、手動の DOM 更新などの機能コンポーネントの副作用を処理します。
• 構文: useEffect(() => { /* エフェクト ロジック */ }, [依存関係]);
• パラメータ:
  • 効果関数: 副作用として実行するコードが含まれています。
  • Dependency Array (オプション): 変更されたときに効果をトリガーする依存関係のリスト。空の場合、エフェクトは最初のレンダリング後に 1 回だけ実行されます。省略した場合、エフェクトはレンダリングのたびに実行されます。
• クリーンアップ関数 (オプション): リソースをクリーンアップするためにエフェクト関数から返される関数。

使用例:

useEffect(() => {
  document.title = `You clicked ${count} times`;
  return () => {
    // Cleanup logic here
  };
}, [count]);

キーポイント:

• useState は、機能コンポーネントの状態管理を簡素化します。
• useEffect は副作用を処理し、オプションでそれ自体の後にクリーンアップできます。
• 両方のフックが連携して、React で動的でステートフルな機能コンポーネントを作成します。

以上がReact の UseState および UseEffect フックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。