React の useState フックをマスターする: 基本と高度な使用例

React で State フックを使用する

useState フックは、React で最もよく使用されるフックの 1 つです。これにより、機能コンポーネントに状態を追加できます。フックが導入される前は、状態はクラス コンポーネント内でのみ使用できましたが、useState を使用すると、機能コンポーネント内でも状態を使用できるようになります。これにより、機能コンポーネントがより強力かつ柔軟になります。

useState とは何ですか?

useState は、機能コンポーネントで状態変数を宣言できるようにする関数です。 2 つの要素を含む配列を返します:

1. 現在の状態値 — コンポーネントにアクセスして表示できる実際の状態値。
2. その状態を更新する関数 — 状態変数の値を変更できる関数。

構文

const [state, setState] = useState(initialState);

• state は現在の状態の値です。
• setState は、状態を更新するために使用する関数です。
• initialState は、コンポーネントが最初にレンダリングされるときに状態が持つ初期値です。

使用例

基本的な例:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);  // Initial state is set to 0

  const increment = () => {
    setCount(count + 1);  // Update state using the setCount function
  };

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

• 説明:
  • useState(0) は、初期カウント値を 0 に設定します。
  • setCount は、ボタンがクリックされたときにカウントを更新するために使用され、更新されたカウントで再レンダリングがトリガーされます。

機能アップデートの使用:

新しい状態が前の状態に依存する場合、setState に関数を渡すことができます。これにより、最新の状態値に基づいて更新が確実に行われます。

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

const increment = () => {
  setCount(prevCount => prevCount + 1);  // Functional update to ensure accurate state updates
};

• 説明: ここで、prevCount は前の状態の値であり、関数はその値に基づいて新しい状態を返します。

複数の状態変数:

コンポーネント内で useState を複数回使用して、さまざまな状態を管理できます。

import React, { useState } from 'react';

const MultiStateComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Name: {name}</p>
      <button onClick={() => setName('Doe')}>Change Name</button>
    </div>
  );
};

• 説明: ここでは、2 つの別個の状態変数 (カウントと名前) が独立して管理されます。

遅延初期化

初期状態が複雑であるか、計算が必要な場合は、コンポーネントが最初にレンダリングされるときにのみ実行される関数を useState に渡すことができます。

const [state, setState] = useState(initialState);

• 説明: この手法は、最初のレンダリング中に 1 回計算する必要がある計算または副作用に基づいて状態を初期化する場合に便利です。

オブジェクトまたは配列による状態の更新

状態がオブジェクトまたは配列の場合、setState 関数は指定した状態の特定の部分のみを更新します。 React はディープ マージを実行しないため、状態オブジェクトの一部を変更する場合は、状態オブジェクト全体を明示的に更新する必要があります。

オブジェクトの状態を更新しています:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);  // Initial state is set to 0

  const increment = () => {
    setCount(count + 1);  // Update state using the setCount function
  };

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

• 説明: setUser は、前の状態を展開し、name プロパティを変更することで状態オブジェクトを更新するために使用されます。

配列の状態を更新しています:

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

const increment = () => {
  setCount(prevCount => prevCount + 1);  // Functional update to ensure accurate state updates
};

• 説明: スプレッド演算子 (...prevItems) を使用して、前の項目と新しい項目 ('orange') を含む新しい配列を作成します。

避けるべき一般的な落とし穴

1. 状態を直接変更する: 状態を直接変更しないでください (例: state = newState)。 React が DOM を正しく更新できるように、常に setState 関数を使用してください。

import React, { useState } from 'react';

const MultiStateComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Name: {name}</p>
      <button onClick={() => setName('Doe')}>Change Name</button>
    </div>
  );
};

1. 状態の更新は非同期です: React は状態の更新をバッチ処理します。つまり、setState を呼び出した直後には状態が更新されない可能性があります。これは、前の状態を使用して新しい状態を計算する場合に特に重要です。

使用状態の概要:

• useState を使用すると、機能コンポーネントに状態を追加できます。
• 現在の状態とそれを更新する関数の配列を返します。
• 初期状態は、値 (数値、文字列、ブール値など) またはオブジェクト/配列です。
• 複数の useState 呼び出しを使用して、コンポーネント内のさまざまな状態を管理できます。
• 状態の更新は非同期なので、直接実行しないでください。

結論

useState フックは、コンポーネントの状態を管理するための React の基本的な構成要素です。これにより、機能コンポーネントが独自のローカル状態を持つことができるようになり、コードがよりモジュール化され、理解しやすくなります。 useState を使用すると、ユーザー入力またはイベントに応答する動的で対話型のコンポーネントを構築できます。

---

以上がReact の useState フックをマスターする: 基本と高度な使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。