React での同じコンポーネントの複数のインスタンスの状態の管理-jsチュートリアル-php.cn

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

PHPz

リリース： 2024-08-24 11:15:35

オリジナル

1086 人が閲覧しました

Managing State in Multiple Instances of the Same Component in 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 つの例を示します: