Al terminar esta primera inmersión en el estado,
Quiero compartir algunos pensamientos más importantes,
o ideas, sobre el estado, así como algunas pautas prácticas.
Entonces, antes que nada,
hay un detalle técnico importante
que debes tener en cuenta, y esto puede parecer obvio
pero aún así vale la pena mencionarlo.
Entonces, de lo que estoy hablando
es el hecho de que cada componente
realmente tiene y gestiona su propio Estado.
Entonces, incluso si renderizamos el mismo componente varias veces
en una página, cada una de estas instancias de componentes
funcionará independientemente de todos los demás.
Entonces, en este ejemplo, los tres componentes del contador
todos comienzan con una parte del estado llamada "Puntuación",
que inicialmente se fija en cero.
Luego, si se hace clic en uno de los botones,
que aumenta la puntuación en uno por cada clic,
pero sólo en ese componente.
El estado de todos los demás componentes sigue siendo el mismo.
Entonces, nuevamente, si cambiamos el estado en uno de los componentes,
eso no afectará a los demás componentes en absoluto.
Y lo mismo, por supuesto,
Esto sucederá cuando hagamos clic en uno de los otros botones,
o incluso cuando se retira uno de los componentes
de la interfaz de usuario por completo.
Entonces, el estado realmente está aislado dentro de cada componente.
Ahora bien, si analizamos todo lo que acabamos de aprender
sobre el estado, podemos llegar a la conclusión
que básicamente podemos pensar en la vista completa de la aplicación,
entonces, toda la interfaz de usuario, en función del estado.
O, en otras palabras, toda la interfaz de usuario.
es siempre una representación de todos los estados actuales
en todos los componentes.
Y, llevando esta idea un paso más allá,
una aplicación React se trata fundamentalmente de
cambiando de estado con el tiempo y, por supuesto,
además, mostrando correctamente ese estado en todo momento.
Y esto es realmente lo que el enfoque declarativo
se trata la construcción de interfaces de usuario.
Entonces, en lugar de ver una interfaz de usuario como manipulaciones DOM explícitas,
con el estado, ahora vemos una interfaz de usuario
como un reflejo de los datos que cambian con el tiempo.
Y, como ya sabéis, describimos
ese reflejo de datos usando el estado,
controladores de eventos y JSX.
Entonces, describimos la interfaz de usuario, React hace el resto.
Ahora bien, todo esto puede sonar un poco
filosófico en este punto de su viaje,
pero créeme, a medida que adquieras más y más experiencia
en la creación de aplicaciones React y el trabajo con el estado,
entenderás verdadera y profundamente todo
Acabo de decir aquí.
Ahora bien, y ya para terminar,
déjame darte algunas pautas
sobre cómo utilizar el estado en la práctica.
Por lo tanto, las pautas prácticas siempre son
lo que más les gusta a los estudiantes,
y aquí esto también sirve como resumen
del Estado en general.
Y estas pautas son para que las tengas como referencia,
Entonces, hay mucho texto aquí.
que repasaré rápidamente ahora.
Entonces, antes que nada, debes crear
una nueva variable de estado para cualquier dato
que un componente debe seguir a lo largo del tiempo.
Y la manera fácil de resolver esto.
es pensar en variables que necesitan cambiar
en algún momento en el futuro.
Entonces, si estás acostumbrado a crear aplicaciones en Vanilla JavaScript,
esas serían variables definidas
con "let" o con "var", o también un array, u objeto,
que muta a lo largo del ciclo de vida de las aplicaciones.
Entonces, en React, usas el estado para esos.
Otra forma de saber cuándo necesitas el estado es esta.
Siempre que quieras algo en un componente
ser dinámico, crear un pedazo de estado
relacionado con esa "cosa" y luego actualizar el estado
cuando la "cosa" debería cambiar,
o, dicho de otro modo, cuando necesitas que sea dinámico.
Ahora bien, dado que esta "cosa" es un poco abstracta,
pensemos en una ventana modal
que puede estar abierto o cerrado.
Entonces, para una ventana modal, podemos crear una variable de estado.
llamado "isOpen", que realizará un seguimiento
de si el modelo está actualmente abierto o no.
Luego, cuando "isOpen" es verdadero, mostramos la ventana
en pantalla, y si es falso lo ocultamos.
Sencillo, ¿verdad?
Entonces, cuando quieras cambiar
la forma en que se ve un componente,
o los datos que muestra,
simplemente actualice su estado, lo que suele hacer
dentro de una función de controlador de eventos.
Ahora, cuando estás construyendo tus componentes,
Será útil imaginar siempre la vista de componentes,
entonces el componente representado en la pantalla, como un reflejo
del estado cambiando y evolucionando con el tiempo.
Finalmente, hay un error común.
que hacen muchos principiantes, que es usar estado
para cada variable que necesita en un componente,
pero eso realmente no es necesario.
Entonces, no uses el estado para las variables.
eso no debería provocar una nueva renderización, ¿vale?
Porque eso sólo provocará re-renderizaciones innecesarias.
lo que puede causar problemas de rendimiento.
Entonces, es muy común necesitar
algunas variables que no son de estado.
Y para esos, puedes usar
variables regulares definidas con "const."
Pero volveremos a esto en la siguiente sección.
Muy bien, este es mi primer conjunto de pautas.
sobre el Estado, que debería ser más que suficiente por ahora.
Entonces, si realmente internalizas esto,
luego construir aplicaciones React en el futuro
Debería ser mucho más fácil para ti.
Y digo esto porque realmente creo
Ese estado de dominio es la parte más difícil.
de aprender React, pero una vez que superes este obstáculo
e interiorizar verdaderamente cuando necesites estado
y cómo funciona todo,
desbloqueará el desarrollo de React para usted.
Y por eso pasé tanto tiempo aquí.
mostrándote cómo funciona el estado.