Bien, acabamos de ver el poder del estado.
usando la función useState,
pero ahora comprendamos mejor
de cómo funciona exactamente el estado en React.
Y partamos de un principio fundamental de React.
que ya hemos comentado anteriormente.
Entonces recuerda cómo aprendimos eso en React.
No manipulamos el DOM directamente.
cuando queremos actualizar la vista de un componente, ¿verdad?
Entonces React es declarativo, no imperativo,
y por eso nunca tocamos el DOM en nuestro código.
Pero si ese es el caso,
entonces esto nos lleva a la pregunta de,
¿Cómo actualizamos el componente en la pantalla?
cada vez que algunos datos cambian
¿O cada vez que necesitamos responder a algún evento como un clic?
Ahora ya lo sabemos
que la respuesta a esta pregunta es estado,
pero aquí intentamos derivarlo de los primeros principios.
De todos modos, para responder a esa pregunta,
Necesitamos comprender otro principio fundamental de React,
cuál es el hecho de que React actualiza una vista de componente
volviendo a renderizar ese componente completo
cada vez que cambian los datos subyacentes.
Ahora, tan pronto como lleguemos a la sección
sobre cómo funciona React detrás de escena,
aprenderemos exactamente lo que realmente sucede
inside React cuando un componente se vuelve a renderizar.
Pero por ahora, sólo debes saber que volver a renderizar básicamente significa
que React vuelve a llamar a la función del componente,
así cada vez que se renderiza el componente.
Conceptualmente podemos imaginar esto como React.
eliminando toda la vista y reemplazándola
con uno nuevo cada vez que es necesario volver a renderizar.
Pero nuevamente, aprenderemos exactamente qué sucede más adelante.
Ahora, React conserva el estado del componente.
a lo largo de los renderizados,
y así, aunque un componente se puede renderizar
y re-renderizado una y otra vez,
el estado no se restablecerá
a menos que el componente desaparezca por completo de la interfaz de usuario,
que es lo que llamamos desmontar.
Ahora hablando de estado, es cuando se actualiza el estado.
que un componente se vuelva a renderizar automáticamente.
Entonces imaginemos que hay un controlador de eventos en la vista,
por ejemplo, en un botón en el que el usuario puede hacer clic.
Entonces, en el momento en que se hace clic en ese botón,
Podemos actualizar una parte del estado en nuestro componente.
usando la función set proveniente del gancho useState.
Así como lo hicimos en la última conferencia, ¿verdad?
Luego, cuando React ve que el estado ha cambiado,
automáticamente volverá a renderizar el componente,
lo que dará como resultado una vista actualizada para este componente.
O como un ejemplo más real,
podemos mirar la aplicación de consejos simples
que construimos justo en la primera lección del curso.
Entonces en esa aplicación,
cada vez que hacemos clic en el botón recibir consejo,
Se obtiene un nuevo consejo de la API.
Luego, cuando lleguen esos datos,
almacenamos los datos en la variable de estado de asesoramiento,
entonces actualizamos el estado del aviso.
Así que imaginemos
que el nuevo consejo es que la calidad supera a la cantidad.
React notará el cambio de estado.
y volver a renderizar el componente.
Entonces eliminará el viejo.
y mostrar una nueva vista de componente actualizada en la pantalla.
Y con esto espero que la mecánica
de estado en React ahora son realmente claros para usted.
Entonces, la conclusión de todo esto es que, como desarrolladores de React,
cada vez que queremos actualizar una vista de componente,
actualizamos su estado.
Y entonces React reaccionará a esa actualización.
y hacer lo suyo.
Y de hecho, todo este mecanismo es tan fundamental para React.
que en realidad es la razón
Por qué React se llama React en primer lugar.
Entonces, en un nivel alto, pasando del nivel de componente
al nivel de aplicación ahora, React reacciona a los cambios de estado
volviendo a representar la interfaz de usuario.
Eso es lo principal que hace.
Y por eso se decidió llamar a esta biblioteca React.
Y con esto hemos cerrado el círculo.
desde la primera conferencia sobre por qué existen los marcos.
Allí aprendimos que los marcos existen.
para mantener la interfaz de usuario sincronizada con los datos.
Y ahora hemos aprendido un poco mejor cómo React hace eso.