useState フックと useEffect フックを設計する方法: 初心者ガイド

最新のアプリケーション、特に Web アプリを開発する場合、時間の経過とともに変化するデータを管理する必要があることがよくあります。たとえば、ユーザーがボタンをクリックすると、表示を更新したり、サーバーから新しいデータを取得したりする必要がある場合があります。 useState や useEffect などのフックは、これをスムーズに処理するのに役立ちます。これらの概念がどのように機能するかを分析し、それらを段階的に設計する方法を検討してみましょう。

---

useState と useEffect とは何ですか?

• useState: このフックを使用すると、コンポーネントに状態を追加できます。 「状態」とは、カウンターやアイテムのリストなど、コンポーネントがレンダリングの間に覚えておく必要があるデータであると考えてください。
• useEffect: このフックを使用すると、コンポーネントのレンダリング後に、データの取得、タイマーの設定、ページ タイトルの変更などのアクションを実行できます。

このガイドを理解しやすくするために、各フックをその重要なロジックに分解し、そこから構築していきます。

---

useState フックの設計

1. 状態管理の基本を理解する

シンプルなカウンター アプリがあると想像してください。ボタンを押すたびに、数値が 1 ずつ増えます。これを機能させるには、現在の数値をどこかに保存し、ボタンをクリックするたびに更新する必要があります。

2. 使用状態の目標

useState は次のことを行う必要があります:

• 値を保存します。
• その値を更新する方法を提供します。
• 値が変更されたときにコンポーネントの再レンダリング (または再描画) をトリガーします。

3. useState の基本概念

useState が内部でどのように機能するかについての基本的な内訳は次のとおりです。

• 状態の値を保持する変数 (カウンターなど) が必要です。
• この値を更新する関数が必要です。
• 値が更新されたら、新しい値を反映するためにコンポーネントを再レンダリングする必要があります。

4. useState をゼロから設計する

useState の単純な構造を定義しましょう:

1. 初期セットアップ: 初期値を入力として受け取る useState という関数を作成します。
2. 現在の値を返して関数を更新する: 関数は 2 つのものを返す必要があります。
   • 現在の値。
   • この値を更新できる関数。
3. 再レンダリングのトリガー: 状態の更新によってコンポーネントが再レンダリングされるようにします (この例ではこの部分を簡略化します)。

コード例

useState の単純なバージョンは次のようになります。

function useState(initialValue) {
    // Step 1: Create a variable to hold the current state value
    let currentState = initialValue;

    // Step 2: Define a function to update this value
    function setState(newValue) {
        // Update the state
        currentState = newValue;

        // Simulate a re-render (you’d do this differently in a real application)
        render();
    }

    // Step 3: Return the state and the function to update it
    return [currentState, setState];
}

// Usage example:
const [count, setCount] = useState(0);
console.log(count); // Outputs: 0
setCount(1);         // Updates state to 1
console.log(count);  // Outputs: 1 (in real use, this would trigger re-rendering)

---

useEffect フックの設計

useState はローカル データを処理しますが、useEffect を使用すると、データのフェッチやドキュメント タイトルの更新などの「副作用」を実行できます。副作用とは、外部世界とのあらゆる相互作用です。

1. 使用効果の目的

useEffect は次のようにする必要があります:

• コンポーネントのレンダリング後に関数を実行します。
• コンポーネントが削除されたときに、オプションでエフェクトをクリーンアップします。
• 指定されたデータが変更された場合は、必要に応じて再度実行します。

2. useEffect の基本概念

useEffect の主な部分は次のとおりです:

1. 効果関数: これは、メッセージのログ記録、データの取得、タイマーの開始など、レンダリング後に実行するアクションです。
2. Dependency Array: このオプションのリストは、いつ再実行するかを useEffect に指示します。このリストの値が変更されると、エフェクトが再度実行されます。

3. useEffect をゼロから設計する

useEffect の単純な構造を設定してみましょう:

1. 関数の実行: 2 つのパラメーターを取る useEffect という関数を作成します。
   • 実行するエフェクト関数。
   • オプションの依存関係配列。
2. レンダリング後にエフェクトを実行: コンポーネントのレンダリング後にエフェクト関数が実行されるようにします。
3. 依存関係の変更時にエフェクトを実行: 依存関係の配列が指定されている場合は、依存関係の 1 つが変更された場合にのみエフェクトを再実行します。

コード例

useEffect の基本バージョンは次のとおりです:

let previousDeps;  // To store previous dependencies

function useEffect(effectFunction, dependencies) {
    // Step 1: Check if dependencies have changed
    const hasChanged = dependencies
        ? !previousDeps || dependencies.some((dep, i) => dep !== previousDeps[i])
        : true;

    // Step 2: Run the effect function if dependencies changed
    if (hasChanged) {
        effectFunction();
        previousDeps = dependencies;  // Update the previous dependencies
    }
}

// Usage example:
useEffect(() => {
    console.log("Effect has run!");

    // Simulate cleanup if needed
    return () => console.log("Cleanup effect!");
}, [/* dependencies */]);

---

すべてをまとめる: 使用例

useState と useEffect の両方を使用してコンポーネントをシミュレートしましょう。

function Component() {
    // Initialize state with useState
    const [count, setCount] = useState(0);

    // Log a message each time count changes with useEffect
    useEffect(() => {
        console.log(`Count has changed to: ${count}`);
    }, [count]);  // Re-run effect if count changes

    // Simulate user interaction
    setCount(count + 1);
}

この例では:

• useState を使用してカウント状態を作成します。
• カウントが変わるたびに useEffect を使用してメッセージを記録します。
• setCount がカウントを更新するたびに、再レンダリングがトリガーされ、カウントが変更された場合は useEffect が再度実行されます。

---

まとめ

useState と useEffect の設計には以下が含まれます:

1. 値を保存 (useState) し、値を更新して再レンダリングする方法を提供します。
2. レンダリング後の関数の実行 (useEffect)、クリーンアップと依存関係の追跡のオプションあり。

これらのフックは、単純なカウンター、データのフェッチ、またはより複雑な状態管理のいずれであっても、動的で対話型のアプリケーションを構築するのに役立ちます。これらのフックの基礎があれば、ユーザーのアクションやリアルタイムのデータ変更に応答するアプリを作成するための準備が整います!

以上がuseState フックと useEffect フックを設計する方法: 初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。