web-dev-qa-db-fra.com

Est-il possible de partager des états entre des composants à l'aide du hook useState () dans React?

J'essayais avec la nouvelle fonctionnalité Crochet dans React. Considérant que j'ai les deux composants suivants (en utilisant des crochets de réaction) - 

const HookComponent = () => {
  const [username, setUsername] = useState('Abrar');
  const [count, setState] = useState();
  const handleChange = (e) => {
    setUsername(e.target.value);
  }

  return (
    <div>
      <input name="userName" value={username} onChange={handleChange}/>
      <p>{username}</p>
      <p>From HookComponent: {count}</p>
    </div>
  )
}


const HookComponent2 = () => {
  const [count, setCount] = useState(999);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Les crochets prétendent résoudre le problème du partage de la logique avec état entre les composants mais j’ai constaté que les états entre HookComponent et HookComponent2 ne sont pas partageables. Par exemple, le changement de count dans HookComponent2 ne rend pas un changement dans HookComponent. 

Est-il possible de partager des états entre des composants à l'aide du hook useState()?

javascriptreactjsreact-hooks
5
Abrar

Si vous faites référence à l'état du composant, les points d'ancrage ne vous aideront pas à le partager entre les composants. L'état du composant est local pour le composant. Si votre état vit dans son contexte, alors useContext hook serait utile.

Fondamentalement, je pense que vous avez mal compris la ligne "partage de la logique avec état entre composants". La logique avec état est différente de l'état. La logique avec état est une chose que vous faites qui modifie l'état. Par exemple, un composant s'abonnant à un magasin dans componentDidMount() et se désabonnant à componentWillUnmount(). Ce comportement abonnement/désabonnement peut être implémenté dans un hook et les composants qui en ont besoin peuvent simplement utiliser le hook.

Si vous souhaitez partager un état entre des composants, vous pouvez le faire de différentes manières, chacune avec ses propres mérites:

1. État de levage

Soulevez l’état jusqu’à un composant ancestral commun des deux composants.

function Ancestor() {
    const [count, setCount] = useState(999);
    return <>
      <DescendantA count={count} />
      <DescendantB count={count} />
    </>;
  }

Cette approche de partage d'état n'est pas fondamentalement différente de la manière traditionnelle d'utiliser l'état, les crochets nous donnent simplement une manière différente de déclarer l'état d'un composant.

2. contexte

Si les descendants sont trop profonds dans la hiérarchie des composants et que vous ne souhaitez pas transmettre l'état à un trop grand nombre de couches, vous pouvez utiliser le API de contexte .

Il existe un crochet useContext que vous pouvez utiliser au sein des composants enfants.

3. Solution de gestion d'état externe

Bibliothèques de gestion d'état telles que Redux ou Mobx. Votre état habitera ensuite dans un magasin en dehors de React et les composants pourront se connecter/s'abonner au magasin pour recevoir les mises à jour.

9
Yangshun Tay

le doc déclare:

Nous importons le crochet useState de React. Cela nous permet de conserver l'état local dans un composant de fonction.

il n'est pas mentionné que l'état puisse être partagé entre plusieurs composants. useState hook vous donne simplement un moyen plus rapide de déclarer un champ d'état et son opérateur correspondant en une seule instruction.

3
Karim

Vous devrez toujours lever votre état jusqu'à un composant ancêtre de HookComponent1 et HookComponent2. C’est ainsi que vous partagez l’état précédent et que la dernière API de hook ne change rien à ce sujet. 

1
Yongzhi