J'apprends actuellement le concept de hooks dans React et j'essaie de comprendre l'exemple ci-dessous.
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
L'exemple ci-dessus incrémente le compteur sur le paramètre de fonction de gestionnaire lui-même. Que faire si je veux modifier la valeur de comptage dans la fonction de gestionnaire d'événements
Considérez l'exemple ci-dessous
setCount = () => {
//how can I modify count value here. Not sure if I can use setState to modify its value
//also I want to modify other state values as well here. How can I do that
}
<button onClick={() => setCount()}>
Click me
</button>
javascript
reactjs
react-native
react-hooks
Hemadri Dasari
la source
la source
useState
est implémenté. Voici la définition à partir de la version 16.9 .Réponses:
Les hooks React sont une nouvelle façon (encore en cours de développement) d'accéder aux fonctionnalités de base de react comme
state
sans avoir à utiliser de classes, dans votre exemple si vous voulez incrémenter un compteur directement dans la fonction handler sans le spécifier directement dans leonClick
prop, vous pourrait faire quelque chose comme:et onClick:
Expliquons rapidement ce qui se passe dans cette ligne:
useState(0)
retourne un tuple où le premier paramètrecount
est l'état actuel du compteur etsetCounter
est la méthode qui nous permettra de mettre à jour l'état du compteur. Nous pouvons utiliser lasetCounter
méthode pour mettre à jour l'état decount
n'importe où - Dans ce cas, nous l'utilisons à l'intérieur de lasetCount
fonction où nous pouvons faire plus de choses; l'idée avec les hooks est que nous sommes en mesure de garder notre code plus fonctionnel et d'éviter les composants basés sur les classes s'ils ne sont pas souhaités / nécessaires.J'ai écrit un article sur les crochets avec de multiples exemples (y compris les compteurs), comme ce codepen , je utilisais
useState
,useEffect
,useContext
et crochets personnalisés . Je pourrais entrer dans plus de détails sur le fonctionnement des hooks sur cette réponse, mais la documentation fait un très bon travail en expliquant en détail le hook d'état et d'autres hooks, j'espère que cela vous aidera.mise à jour: les Hooks ne sont plus une proposition , depuis la version 16.8 ils sont maintenant disponibles pour être utilisés, il y a une section dans le site de React qui répond à une partie de la FAQ .
la source
setSomething
, si j'essaye ensuite de l'utilisersomething
directement après, il semble avoir toujours l'ancienne valeur ...useState
est l'un des hooks de réaction intégrés disponibles dans la0.16.7
version.useState
ne doit être utilisé qu'à l'intérieur des composants fonctionnels.useState
c'est le moyen si nous avons besoin d'un état interne et que nous n'avons pas besoin d'implémenter une logique plus complexe telle que des méthodes de cycle de vie.Veuillez noter que le
useState
rappel de hook pour la mise à jour de l'état se comporte différemment des composantsthis.setState
. Pour vous montrer la différence, j'ai préparé deux exemples.Un nouvel objet est créé lorsque le
setUserInfo
rappel est utilisé. Notez que nous avons perdu lalastName
valeur clé. Pour corriger cela, nous pourrions passer la fonction à l'intérieuruseState
.Voir exemple:
Pour en savoir plus,
useState
consultez la documentation officielle .la source
La syntaxe de
useState
hook est simple.const [value, setValue] = useState(defaultValue)
Si vous n'êtes pas familier avec cette syntaxe, allez ici .
Je vous recommande de lire la documentation . Il y a d'excellentes explications avec une quantité décente d'exemples.
la source
useState
est l'un des hooks disponibles dans React v16.8.0. Il vous permet essentiellement de transformer vos composants fonctionnels / sans état en un seul qui peut avoir son propre état.Au niveau très basique, il est utilisé de cette façon:
Cela vous permet ensuite d'appeler en
setLoading
passant une valeur booléenne. C'est une manière sympa d'avoir un composant fonctionnel "avec état".la source
useState()
est un hook React. Les hooks permettent d'utiliser l'état et la mutabilité à l'intérieur des composants de fonction.Bien que vous ne puissiez pas utiliser de hooks à l'intérieur de classes, vous pouvez encapsuler votre composant de classe avec une fonction et utiliser des hooks. C'est un excellent outil pour migrer des composants d'une classe à une fonction. Voici un exemple complet:
Pour cet exemple, j'utiliserai un composant compteur. Ça y est:
Il s'agit d'un composant de classe simple avec un état de comptage et la mise à jour de l'état est effectuée par des méthodes. C'est un modèle très courant dans les composants de classe. La première chose est de l'envelopper avec un composant de fonction avec juste le même nom, qui délègue toutes ses propriétés au composant encapsulé. Vous devez également rendre le composant encapsulé dans le retour de fonction. C'est ici:
C'est exactement le même composant, avec le même comportement, le même nom et les mêmes propriétés. Élevons maintenant l'état de comptage au composant de fonction. Voici comment ça se passe:
Notez que la méthode
inc
est toujours là, elle ne blessera personne, en fait c'est du code mort. C'est l'idée, continuez simplement à soulever l'état. Une fois que vous avez terminé, vous pouvez supprimer le composant de classe:Bien que cela permette d'utiliser des crochets dans des composants de classe, je ne vous recommanderais pas de le faire, sauf si vous migrez comme je l'ai fait dans cet exemple. Le mélange des composants de la fonction et de la classe rendra la gestion de l'état un désordre. J'espère que ça aide
Meilleures salutations
la source
useState () est un exemple de hook React intégré qui vous permet d'utiliser des états dans vos composants fonctionnels. Cela n'était pas possible avant React 16.7.
La fonction useState est un hook intégré qui peut être importé depuis le package react. Il vous permet d'ajouter un état à vos composants fonctionnels. En utilisant le hook useState dans un composant de fonction, vous pouvez créer un élément d'état sans passer aux composants de classe.
la source
Les hooks sont une nouvelle fonctionnalité dans
React v16.7.0-alpha
useState
le "Hook".useState()
définir la valeur par défaut de la variable any et gérer le composant de fonction (fonctions PureComponent).ex : const [count, setCount] = useState(0);
définir la valeur par défaut de count 0. et u peut utilisersetCount
toincrement
oudecrement
la valeur.onClick={() => setCount(count + 1)}
incrémenter la valeur de comptage. DOCla source
Merci Loelsonk, je l'ai fait
la source
useState est un hook qui vous permet d'ajouter un état à un composant fonctionnel. Il accepte un argument qui est la valeur initiale de la propriété d'état et renvoie la valeur actuelle de la propriété d'état et une méthode qui est capable de mettre à jour cette propriété d'état.
Voici un exemple simple:
import React, {useState} from react
function HookCounter {
const [count, stateCount]= useState(0)
return(
<div>
<button onClick{( ) => setCount(count+1)}> count{count} </button>
</div>
)
}
useState accepte la valeur initiale de la variable d'état qui est zéro dans ce cas et renvoie une paire de valeurs. La valeur actuelle de l'état a été appelée count et une méthode qui peut mettre à jour la variable d'état a été appelée setCount.
la source