Compromis, modèles de références et valeurs par défaut
Comparez les champs contrôlés et non contrôlés, utilisez des références pour les lectures et fournissez des valeurs par défaut pertinentes.
Compromis, modèles de références et valeurs par défaut est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 2. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 2 leçons au total.
Contrôlé ou non contrôlé
Objectif : Choisir le style de champ adapté.
- Contrôlé : valeur dans l’état ; nouveau rendu à chaque modification
- Non contrôlé : le DOM conserve la valeur ; lecture au moyen d’une référence à la demande
- Valeurs par défaut : defaultValue, defaultChecked
Compromis en un coup d’œil
- Contrôlé : idéal pour la validation en direct, les masques et la synchronisation d’autres champs
- Non contrôlé : moins de rendus ; formulaires simples lus uniquement lors de l’envoi
- Mélange : contrôlé pour les champs clés, non contrôlé pour les champs facultatifs
Démonstration : champ contrôlé
Un champ contrôlé stocke la valeur dans l’état et la met à jour à chaque modification.
<div id="root"></div>
Démonstration : champ non contrôlé avec une référence
Un champ non contrôlé utilise la valeur du DOM ; nous la lisons avec une référence lorsque cela est nécessaire.
<div id="root"></div>
Valeurs par défaut et choix du mode contrôlé
Utilisez defaultValue/defaultChecked pour les valeurs initiales des champs non contrôlés ; passez au mode contrôlé lorsque vous avez besoin de règles en direct.
<div id="root"></div>
Conseils et pièges
- Ne mélangez pas value et defaultValue sur le même champ
- Utilisez des références pour lire les valeurs non contrôlées
- Choisissez le mode contrôlé lorsque l’interface réagit à chaque frappe
Vérification : contrôlé ou non contrôlé
Récapitulatif
Récapitulatif : Le mode contrôlé convient aux règles en direct et à l’état dérivé ; le mode non contrôlé convient aux lectures simples effectuées uniquement lors de l’envoi. Utilisez une référence pour lire les valeurs et defaultValue pour le contenu initial.
Questions Fréquemment Posées
La leçon « Compromis, modèles de références et valeurs par défaut » est-elle gratuite ?
Oui — le texte complet de « Compromis, modèles de références et valeurs par défaut » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 2 leçons au total.
Qu'est-ce que j'apprendrai dans « Compromis, modèles de références et valeurs par défaut » ?
Comparez les champs contrôlés et non contrôlés, utilisez des références pour les lectures et fournissez des valeurs par défaut pertinentes. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 2.
Combien de temps prend la leçon « Compromis, modèles de références et valeurs par défaut » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Compromis, modèles de références et valeurs par défaut
- Accesseurs de propriétés et réducteur d’état (léger)