1
00:00:01,140 --> 00:00:05,010
Bien, acabamos de ver el poder del estado.

2
00:00:05,010 --> 00:00:07,440
usando la función useState,

3
00:00:07,440 --> 00:00:09,960
pero ahora comprendamos mejor

4
00:00:09,960 --> 00:00:13,053
de cómo funciona exactamente el estado en React.

5
00:00:14,310 --> 00:00:17,700
Y partamos de un principio fundamental de React.

6
00:00:17,700 --> 00:00:20,610
que ya hemos comentado anteriormente.

7
00:00:20,610 --> 00:00:23,760
Entonces recuerda cómo aprendimos eso en React.

8
00:00:23,760 --> 00:00:26,610
No manipulamos el DOM directamente.

9
00:00:26,610 --> 00:00:30,660
cuando queremos actualizar la vista de un componente, ¿verdad?

10
00:00:30,660 --> 00:00:34,440
Entonces React es declarativo, no imperativo,

11
00:00:34,440 --> 00:00:37,860
y por eso nunca tocamos el DOM en nuestro código.

12
00:00:37,860 --> 00:00:39,300
Pero si ese es el caso,

13
00:00:39,300 --> 00:00:41,700
entonces esto nos lleva a la pregunta de,

14
00:00:41,700 --> 00:00:44,760
¿Cómo actualizamos el componente en la pantalla?

15
00:00:44,760 --> 00:00:46,860
cada vez que algunos datos cambian

16
00:00:46,860 --> 00:00:51,450
¿O cada vez que necesitamos responder a algún evento como un clic?

17
00:00:51,450 --> 00:00:52,560
Ahora ya lo sabemos

18
00:00:52,560 --> 00:00:55,170
que la respuesta a esta pregunta es estado,

19
00:00:55,170 --> 00:00:59,520
pero aquí intentamos derivarlo de los primeros principios.

20
00:00:59,520 --> 00:01:02,580
De todos modos, para responder a esa pregunta,

21
00:01:02,580 --> 00:01:06,420
Necesitamos comprender otro principio fundamental de React,

22
00:01:06,420 --> 00:01:10,410
cuál es el hecho de que React actualiza una vista de componente

23
00:01:10,410 --> 00:01:13,920
volviendo a renderizar ese componente completo

24
00:01:13,920 --> 00:01:16,920
cada vez que cambian los datos subyacentes.

25
00:01:16,920 --> 00:01:19,440
Ahora, tan pronto como lleguemos a la sección

26
00:01:19,440 --> 00:01:22,110
sobre cómo funciona React detrás de escena,

27
00:01:22,110 --> 00:01:24,780
aprenderemos exactamente lo que realmente sucede

28
00:01:24,780 --> 00:01:28,410
inside React cuando un componente se vuelve a renderizar.

29
00:01:28,410 --> 00:01:32,190
Pero por ahora, sólo debes saber que volver a renderizar básicamente significa

30
00:01:32,190 --> 00:01:35,430
que React vuelve a llamar a la función del componente,

31
00:01:35,430 --> 00:01:38,850
así cada vez que se renderiza el componente.

32
00:01:38,850 --> 00:01:42,210
Conceptualmente podemos imaginar esto como React.

33
00:01:42,210 --> 00:01:45,420
eliminando toda la vista y reemplazándola

34
00:01:45,420 --> 00:01:49,830
con uno nuevo cada vez que es necesario volver a renderizar.

35
00:01:49,830 --> 00:01:54,240
Pero nuevamente, aprenderemos exactamente qué sucede más adelante.

36
00:01:54,240 --> 00:01:57,120
Ahora, React conserva el estado del componente.

37
00:01:57,120 --> 00:01:58,680
a lo largo de los renderizados,

38
00:01:58,680 --> 00:02:01,710
y así, aunque un componente se puede renderizar

39
00:02:01,710 --> 00:02:04,740
y re-renderizado una y otra vez,

40
00:02:04,740 --> 00:02:07,170
el estado no se restablecerá

41
00:02:07,170 --> 00:02:11,070
a menos que el componente desaparezca por completo de la interfaz de usuario,

42
00:02:11,070 --> 00:02:14,400
que es lo que llamamos desmontar.

43
00:02:14,400 --> 00:02:18,510
Ahora hablando de estado, es cuando se actualiza el estado.

44
00:02:18,510 --> 00:02:22,620
que un componente se vuelva a renderizar automáticamente.

