Verwalten des Status in mehreren Instanzen derselben Komponente in React

Wenn Sie mit React arbeiten und mehrere Instanzen derselben Komponente haben, kann die Statusverwaltung schwierig werden. Abhängig davon, wie Ihre Komponenten interagieren müssen, möchten Sie den Status unterschiedlich behandeln. Hier ist, was meiner Meinung nach gut funktioniert.

Unabhängige Instanzen: Behalten Sie den Status innerhalb der Komponente bei

Wenn Ihre Komponenten nicht miteinander kommunizieren müssen, ist es am besten, ihren Zustand innerhalb der Komponente beizubehalten. Auf diese Weise hat jede Instanz ihren eigenen Status und Änderungen in einer haben keinen Einfluss auf die anderen.

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

Hier verfolgt jede Zählerkomponente ihre eigene Zählung. Wenn Sie also in einem Zähler auf die Schaltfläche klicken, ändert sich die Anzahl im anderen nicht.

Abhängige Instanzen: Verwalten Sie den Status in der übergeordneten Komponente

Wenn die Komponenten jedoch einen bestimmten Status teilen oder koordiniert arbeiten müssen, ist es besser, den Status auf die übergeordnete Komponente zu verschieben. Das übergeordnete Element kann den gemeinsamen Status verwalten und als Requisiten weitergeben. Dadurch wird sichergestellt, dass alle Instanzen synchron bleiben und reibungslos zusammenarbeiten.

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>
  );
}

Dieser Ansatz funktioniert, denn wenn sich der Status in der übergeordneten Komponente befindet, löst jede Aktualisierung dieses Status ein erneutes Rendern aller Instanzen aus, um sicherzustellen, dass alle die neueste Benutzeroberfläche anzeigen. Wenn der Status in jeder Instanz separat beibehalten würde, würde nur die Instanz mit der Statusänderung neu gerendert, was zu einer inkonsistenten Benutzeroberfläche aller Instanzen führen würde.

Beispiele aus meinen Projekten

Das habe ich beim Bau einer Akkordeonkomponente herausgefunden. Hier sind zwei Beispiele aus meiner eigenen Arbeit:

• Unabhängige Accordion-Instanzen: Beispiel. In diesem Setup arbeitet jede Accordion-Instanz unabhängig.

• Abhängige Accordion-Instanzen: Beispiel. In dieser Version sind alle Accordion-Instanzen voneinander abhängig und bleiben synchron.

Kurze Zusammenfassung

• Wenn Komponenten separat arbeiten, behalten Sie den Status innerhalb jeder Komponente bei.

• Wenn sie den Status teilen oder koordiniert zusammenarbeiten müssen, verwalten Sie den Status im übergeordneten Element.

Dieser Ansatz hat für mich beim Bau dieser Akkordeonbeispiele einen großen Unterschied gemacht. Ich hoffe, es hilft dir auch!

Das obige ist der detaillierte Inhalt vonVerwalten des Status in mehreren Instanzen derselben Komponente in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!