Remontée de l'état
Remontez l'état pour créer des composables réutilisables.
Remontée de l'état est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 4 leçons au total.
Qu’est-ce que la remontée d’état ?
La remontée d’état consiste à déplacer l’état vers le haut, en dehors d’une fonction composable, pour le confier à son appelant. La fonction composable devient sans état : elle reçoit simplement une valeur et signale les changements.
Avec état ou sans état
Une fonction composable avec état possède son état grâce à remember. Une fonction composable sans état ne contient aucun état : elle reçoit la valeur en paramètre et expose un événement. Les fonctions composables sans état sont plus faciles à réutiliser et à tester.
Le modèle value + onValueChange
La forme standard de la remontée d’état comporte deux paramètres : une value (l’état actuel, transmis vers le bas) et une lambda onValueChange (l’événement, transmis vers le haut).
@Composable
fun NameField(value: String, onValueChange: (String) -> Unit) {
TextField(value = value, onValueChange = onValueChange)
}Avant la remontée d’état
Ici, la fonction composable possède son état. Elle fonctionne, mais le parent n’a pas accès au texte et la fonction composable est plus difficile à réutiliser.
@Composable
fun NameField() {
var name by remember { mutableStateOf("") }
TextField(value = name, onValueChange = { name = it })
}Après la remontée d’état
Désormais, l’état se trouve dans le parent. Le champ est sans état et réutilisable ; le parent contrôle la valeur.
@Composable
fun Parent() {
var name by remember { mutableStateOf("") }
NameField(value = name, onValueChange = { name = it })
}Vers le bas et vers le haut
Le modèle est le suivant : l’état descend, les événements remontent. La valeur descend en tant que paramètre ; les changements remontent par le rappel. C’est ce qu’on appelle le flux de données unidirectionnel.
Pourquoi remonter l’état ?
La remontée d’état permet à plusieurs fonctions composables de partager le même état, au parent de réagir aux changements, et transforme l’enfant en fonction pure de ses entrées — ce qui est idéal pour les aperçus et les tests.
Où remonter l’état
Remontez l’état jusqu’à l’ancêtre commun le plus bas qui en a besoin. Si une seule fonction composable utilise l’état, il peut être inutile de le remonter. Faites-le lorsqu’un élément situé plus haut doit le lire ou le contrôler.
Un exemple partagé
Ici, une seule partie de l’état pilote à la fois un champ et un aperçu en direct, ce qui n’est possible que parce que l’état a été remonté.
@Composable
fun Editor() {
var text by remember { mutableStateOf("") }
Column {
TextField(value = text, onValueChange = { text = it })
Text(text = "Preview: $text")
}
}Sans état, donc réutilisable
Comme une fonction composable sans état reçoit sa valeur en paramètre, vous pouvez l’afficher en aperçu avec des données d’exemple et l’utiliser partout avec différents propriétaires de l’état.
@Preview
@Composable
fun NameFieldPreview() {
NameField(value = "Sample", onValueChange = {})
}Mettre tout en pratique
Un compteur réutilisable dans lequel le parent possède le compteur et le bouton est sans état.
@Composable
fun CounterButton(count: Int, onIncrement: () -> Unit) {
Button(onClick = onIncrement) {
Text(text = "Count: $count")
}
}
@Composable
fun Screen() {
var count by remember { mutableStateOf(0) }
CounterButton(count = count, onIncrement = { count++ })
}Vérification rapide
Lors de la remontée d’état, quelles sont les deux choses qu’une fonction composable sans état expose généralement ?
Récapitulatif
Remontée d’état :
- Déplacez l’état vers l’appelant ; rendez l’enfant sans état.
- Utilisez le modèle
value+onValueChange. - L’état descend, les événements remontent — flux de données unidirectionnel.
- Remontez l’état jusqu’à l’ancêtre commun le plus bas qui en a besoin.
Questions Fréquemment Posées
La leçon « Remontée de l'état » est-elle gratuite ?
Oui — le texte complet de « Remontée de l'état » 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 Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Remontée de l'état » ?
Remontez l'état pour créer des composables réutilisables. Tu pratiques Android 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 Android Academy ?
Aucune expérience préalable n'est requise. Android 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 3 sur 4.
Combien de temps prend la leçon « Remontée de l'état » ?
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 Android Academy ?
Oui. Chaque leçon Android 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.