useState expliqué simplement - Un guide pour les non-développeurs (5)

Hé ?

Issu du marketing, je me souviens à quel point les hooks React étaient intimidants au début. Tous ces termes techniques et ce jargon de développeur m’ont fait tourner la tête ! Après beaucoup d'apprentissage (et beaucoup de confusion), j'ai voulu créer le guide que j'aurais aimé avoir au début.

Si vous l'avez déjà fait :

• Vous vous êtes senti perdu dans la documentation React ?‍?
• Je me demandais pourquoi nous ne pouvions pas simplement utiliser des variables régulières
• J'ai eu du mal à expliquer useState aux autres
• Je voulais des exemples qui ont vraiment du sens

Alors ce guide est fait pour vous ! Décomposons useState en petits morceaux digestibles.

Que sont les crochets React ? ?

Pensez aux crochets comme à un couteau suisse : chaque outil a un objectif spécifique :

• useState : votre bloc-notes magique (nous allons approfondir celui-ci !)
• useEffect : Votre assistant personnel qui surveille les changements
• useContext : Le chat de groupe où tout le monde partage des informations
• useReducer : Comme le grand frère de useState pour les trucs compliqués
• useMemo : votre ami intelligent qui se souvient des solutions
• useCallback : similaire à useMemo, mais pour mémoriser les fonctions
• useRef : C'est comme mettre un post-it sur quelque chose pour le retrouver plus tard

Qu’est-ce que useState ? ?

Vous vous souvenez de ces tableaux magiques sur lesquels vous pouviez écrire quelque chose, l'effacer et écrire quelque chose de nouveau ? useState est exactement comme ça pour votre site Web ! Cela aide votre site Web à mémoriser des éléments et à les mettre à jour en cas de besoin.

const [something, setSomething] = useState(startingValue);

Pensez-y comme :

• quelque chose : ce qui est actuellement écrit sur votre tableau
• setSomething : Votre gomme/marqueur spécial pour changer ce qui est écrit
• StartingValue : Ce que vous écrivez au tableau pour commencer

Comment fonctionne useState ? ?

Laissez-moi vous expliquer cela comme une recette de cuisine :

1. Se préparer à cuisiner (initialisation)

• Aménagez votre espace de cuisson (votre composant)
• Créez une fiche de recette spéciale (espace d'état de React)
• Chaque ingrédient a sa propre place sur la carte

2. Modification de la recette (mises à jour)

Lorsque vous souhaitez modifier la quantité d'un ingrédient :

• React écrit le changement sur un post-it
• Mette cette note dans une pile de « choses à faire »
• Il est prévu de mettre à jour la recette bientôt
• Regroupe plusieurs changements ensemble (comme changer plusieurs ingrédients à la fois)

3. Apporter les modifications (rendu)

• React examine toutes les notes autocollantes
• Calcule de nouveaux montants
• Mise à jour la fiche recette
• Montre à tout le monde la nouvelle recette

4. Finir (Commit)

• React apporte les changements
• Nettoie les vieux ingrédients
• Configure de nouveaux ingrédients

Exemples concrets ?

1. Un simple message de bienvenue

const [something, setSomething] = useState(startingValue);

2. Un compteur de boutons J'aime

function WelcomeMessage() {
  // Think of this like a greeting card where you can change the name
  const [name, setName] = useState("Guest")

  return (
    <div>
      <input 
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Type your name"
      />
      <p>Welcome to my website, {name}! ?</p>
    </div>
  )
}

3. Basculement du mode sombre

function LikeButton() {
  // Just like counting likes on Instagram
  const [likes, setLikes] = useState(0)

  return (
    <div>
      <p>This post has {likes} likes</p>
      <button onClick={() => setLikes(likes + 1)}>♥️ Like</button>
    </div>
  )
}

2. Mise à jour basée sur la valeur précédente

function DarkModeSwitch() {
  // Like a light switch for your website
  const [isDark, setIsDark] = useState(false)

  return (
    <div>



<h2>
  
  
  Common Mistakes (We All Make Them!) ?
</h2>

<h3>
  
  
  1. Trying to Change Things Directly
</h3>



<pre class="brush:php;toolbar:false">// ? Don't do this!
const [user, setUser] = useState({name: 'John'})
user.name = 'Jane'  // This is like trying to edit a photocopy

// ✅ Do this instead!
setUser({...user, name: 'Jane'})  // This is like making a new copy

Quand devriez-vous utiliser useState ? ✅

Utilisez-le lorsque vous en avez besoin :

• Gardez une trace des entrées du formulaire
• Activer/Désactiver les choses
• Compter les choses
• Stocker les informations temporaires
• Gérer les interactions des utilisateurs

Quand ne devriez-vous pas utiliser useState ? ⛔

Évitez-le quand :

• Vous devez partager des données entre de nombreux composants (utilisez le contexte)
• Vous avez une logique d'état complexe (utilisez useReducer)
• Vous traitez de grandes quantités de données
• Vous devez mettre à jour plusieurs éléments liés à la fois

Pratiquons ! ?

Voici un petit défi pour tester votre compréhension :

1. Créer un composant compteur simple
2. Ajouter des boutons d'incrémentation et de décrémentation
3. Ajouter un bouton de réinitialisation
4. Bonus : Ajouter un bouton "multiplier par 2"

Déposez votre solution dans les commentaires ! J'aimerais voir ce que vous créez.

Conclusion ?

useState peut sembler effrayant au début, mais c'est en réalité simplement un moyen d'aider votre site Web à se souvenir de certaines choses - comme un système de pense-bête numérique ! N'oubliez pas :

• Commencez simple
• Pratiquez avec des exemples de base
• Ne vous inquiétez pas d'être parfait
• Continuez à construire et à apprendre

Étant moi-même issu d'un milieu non technique, je sais que ces concepts prennent du temps à s'assimiler. C'est tout à fait normal !

Connectons-nous ! ?

J'aimerais entendre parler de votre parcours React :

• Quel était votre "aha!" moment avec useState ?
• Quelles analogies vous ont aidé à le comprendre ?
• Quels autres concepts React aimeriez-vous que je décompose ?

Partagez vos réflexions dans les commentaires ci-dessous !

Restez à l'écoute pour plus de guides dans lesquels je décompose d'autres concepts React en langage humain normal !

Bon codage ! ?

---

Crédits image de couverture : votre crédit image ici

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!