Gestion de l'état dans plusieurs instances du même composant dans React

Lorsque vous travaillez avec React et que vous disposez de plusieurs instances du même composant, la gestion de l'état peut devenir délicate. En fonction de la manière dont vos composants doivent interagir, vous souhaiterez gérer l'état différemment. Voici ce que j’ai trouvé qui fonctionne bien.

Instances indépendantes : conserver l'état à l'intérieur du composant

Si vos composants n'ont pas besoin de communiquer entre eux, il est préférable de conserver leur état à l'intérieur du composant. De cette façon, chaque instance a son propre état et les changements dans l’une n’affectent pas les autres.

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

Ici, chaque composant Counter garde une trace de son propre décompte. Ainsi, si vous cliquez sur le bouton dans un compteur, cela ne change pas le décompte dans l’autre.

Instances dépendantes : gérer l'état dans le composant parent

Mais si les composants doivent partager un état ou fonctionner de manière coordonnée, il est préférable de déplacer l'état vers le composant parent. Le parent peut gérer l'état partagé et le transmettre comme accessoire. Cela garantit que toutes les instances restent synchronisées et fonctionnent ensemble en douceur.

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

Cette approche fonctionne car lorsque l'état est dans le composant parent, toute mise à jour de cet état déclenche un nouveau rendu de toutes les instances, garantissant qu'elles affichent toutes la dernière interface utilisateur. Si l'état était conservé séparément dans chaque instance, seule l'instance avec le changement d'état serait restituée, ce qui entraînerait une interface utilisateur incohérente entre les instances.

Exemples de mes projets

J'ai compris cela en construisant un composant accordéon. Voici deux exemples tirés de mon propre travail :

• Instances d'accordéon indépendantes : exemple. Dans cette configuration, chaque instance d'accordéon fonctionne indépendamment.

• Instances d'accordéon dépendantes : exemple. Dans cette version, toutes les instances d'accordéon dépendent les unes des autres et restent synchronisées.

Récapitulatif rapide

• Si les composants fonctionnent séparément, conservez l'état à l'intérieur de chaque composant.

• S'ils ont besoin de partager l'état ou de travailler ensemble de manière coordonnée, gérez l'état chez le parent.

Cette approche a fait une grande différence pour moi lors de la construction de ces exemples d'accordéon. J'espère que cela vous aidera aussi !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!