$state : réactivité fine
Déclarez un état réactif avec la rune $state pour mettre à jour le DOM de manière ciblée.
$state : réactivité fine est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. 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 Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Déclarer un état
Utilisez $state(initial) pour déclarer une variable réactive.
let count = $state(0);Réaffecter normalement
Mettez-la à jour avec une affectation ordinaire. Svelte réaffiche l’interface utilisateur dépendante.
count = count + 1;Objets et tableaux
$state crée des proxies profonds avec les objets et les tableaux : leurs modifications sont réactives.
let user = $state({ name: "Ada" });
user.name = "Bea"; // triggers updatePlus de items = items
Vous n’avez plus besoin de réaffecter une valeur pour déclencher les mises à jour : les proxies détectent les modifications.
Mises à jour granulaires
Seules les parties du DOM qui utilisent la propriété modifiée sont réaffichées.
Valeurs renvoyées par les fonctions
Vous pouvez renvoyer des objets fondés sur $state depuis des fonctions afin de réutiliser des portions d’état.
function counter() {
let n = $state(0);
return {
get value() { return n; },
increment() { n++; }
};
}Utiliser dans les bibliothèques
$state fonctionne aussi dans les fichiers .ts/.js s’ils utilisent l’extension .svelte.ts.
Sans suivi
Utilisez untrack() pour lire une valeur d’état sans enregistrer de dépendance.
État brut
Pour de très grandes données non réactives, utilisez $state.raw afin d’ignorer le proxy.
Instantané figé
Utilisez $state.snapshot(obj) pour obtenir une copie ordinaire sans proxy.
Comparaison avec let
$state est le remplacement moderne de let ordinaire avec réactivité implicite.
Vérification rapide
Que se passe-t-il lorsque vous modifiez un objet $state ?
Récapitulatif
$state crée des variables réactives granulaires, notamment des objets et des tableaux dotés de proxies profonds.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 41
- Leçons
- 163
Questions Fréquemment Posées
La leçon « $state : réactivité fine » est-elle gratuite ?
Oui — le texte complet de « $state : réactivité fine » 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 Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « $state : réactivité fine » ?
Déclarez un état réactif avec la rune $state pour mettre à jour le DOM de manière ciblée. Tu pratiques Sveltejs 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 Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs 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 2 sur 4.
Combien de temps prend la leçon « $state : réactivité fine » ?
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 Sveltejs Academy ?
Oui. Chaque leçon Sveltejs 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
- Pourquoi les runes : au-delà de la magie du compilateur
- $state : réactivité fine
- $derived : valeurs calculées déclaratives
- $effect : effets secondaires