Android Academy · Lección

Elevación del estado

Eleve el estado para crear composables reutilizables

Elevación del estado es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 4 lecciones en total.

¿Qué es elevar el estado?

Elevar el estado significa moverlo hacia arriba, fuera de un composable y al código que lo llama. El composable se vuelve sin estado: solo recibe un valor e informa de los cambios.

Con estado frente a sin estado

Un composable con estado posee su estado mediante remember. Uno sin estado no contiene estado; recibe el valor como parámetro y expone un evento. Los composables sin estado son más fáciles de reutilizar y probar.

El patrón value + onValueChange

La estructura estándar para elevar el estado tiene dos parámetros: un value (el estado actual, que se pasa hacia abajo) y una lambda onValueChange (el evento, que se pasa hacia arriba).

@Composable
fun NameField(value: String, onValueChange: (String) -> Unit) {
    TextField(value = value, onValueChange = onValueChange)
}

Antes de elevar el estado

Aquí el composable posee su propio estado. Funciona, pero el elemento padre no puede acceder al texto y el composable es más difícil de reutilizar.

@Composable
fun NameField() {
    var name by remember { mutableStateOf("") }
    TextField(value = name, onValueChange = { name = it })
}

Después de elevar el estado

Ahora el estado vive en el elemento padre. El campo no tiene estado y se puede reutilizar; el elemento padre controla el valor.

@Composable
fun Parent() {
    var name by remember { mutableStateOf("") }
    NameField(value = name, onValueChange = { name = it })
}

Hacia abajo y hacia arriba

El patrón es el estado fluye hacia abajo y los eventos hacia arriba. El valor baja como parámetro y los cambios suben mediante la devolución de llamada. Esto se denomina flujo de datos unidireccional.

¿Por qué elevar el estado?

Elevar el estado permite que varios composables compartan el mismo estado, que el elemento padre reaccione a los cambios y que el elemento hijo sea una función pura de sus entradas, algo perfecto para las vistas previas y las pruebas.

Dónde elevar el estado

Eleve el estado al ancestro común más bajo que lo necesite. Si solo un composable usa el estado, puede que no sea necesario elevarlo. Hágalo cuando algo situado por encima necesite leerlo o controlarlo.

Un ejemplo compartido

Aquí una única parte del estado controla tanto un campo como una vista previa en directo, algo posible únicamente porque el estado se ha elevado.

@Composable
fun Editor() {
    var text by remember { mutableStateOf("") }
    Column {
        TextField(value = text, onValueChange = { text = it })
        Text(text = "Preview: $text")
    }
}

Sin estado significa reutilizable

Como un composable sin estado recibe su valor como parámetro, puede mostrarlo en una vista previa con datos de ejemplo y usarlo en cualquier lugar con distintos propietarios del estado.

@Preview
@Composable
fun NameFieldPreview() {
    NameField(value = "Sample", onValueChange = {})
}

Unir todos los conceptos

Un contador reutilizable en el que el elemento padre posee el contador y el botón no tiene estado.

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

Comprobación rápida

Al elevar el estado, ¿qué dos elementos suele exponer el composable sin estado?

Repaso

Elevar el estado:

Mueva el estado al código que llama al composable y haga que el elemento hijo no tenga estado.
Use el patrón value + onValueChange.
Estado hacia abajo, eventos hacia arriba: flujo de datos unidireccional.
Eleve el estado al ancestro común más bajo que lo necesite.

Preguntas frecuentes

¿La lección «Elevación del estado» es gratis?

Sí — el texto completo de «Elevación del estado» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Elevación del estado»?

Eleve el estado para crear composables reutilizables Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Android Academy?

No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Elevación del estado»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Android Academy?

Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Android Academy