Entonces aprendimos cómo usar controladores de eventos,
pero ahora los queremos
realmente hacer algo útil, ¿verdad?
Por eso queremos que el componente sea interactivo.
y por eso,
Como ya he mencionado, necesitamos Estado.
Ahora, sin duda,
El estado es el concepto más importante en React.
Básicamente, todo gira en torno al estado en React.
Y así seguiremos aprendiendo sobre el estado.
a lo largo de todo el curso.
Por lo tanto, comencemos con una descripción general.
de qué exactamente aprenderás sobre el estado
mientras realiza este curso.
Primero, aprenderemos qué es realmente el estado,
qué hace y por qué lo necesitamos,
de eso se trata esta sección.
Entonces, necesitamos aprender cómo usar el estado en la práctica.
usando los ganchos useState o useReducer,
la API de contexto, o incluso herramientas externas como Redux.
También necesitaremos comprender profundamente
cómo pensar en el estado en React.
Y estos son temas para secciones futuras.
Bien, y con esto fuera del camino,
Ahora estamos listos para aprender qué es realmente el estado.
Entonces, hemos aprendido
cómo pasar datos a un componente mediante el uso de accesorios,
que, recuerda, son datos
eso viene desde fuera del componente.
Pero, ¿qué pasa si un componente necesita contener sus propios datos?
¿Y también mantenerlo en el tiempo?
Además, ¿qué pasa si realmente queremos que nuestra aplicación sea interactiva?
¿Cambiar la interfaz de usuario como resultado de una acción?
Bueno, ahí es donde finalmente entra en juego el Estado.
Entonces el estado es básicamente datos.
que un componente puede resistir en el tiempo,
y lo usamos para información
que un componente necesita recordar a lo largo de su ciclo de vida.
Por lo tanto, podemos pensar en el estado.
como la memoria de un componente.
Creo que esa puede ser una analogía bastante útil.
Ahora bien, los ejemplos de estado pueden ser cosas simples.
como un recuento de notificaciones,
el contenido de texto de un campo de entrada,
o la pestaña activa en un componente de pestaña.
También pueden ser datos un poco más complejos,
por ejemplo, el contenido de un carrito de compras.
Ahora bien, ¿qué tienen en común todos estos estados?
es que en la aplicación,
el usuario puede cambiar fácilmente estos valores.
Por ejemplo, cuando leen una notificación,
la cuenta bajará en uno,
o cuando hacen clic en otra pestaña,
esa pestaña se activará.
Y, por tanto, cada uno de estos componentes
necesita poder retener estos datos a lo largo del tiempo,
así durante el ciclo de vida de la aplicación.
Y por esa razón,
cada una de estas piezas de información es una pieza de estado.
Y observe cómo uso el término estado aquí,
porque sólo el término estado en sí
es más un término general.
Entonces, un fragmento de estado, o una variable de estado,
es solo una única variable real en el componente
que podemos definir en nuestro código.
por otro lado,
El término estado en sí se refiere más al estado entero.
en el que se encuentra el componente,
como toda la condición en un momento determinado.
Entonces, básicamente, el término general estado
son todas las piezas del estado juntas.
Y si esto suena confuso, no te preocupes.
Estas son sólo algunas diferencias menores en terminología.
En la práctica, solemos utilizar los términos estado,
pieza de estado y variable de estado de manera bastante intercambiable.
Pero de todos modos, sigamos adelante.
al aspecto más importante del estado,
cuál es el hecho de que la actualización del estado desencadena React
para volver a renderizar el componente.
Entonces, nuevamente, cada vez que actualizamos
una parte de estado en un componente,
esto hará que React vuelva a renderizar ese componente
en la interfaz de usuario.
Entonces creará una nueva vista actualizada para ese componente.
Y la vista de un componente es básicamente solo el componente.
representado visualmente en la pantalla,
así en la interfaz de usuario.
Ahora bien, hasta este punto,
Siempre he usado el término genérico interfaz de usuario,
pero ahora en realidad estamos hablando de un solo componente.
Y cuando se renderiza un solo componente,
A eso lo llamamos vista.
Y así todas las vistas combinadas.
luego cree la interfaz de usuario final.
Ahora bien, ¿recuerdas este pequeño diagrama?
que vimos justo al principio del curso
cuando hablamos por primera vez sobre cómo reaccionar
¿Mantiene automáticamente los datos sincronizados con la interfaz de usuario?
Bueno, el estado es cómo React hace eso.
Entonces, el estado es cómo React mantiene la interfaz de usuario.
en sincronía con los datos.
Cambiamos el estado, cambiamos la UI.
Entonces, resumiendo, el estado permite a los desarrolladores
hacer dos cosas importantes.
Primero, el estado nos permite actualizar la vista del componente.
volviendo a renderizar el componente.
Entonces nos brinda una manera de cambiar parte de la interfaz de usuario.
En segundo lugar, el estado permite a los desarrolladores conservar las variables locales.
entre múltiples renderizados y rerenderizados.
Entonces, si piensas en esto, el estado es básicamente una herramienta.
Y, de hecho, es la herramienta más poderosa
que tenemos en el mundo de React.
Entonces, comprender cómo funciona un Estado y qué hace,
entender así la mecánica del estado,
desbloqueará el poder del desarrollo de React para usted.
Pero, antes de entender la mecánica del estado,
En realidad, primero volvamos a nuestro código.
y utilice esta poderosa herramienta en la práctica por primera vez.