React での同じコンポーネントの複数のインスタンスの状態の管理

React を使用していて、同じコンポーネントのインスタンスが複数ある場合、状態の管理は難しくなることがあります。コンポーネントがどのように対話する必要があるかに応じて、状態を異なる方法で処理する必要があります。私が見つけた効果的なものは次のとおりです。

独立したインスタンス: コンポーネント内に状態を保持する

コンポーネントが相互に通信する必要がない場合は、その状態をコンポーネント内に保持することが最善です。このようにして、各インスタンスは独自の状態を持ち、1 つのインスタンスの変更が他のインスタンスに影響を与えることはありません。

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Usage
<Counter /> // Instance 1
<Counter /> // Instance 2

ここでは、各 Counter コンポーネントが独自のカウントを追跡します。したがって、一方のカウンターのボタンをクリックしても、もう一方のカウンターのカウントは変わりません。

依存インスタンス: 親コンポーネントで状態を管理する

しかし、コンポーネントが何らかの状態を共有する必要がある場合、または調整された方法で動作する必要がある場合は、状態を親コンポーネントに移動することをお勧めします。親は共有状態を管理し、それを props として渡すことができます。これにより、すべてのインスタンスの同期が維持され、スムーズに連携することが保証されます。

function Parent() {
  const [sharedCount, setSharedCount] = useState(0);

  return (
    <div>
      <p>Total Count: {sharedCount}</p>
      <Counter count={sharedCount} setCount={setSharedCount} />
      <Counter count={sharedCount} setCount={setSharedCount} />
    </div>
  );
}

function Counter({ count, setCount }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

このアプローチが機能するのは、状態が親コンポーネント内にある場合、その状態が更新されるとすべてのインスタンスの再レンダリングがトリガーされ、すべてのインスタンスに最新の UI が表示されることが保証されるためです。状態が各インスタンスで個別に保持されている場合、状態が変更されたインスタンスのみが再レンダリングされ、インスタンス間で UI の一貫性が失われます。

私のプロジェクトの例

私はアコーディオンコンポーネントを構築しているときにこれを思いつきました。ここに私自身の作品からの 2 つの例を示します:

• 独立したアコーディオン インスタンス: 例。この設定では、各アコーディオン インスタンスは独立して動作します。

• 依存する Accordion インスタンス: 例。このバージョンでは、すべてのアコーディオン インスタンスは相互に依存し、同期を保ちます。

簡単な要約

• コンポーネントが個別に動作する場合は、各コンポーネント内で状態を保持します。

• 状態を共有する必要がある場合、または調整された方法で連携する必要がある場合は、親で状態を管理します。

このアプローチは、これらのアコーディオンのサンプルを構築する際に大きな違いをもたらしました。あなたにも役立つことを願っています!

以上がReact での同じコンポーネントの複数のインスタンスの状態の管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。