useState expliqué simplement - Un guide pour les non-développeurs (5)-js tutoriel-php.cn

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

Patricia Arquette

Libérer： 2025-01-06 00:37:39

original

818 Les gens l'ont consulté

useState Explained Simply - A Guide for Non-Developers (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);

Copier après la connexion

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);

Copier après la connexion

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>
  )
}

Copier après la connexion

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>
  )
}

Copier après la connexion

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

Copier après la connexion

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 :

Créer un composant compteur simple
Ajouter des boutons d'incrémentation et de décrémentation
Ajouter un bouton de réinitialisation
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 :