React est une bibliothèque JavaScript populaire pour la création d'interfaces utilisateur. Il fournit plusieurs crochets qui permettent aux développeurs de gérer l'état et d'effectuer des effets secondaires. Deux crochets couramment utilisés dans React sont useRefet useState. Bien qu'ils puissent sembler similaires à première vue, ils servent à des fins différentes et ont des cas d'utilisation distincts. Dans cet article, nous allons explorer useRefet useStateapprofondir, comparer leurs fonctionnalités et fournir des exemples pour illustrer leur utilisation.

Compréhension useRef:

Le useRefcrochet dans React crée une référence mutable qui persiste dans les rendus de composants. Contrairement à useState, qui gère l'état et déclenche le nouveau rendu, useRefest principalement utilisé pour accéder et manipuler le DOM ou pour stocker des valeurs modifiables qui ne déclenchent pas de nouveau rendu. Il renvoie un objet mutable avec une currentpropriété.

Exemple 1 : Accéder aux éléments DOM

Disons que nous voulons nous concentrer sur un champ de saisie lorsqu'un bouton est cliqué. Nous pouvons y parvenir en utilisant useRefcomme suit:

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

Compréhension useState:

Le useStatecrochet est utilisé pour gérer l'état dans un composant fonctionnel. Cela nous permet de créer des variables qui peuvent être mises à jour et déclencher de nouveaux rendus lorsque leurs valeurs changent. Le useStatehook renvoie un tableau avec deux éléments : la valeur de l'état actuel et une fonction pour la mettre à jour.

Exemple 2 : Gestion d'un compteur

Créons un composant de compteur simple en utilisantuseState :

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

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

Comparer useRefet useState:

Bien que useRefet useStatepuissent tous deux stocker des valeurs, ils ont des objectifs différents :

1. Gestion de l'état : useStateest conçu pour gérer l'état au sein d'un composant. Il déclenche de nouveaux rendus lorsque l'état est mis à jour, garantissant que l'interface utilisateur reflète les dernières valeurs.
2. Accéder et manipuler le DOM : useRefest principalement utilisé pour interagir avec le DOM, comme accéder aux valeurs d'entrée ou se concentrer sur les éléments. Il nous permet de stocker des références aux nœuds DOM et de récupérer leurs propriétés sans déclencher de nouveaux rendus.
3. Préserver les valeurs à travers les rendus : useRefconserve la même valeur à travers les rendus de composants, tandis useStatequ'initialise l'état lors de chaque rendu.
4. Comportement de re-rendu : la mise à jour de la valeur renvoyée par useStateentraîne un nouveau rendu du composant, tandis que la mise à jour de la currentpropriété d'un refcréé avec useRefne déclenche pas de nouveau rendu.

Pour mieux comprendre les cas d'utilisation de useRefet useState, explorons quelques scénarios où chaque crochet est plus approprié :

1. useRefCas d'utilisation :

1.1. Accéder aux éléments DOM : Lorsque vous avez besoin d'accéder ou de manipuler des éléments DOM, tels que la mise au point d'une entrée, le défilement vers un élément spécifique ou la mesure de la taille d'un élément, le choix useRefest approprié. Il vous permet de créer une référence au nœud DOM et d'accéder à ses propriétés ou méthodes.

1.2. Stockage de valeurs modifiables : si vous avez une valeur qui doit persister dans les rendus mais qui n'affecte pas l'interface utilisateur du composant ou ne déclenche pas de nouveaux rendus, useRefc'est une bonne option. Par exemple, vous pouvez utiliser useRefpour stocker les valeurs précédentes, mettre en cache les valeurs ou conserver les valeurs modifiables à des fins de comparaison.

2. useState Cas d'utilisation :

2.1. Gestion de l'état des composants : lorsque vous devez gérer et mettre à jour l'état d'un composant, useStateil s'agit de l'approche recommandée. Il fournit un moyen de stocker et de mettre à jour les valeurs qui affectent l'interface utilisateur du composant et déclenchent de nouveaux rendus.

2.2. Gestion des interactions utilisateur : si vous avez des éléments interactifs dans votre composant, tels que des cases à cocher, des champs de saisie ou des bascules, il useStateest couramment utilisé pour gérer l'état associé à ces interactions. Vous pouvez mettre à jour l'état en fonction de l'entrée de l'utilisateur et refléter les modifications dans l'interface utilisateur.

Exemple de comparaison :

Pour illustrer plus clairement la différence entre useRefet useState, considérons un exemple où les deux crochets peuvent être utilisés :

Supposons que nous ayons un formulaire avec un champ de saisie et un bouton d'envoi. Lorsque l'utilisateur clique sur le bouton Soumettre, nous souhaitons afficher un message de réussite sans effacer le champ de saisie.

Utilisation useRef:

import React, { useRef } from 'react';

function Form() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    const value = inputRef.current.value;
    // Submit the form
    displaySuccessMessage();
  };

  const displaySuccessMessage = () => {
    // Display success message without clearing the input field
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

Utilisation useState:

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = () => {
    // Submit the form
    displaySuccessMessage();
  };

  const displaySuccessMessage = () => {
    // Display success message
    setInputValue(''); // Clear the input field
  };

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input value={inputValue} onChange={handleInputChange} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

Dans cet exemple, useStateest utilisé pour gérer la valeur du champ d'entrée et déclencher de nouveaux rendus lorsque l'utilisateur interagit avec celui-ci. La mise à jour de l'état dans displaySuccessMessageefface le champ de saisie en mettant à jour l' inputValueétat.

Conclusion:

En conclusion, useRefet useStatesont tous deux des crochets essentiels dans React, mais ils servent à des fins différentes. useRefest principalement utilisé pour accéder et manipuler le DOM ou stocker des valeurs modifiables sans déclencher de nouveaux rendus. Il fournit une référence mutable qui persiste dans les rendus de composants. D'autre part, useStateest utilisé pour gérer l'état des composants, déclenchant de nouveaux rendus lorsque l'état est mis à jour. Il renvoie une valeur d'état et une fonction pour la mettre à jour.

Comprendre les différences entre useRefet useStateet savoir quand utiliser chaque hook est crucial pour écrire des composants React efficaces et optimisés. En utilisant useRefet useStatecorrectement, vous pouvez créer des applications interactives et performantes avec React.

Merci d'avoir lu!

J'espère que vous avez trouvé cet article utile. Si vous avez des questions ou des suggestions, veuillez laisser des commentaires. Vos commentaires m'aident à m'améliorer.

N'oubliez pas de vous abonner⭐️

Page Facebook :https://www.facebook.com/designTechWorld1

Page Instagram :https://www.instagram.com/techd.esign/

Chaîne Youtube :https://www.youtube.com/@tech..Design/

Gazouillement :https://twitter.com/sumit_singh2311

Matériel utilisé :

Ordinateur portable :https://amzn.to/3yKkzaC

Montre:https://amzn.to/41cialm

Vous pouvez préférer React Book : https://amzn.to/3Tw29nx

Quelques livres supplémentaires liés au langage de programmation :

https://amzn.to/3z3tW5s

https://amzn.to/40n4m6O

https://amzn.to/3Jzstse

https://amzn.to/3nbl8aE

* Avis de non-responsabilité important — "Amazon et le logo Amazon sont des marques commerciales d'Amazon.com, Inc. ou de ses sociétés affiliées."