45
00:02:22,620 --> 00:02:27,090
Entonces imaginemos que hay un controlador de eventos en la vista,

46
00:02:27,090 --> 00:02:30,630
por ejemplo, en un botón en el que el usuario puede hacer clic.

47
00:02:30,630 --> 00:02:33,480
Entonces, en el momento en que se hace clic en ese botón,

48
00:02:33,480 --> 00:02:36,990
Podemos actualizar una parte del estado en nuestro componente.

49
00:02:36,990 --> 00:02:41,040
usando la función set proveniente del gancho useState.

50
00:02:41,040 --> 00:02:44,880
Así como lo hicimos en la última conferencia, ¿verdad?

51
00:02:44,880 --> 00:02:48,720
Luego, cuando React ve que el estado ha cambiado,

52
00:02:48,720 --> 00:02:51,720
automáticamente volverá a renderizar el componente,

53
00:02:51,720 --> 00:02:56,720
lo que dará como resultado una vista actualizada para este componente.

54
00:02:56,940 --> 00:02:59,100
O como un ejemplo más real,

55
00:02:59,100 --> 00:03:01,860
podemos mirar la aplicación de consejos simples

56
00:03:01,860 --> 00:03:05,970
que construimos justo en la primera lección del curso.

57
00:03:05,970 --> 00:03:08,190
Entonces en esa aplicación,

58
00:03:08,190 --> 00:03:11,010
cada vez que hacemos clic en el botón recibir consejo,

59
00:03:11,010 --> 00:03:15,180
Se obtiene un nuevo consejo de la API.

60
00:03:15,180 --> 00:03:17,130
Luego, cuando lleguen esos datos,

61
00:03:17,130 --> 00:03:20,550
almacenamos los datos en la variable de estado de asesoramiento,

62
00:03:20,550 --> 00:03:22,923
entonces actualizamos el estado del aviso.

63
00:03:23,790 --> 00:03:25,110
Así que imaginemos

64
00:03:25,110 --> 00:03:29,610
que el nuevo consejo es que la calidad supera a la cantidad.

65
00:03:29,610 --> 00:03:32,190
React notará el cambio de estado.

66
00:03:32,190 --> 00:03:34,200
y volver a renderizar el componente.

67
00:03:34,200 --> 00:03:36,510
Entonces eliminará el viejo.

68
00:03:36,510 --> 00:03:41,010
y mostrar una nueva vista de componente actualizada en la pantalla.

69
00:03:41,010 --> 00:03:43,290
Y con esto espero que la mecánica

70
00:03:43,290 --> 00:03:47,640
de estado en React ahora son realmente claros para usted.

71
00:03:47,640 --> 00:03:52,140
Entonces, la conclusión de todo esto es que, como desarrolladores de React,

72
00:03:52,140 --> 00:03:55,050
cada vez que queremos actualizar una vista de componente,

73
00:03:55,050 --> 00:03:56,880
actualizamos su estado.

74
00:03:56,880 --> 00:04:00,120
Y entonces React reaccionará a esa actualización.

75
00:04:00,120 --> 00:04:01,710
y hacer lo suyo.

76
00:04:01,710 --> 00:04:06,660
Y de hecho, todo este mecanismo es tan fundamental para React.

77
00:04:06,660 --> 00:04:09,000
que en realidad es la razón

78
00:04:09,000 --> 00:04:12,870
Por qué React se llama React en primer lugar.

79
00:04:12,870 --> 00:04:16,650
Entonces, en un nivel alto, pasando del nivel de componente

80
00:04:16,650 --> 00:04:21,540
al nivel de aplicación ahora, React reacciona a los cambios de estado

81
00:04:21,540 --> 00:04:24,750
volviendo a representar la interfaz de usuario.

82
00:04:24,750 --> 00:04:26,970
Eso es lo principal que hace.

83
00:04:26,970 --> 00:04:31,770
Y por eso se decidió llamar a esta biblioteca React.

84
00:04:31,770 --> 00:04:34,350
Y con esto hemos cerrado el círculo.

85
00:04:34,350 --> 00:04:38,220
desde la primera conferencia sobre por qué existen los marcos.

86
00:04:38,220 --> 00:04:40,620
Allí aprendimos que los marcos existen.

87
00:04:40,620 --> 00:04:43,380
para mantener la interfaz de usuario sincronizada con los datos.

88
00:04:43,380 --> 00:04:48,063
Y ahora hemos aprendido un poco mejor cómo React hace eso.