ReactJS useState フック: 初心者ガイド

導入

ユーザー インターフェイスを構築するための人気のある JavaScript ライブラリである

ReactJS には、コンポーネント ロジックを簡素化および強化するための フック が導入されています。 React で最もよく使用されるフックの 1 つは useState フックで、コンポーネントの状態を管理します。これがどのように機能するかを理解すると、React の可能性を最大限に引き出すことができます。

この初心者向けガイドでは、フックとは何か、useState を使用して状態を初期化および更新する方法、およびさまざまな種類の状態の保持と更新について詳しく説明します。最終的には、コンポーネント内の状態を自信を持って管理できるようになります。飛び込みましょう!

フックとは何ですか?

React のフック

フックは、クラス コンポーネントを作成せずに state やその他の React 機能を使用できるようにする関数です。フックが登場する前は、コンポーネントの状態の管理はクラス コンポーネント内でのみ可能でした。 useState のようなフックを使用すると、機能コンポーネントに状態を追加して、機能コンポーネントをより多用途にすることができます。

React は次のようないくつかのフックを提供します:

• useState – 状態の管理用。
• useEffect – データの取得などの副作用用。
• useContext – アプリケーション内のコンテキストを管理します。

フックは状態管理を簡素化し、複雑なクラスベースのコンポーネントの必要性を減らします。フックの美しさは、よりクリーンで読みやすいコードを維持しながら、必要な機能を提供できることにあります。

---

useStateを初期化する方法

基本的な初期化

機能コンポーネントでの useState の初期化は簡単です。まず、React からフックをインポートし、コンポーネント内でそれを呼び出します。構文は次のようになります:

import React, { useState } from 'react';

function Counter() {
  // Declare state variable and its updater function
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>
        Click me
      
    
  );
}

壊す：

• useState(0) は、状態を初期値 0 で初期化します。
• count は 状態変数 で、setCount はこの状態を更新するために使用される 関数 です。
ボタンをクリックするたびに状態が更新され、コンポーネントは新しい値で再レンダリングされます。

---

状態の見方

現在の状態へのアクセス

現在の状態を読み取るのは簡単です。状態変数 (前の例では count) を JSX 内で直接使用するだけです。 React は状態が変化するとコンポーネントを再レンダリングするため、更新された値が自動的に UI に反映されます。

前の例を微調整して、状態にアクセスする方法を示しましょう:

現在の数: {count}

Current count: {count}

このコードはカウント状態にアクセスし、それを動的に表示します。

---

状態を更新する方法

ステートセッター関数の使用

React での状態の更新は、useState の 2 番目の要素である

setter 関数 を使用して行われます。この関数は更新された値を取得し、その新しい状態でコンポーネントを再レンダリングします。

カウンターを増減する方法の例を次に示します:

setCount(count 1)}>増分 setCount(count - 1)}>デクリメント

Current count: {count}

React は、状態が更新されるたびに、その変更が UI にシームレスに反映されるようにします。 React では

状態の更新は非同期である ことを覚えておくことが重要です。つまり、setter 関数を呼び出した直後に更新された状態が常に表示されるわけではありません。

---

国家は何を保持できるのか?

さまざまな種類の値

React の State は、次のようなさまざまなデータ型を保持できます。

• プリミティブ型 数値、文字列、ブール値など。
• オブジェクトおよび配列.
• Null 値と 未定義 値。

これらの例を見てみましょう:

文字列を状態に保持する:

const [名前, setName] = useState("ジョン");

Current count: {count}

配列を状態に保持する:

const [items, setItems] = useState([1, 2, 3]);

Current count: {count}

オブジェクトを状態に保持する:

const [user, setUser] = useState({ 名前: "ジョン", 年齢: 30 });

Current count: {count}

React の useState フックを使用すると、これらのさまざまなタイプのデータを管理できますが、次に説明するように、オブジェクトや配列などの複雑なタイプを更新する場合は注意が必要です。

---

状態のオブジェクトと配列を更新する

不変の更新

React でオブジェクトまたは配列を操作する場合、それらを

不変に更新することが重要です。 React はネストされたオブジェクトを深く比較しないため、オブジェクトを直接変更しても再レンダリングはトリガーされません。代わりに、更新された値を使用して 新しいオブジェクト または 配列 を作成する必要があります。

例: オブジェクトの更新

const [user, setUser] = useState({ 名前: "ジョン", 年齢: 30 }); 関数 updateName() { setUser(prevState => ({ ...前の状態、 名前：「ドー」 })); }

Current count: {count}

この例では:

...prevState.
• を使用して、既存の状態 (prevState) を新しいオブジェクトに展開します。
次に、元のユーザー オブジェクトを変更せずに name プロパティを変更します。

例: 配列の更新

const [items, setItems] = useState([1, 2, 3]); 関数 addItem() { setItems(prevItems => [...prevItems, 4]); }

Current count: {count}

ここ：

前の配列 (prevItems) を展開し、新しい項目 (4) を追加して、新しい配列を作成します。

---

よくある質問セクション

クラスベースの状態ではなく useState を使用する理由

フックは useState と同様に、機能コンポーネント内の状態管理を簡素化し、クラス コンポーネントと比較してコードを読みやすくし、散らかりにくくします。

useState は複数のデータ型を保持できますか?

はい、useState は文字列、数値、配列、オブジェクト、ブール値、さらには null または未定義の値を保持できます。

状態の更新は非同期ですか?

はい、React は状態の更新をバッチ処理するため、setter 関数を呼び出した直後には変更が反映されない可能性があります。

オブジェクトや配列などの複雑な状態を更新するにはどうすればよいですか?

元の状態の変更を避けるために、常にオブジェクトまたは配列のコピーを作成し、スプレッド演算子 (...) を使用してそれを不変に更新します。

---

結論

useState フックは、React で最も強力で頻繁に使用されるフックの 1 つです。これは、機能コンポーネント内のローカル状態を管理するのに役立ち、React コードをよりクリーンかつ効率的にします。単純な変数を扱う場合でも、複雑なオブジェクトや配列を扱う場合でも、状態を適切に使用および更新する方法を理解することが、動的な React アプリケーションを構築する鍵となります。練習を続ければ、すぐに React の状態管理を簡単にマスターできるようになります!

useState を使用してゼロからヒーローになったので、それをプロジェクトに組み込んで、React の魔法が実際に動作するのを見てみましょう!