Comment utiliser l'état dans les composants Functional React

Logo React sur fond sombre

Les composants React peuvent avoir un « état » interne, un ensemble de paires clé-valeur qui appartiennent au composant. Lorsque l'état change, React rend à nouveau le composant. Historiquement, l'état ne pouvait être utilisé que sur les composants de classe. Avec les crochets, vous pouvez également appliquer un état aux composants fonctionnels.

L'approche traditionnelle

Les composants de la classe React ont une extension |__+_| propriété appartenant à votre état. Ils fournissent un |_+_| méthode que vous pouvez utiliser pour mettre à jour l'état, déclenchant un nouveau rendu.

|__+_|

Dans cet exemple, le texte rendu affichera toujours le nombre dans l'état du composant. Cliquer sur le bouton augmentera la valeur.

Conversion en composant fonctionnel

Avec un composant aussi simple, l'idéal serait de le réécrire en composant fonctionnel. Pour ce faire, vous devrez utiliser le fichier useState () gancho . Crochets ajoutés dans React 16.8 ; Avant cette version, il n'existait aucun mécanisme permettant d'ajouter un état aux composants fonctionnels.

Voici à quoi ressemble le composant ci-dessus en tant que composant fonctionnel :

|__+_|

Ceci est plus court et plus lisible que l'original basé sur la classe. Contrairement au composant de classe, vous ne pouvez pas accéder à un fichier |__+_| propriétés d'instance ou |__+_| méthode. Au lieu de, |_+_| est appelée pour définir l'état et obtenir une fonction de mise à jour.

UseState Hook Anatomy ()

Les crochets sont une fonctionnalité de React qui vous permet de 'raccrocher' des fonctionnalités à des composants fonctionnels. Étant donné que les fonctions sont pures et n'ont pas d'instances, les fonctionnalités initialement implémentées en tant que |_+_| Les méthodes de classe ne peuvent pas être utilisées directement. Les crochets vous permettent d'ajouter ces fonctionnalités aux composants sans avoir à les convertir en classes.

Le |__+_| hook définit une seule propriété d'état. Renvoie un tableau contenant deux éléments : la valeur de l'état actuel et une fonction que vous pouvez appeler avec une nouvelle valeur pour mettre à jour l'état.

Dans l'exemple, nous utilisons le affectation de déstructuration de tableau pour décompresser les valeurs du tableau en variables avec des noms clairs. Par convention, la méthode set doit être précédée de |__+_| puisqu'il prend la place de |__+_| méthode de classe.

Vocation |_+_| déclare une variable d'état, |__+_| dans notre cas, cela sera 'conservé' entre les appels de fonction. Cela signifie |__+_| il est garanti de renvoyer la même valeur chaque fois que vous l'appelez dans votre composant. Toutes les autres valeurs de variable sont perdues lorsqu'une fonction se termine ; React maintient les valeurs d'état en interne pour s'assurer que vous obtenez les mêmes à chaque exécution de votre fonction.

Mise à jour du statut

La fonction de mise à jour de l'état n'est qu'une fonction normale. Il est utilisé dans |__+_| contrôleur pour remplacer la valeur de l'état actuel. La gestion interne des valeurs d'état par React garantit que votre composant est ensuite restitué. |__+_| fournira la nouvelle valeur, provoquant le changement d'état.

Il y a une différence importante avec |__+_| des composants de classe : mises à jour de l'état fonctionnel remplacer l'état, tandis que |_+_| fait une jointure peu profonde :

|__+_|

Au lieu de transmettre directement une nouvelle valeur d'état, vous pouvez également transmettre une fonction aux mises à jour d'état. Les fonctions prennent l'état actuel comme paramètre et doivent renvoyer la nouvelle valeur d'état. Ceci est utile lorsque vous travaillez avec des valeurs modifiables.

|__+_|

Cela vous aide à réutiliser la logique de commutation à différents points de votre composant.

Valeurs prédéterminées

Il y a un autre point à prendre en compte |__+_|. Le crochet lui-même accepte un paramètre qui définit la valeur initiale de la variable d'état. Dans l'exemple ci-dessus, le |__+_| sera initialisé à |__+_|. Lorsque vous ne spécifiez pas de valeur, |__+_| c'est utilisé. Cela correspond au comportement lors de la définition du |__+_| propriété d'instance sur un composant de classe.

Si vous passez une fonction à |__+_|, React l'appellera et utilisera sa valeur de retour comme valeur d'état initiale.

|__+_|

Cette technique permet l'initialisation de l'état 'paresseux'. La fonction ne sera pas appelée tant que React n'est pas prêt à définir l'état.

L'utilisation d'une fonction garantit également que la valeur de l'état initial n'est calculée qu'une seule fois. Ceci est important si la détermination de son état initial nécessite un calcul coûteux : si vous le passez directement, la valeur sera calculée à chaque rendu du composant, contre une fois lors du premier rendu si vous passez une référence de fonction.

|__+_|

La différence subtile mais significative entre les deux |__+_| L'appel illustre l'amélioration potentielle des performances. La première ligne aurait effectué l'opération coûteuse à chaque appel de traitement, même si elle était redondante car l'état était déjà initialisé. Cela ne se produirait pas dans le second cas.

Utilisation de plusieurs valeurs d'état

Vous disposez de plusieurs options lorsque vous utilisez plusieurs valeurs d'état dans un seul composant fonctionnel. Vous pouvez revenir à un système de type classe, en utilisant un seul objet stocké dans state :

|__+_|

Vous devez vous assurer d'appeler |__+_| avec utilisateur mis à jour objet . La syntaxe de propagation est utile de la même manière que les composants de classe :

|__+_|

Cela crée un nouvel objet avec les propriétés existantes de |__+_|. Mettez ensuite à jour le fichier |__+_| propriété à sa nouvelle valeur. Il est important de créer un fichier Nouveau objet, plutôt que de modifier directement l'objet existant, afin que la réconciliation d'état de React puisse identifier le changement.

Alternativement, vous pouvez appeler |__+_| plusieurs fois pour définir des variables d'état uniques pour chaque élément. C'est souvent l'approche préférée pour les composants fonctionnels. Cela peut faciliter la mise à jour des valeurs de statut individuelles.

|__+_|

Les propriétés avec état ont désormais leurs propres variables d'état et fonctions de mise à jour.

conclusion

Réagir |__+_| hook rend les composants fonctionnels plus puissants en leur permettant de posséder un état. Vous pouvez définir une valeur initiale, accéder à la valeur actuelle avec la certitude qu'elle persistera entre les rendus et mettre à jour l'état à l'aide d'une fonction spécialement fournie.

Les composants fonctionnels avec état sont généralement plus rapides à écrire que leurs homologues basés sur des classes. En outre, ils peuvent rendre plus évident ce qui se passe dans votre base de code en faisant référence à |__+_| est |__+_| sont supprimés au profit de noms de variables clairs. Certainement |_+_| offre de la flexibilité et signifie que vous n'avez plus besoin de convertir les composants fonctionnels en composants de classe lorsque vous demandez l'état.

Qu'est-ce que tu penses?