1
00:00:01,080 --> 00:00:04,110
Al terminar esta primera inmersión en el estado,

2
00:00:04,110 --> 00:00:06,810
Quiero compartir algunos pensamientos más importantes,

3
00:00:06,810 --> 00:00:11,373
o ideas, sobre el estado, así como algunas pautas prácticas.

4
00:00:13,440 --> 00:00:14,790
Entonces, antes que nada,

5
00:00:14,790 --> 00:00:17,130
hay un detalle técnico importante

6
00:00:17,130 --> 00:00:21,150
que debes tener en cuenta, y esto puede parecer obvio

7
00:00:21,150 --> 00:00:23,400
pero aún así vale la pena mencionarlo.

8
00:00:23,400 --> 00:00:25,050
Entonces, de lo que estoy hablando

9
00:00:25,050 --> 00:00:27,450
es el hecho de que cada componente

10
00:00:27,450 --> 00:00:31,410
realmente tiene y gestiona su propio Estado.

11
00:00:31,410 --> 00:00:35,220
Entonces, incluso si renderizamos el mismo componente varias veces

12
00:00:35,220 --> 00:00:39,060
en una página, cada una de estas instancias de componentes

13
00:00:39,060 --> 00:00:42,960
funcionará independientemente de todos los demás.

14
00:00:42,960 --> 00:00:46,290
Entonces, en este ejemplo, los tres componentes del contador

15
00:00:46,290 --> 00:00:49,740
todos comienzan con una parte del estado llamada "Puntuación",

16
00:00:49,740 --> 00:00:52,710
que inicialmente se fija en cero.

17
00:00:52,710 --> 00:00:55,800
Luego, si se hace clic en uno de los botones,

18
00:00:55,800 --> 00:00:59,340
que aumenta la puntuación en uno por cada clic,

19
00:00:59,340 --> 00:01:02,250
pero sólo en ese componente.

20
00:01:02,250 --> 00:01:06,210
El estado de todos los demás componentes sigue siendo el mismo.

21
00:01:06,210 --> 00:01:10,320
Entonces, nuevamente, si cambiamos el estado en uno de los componentes,

22
00:01:10,320 --> 00:01:13,830
eso no afectará a los demás componentes en absoluto.

23
00:01:13,830 --> 00:01:15,600
Y lo mismo, por supuesto,

24
00:01:15,600 --> 00:01:19,560
Esto sucederá cuando hagamos clic en uno de los otros botones,

25
00:01:19,560 --> 00:01:22,860
o incluso cuando se retira uno de los componentes

26
00:01:22,860 --> 00:01:25,260
de la interfaz de usuario por completo.

27
00:01:25,260 --> 00:01:29,673
Entonces, el estado realmente está aislado dentro de cada componente.

28
00:01:30,780 --> 00:01:33,750
Ahora bien, si analizamos todo lo que acabamos de aprender

29
00:01:33,750 --> 00:01:36,630
sobre el estado, podemos llegar a la conclusión

30
00:01:36,630 --> 00:01:40,770
que básicamente podemos pensar en la vista completa de la aplicación,

31
00:01:40,770 --> 00:01:45,770
entonces, toda la interfaz de usuario, en función del estado.

32
00:01:45,930 --> 00:01:48,600
O, en otras palabras, toda la interfaz de usuario.

33
00:01:48,600 --> 00:01:52,440
es siempre una representación de todos los estados actuales

34
00:01:52,440 --> 00:01:54,720
en todos los componentes.

35
00:01:54,720 --> 00:01:58,020
Y, llevando esta idea un paso más allá,

36
00:01:58,020 --> 00:02:01,410
una aplicación React se trata fundamentalmente de

37
00:02:01,410 --> 00:02:04,560
cambiando de estado con el tiempo y, por supuesto,

38
00:02:04,560 --> 00:02:08,940
además, mostrando correctamente ese estado en todo momento.

39
00:02:08,940 --> 00:02:12,150
Y esto es realmente lo que el enfoque declarativo

40
00:02:12,150 --> 00:02:16,080
se trata la construcción de interfaces de usuario.

41
00:02:16,080 --> 00:02:20,820
Entonces, en lugar de ver una interfaz de usuario como manipulaciones DOM explícitas,

42
00:02:20,820 --> 00:02:23,550
con el estado, ahora vemos una interfaz de usuario

43
00:02:23,550 --> 00:02:27,420
como un reflejo de los datos que cambian con el tiempo.

44
00:02:27,420 --> 00:02:30,060
Y, como ya sabéis, describimos

45
00:02:30,060 --> 00:02:32,880
ese reflejo de datos usando el estado,

46
00:02:32,880 --> 00:02:35,790
controladores de eventos y JSX.

47
00:02:35,790 --> 00:02:40,260
Entonces, describimos la interfaz de usuario, React hace el resto.

48
00:02:40,260 --> 00:02:42,180
Ahora bien, todo esto puede sonar un poco

49
00:02:42,180 --> 00:02:44,850
filosófico en este punto de su viaje,

50
00:02:44,850 --> 00:02:48,090
pero créeme, a medida que adquieras más y más experiencia

51
00:02:48,090 --> 00:02:51,690
en la creación de aplicaciones React y el trabajo con el estado,

52
00:02:51,690 --> 00:02:54,810
entenderás verdadera y profundamente todo

53
00:02:54,810 --> 00:02:55,923
Acabo de decir aquí.

54
00:02:57,360 --> 00:02:59,580
Ahora bien, y ya para terminar,

55
00:02:59,580 --> 00:03:01,740
déjame darte algunas pautas

56
00:03:01,740 --> 00:03:04,680
sobre cómo utilizar el estado en la práctica.

57
00:03:04,680 --> 00:03:07,080
Por lo tanto, las pautas prácticas siempre son

58
00:03:07,080 --> 00:03:08,940
lo que más les gusta a los estudiantes,

59
00:03:08,940 --> 00:03:12,450
y aquí esto también sirve como resumen

60
00:03:12,450 --> 00:03:14,550
del Estado en general.

61
00:03:14,550 --> 00:03:18,240
Y estas pautas son para que las tengas como referencia,

62
00:03:18,240 --> 00:03:20,400
Entonces, hay mucho texto aquí.

63
00:03:20,400 --> 00:03:23,160
que repasaré rápidamente ahora.

64
00:03:23,160 --> 00:03:25,530
Entonces, antes que nada, debes crear

65
00:03:25,530 --> 00:03:28,200
una nueva variable de estado para cualquier dato

66
00:03:28,200 --> 00:03:31,920
que un componente debe seguir a lo largo del tiempo.

67
00:03:31,920 --> 00:03:34,470
Y la manera fácil de resolver esto.

68
00:03:34,470 --> 00:03:37,440
es pensar en variables que necesitan cambiar

69
00:03:37,440 --> 00:03:39,960
en algún momento en el futuro.

70
00:03:39,960 --> 00:03:43,740
Entonces, si estás acostumbrado a crear aplicaciones en Vanilla JavaScript,

71
00:03:43,740 --> 00:03:45,690
esas serían variables definidas

72
00:03:45,690 --> 00:03:50,550
con "let" o con "var", o también un array, u objeto,

73
00:03:50,550 --> 00:03:54,180
que muta a lo largo del ciclo de vida de las aplicaciones.

74
00:03:54,180 --> 00:03:57,870
Entonces, en React, usas el estado para esos.

75
00:03:57,870 --> 00:04:02,280
Otra forma de saber cuándo necesitas el estado es esta.

76
00:04:02,280 --> 00:04:04,530
Siempre que quieras algo en un componente

77
00:04:04,530 --> 00:04:07,290
ser dinámico, crear un pedazo de estado

78
00:04:07,290 --> 00:04:11,070
relacionado con esa "cosa" y luego actualizar el estado

79
00:04:11,070 --> 00:04:13,470
cuando la "cosa" debería cambiar,

80
00:04:13,470 --> 00:04:17,280
o, dicho de otro modo, cuando necesitas que sea dinámico.

81
00:04:17,280 --> 00:04:20,790
Ahora bien, dado que esta "cosa" es un poco abstracta,

82
00:04:20,790 --> 00:04:23,280
pensemos en una ventana modal

83
00:04:23,280 --> 00:04:26,430
que puede estar abierto o cerrado.

84
00:04:26,430 --> 00:04:29,940
Entonces, para una ventana modal, podemos crear una variable de estado.

85
00:04:29,940 --> 00:04:32,910
llamado "isOpen", que realizará un seguimiento

86
00:04:32,910 --> 00:04:37,170
de si el modelo está actualmente abierto o no.

87
00:04:37,170 --> 00:04:40,860
Luego, cuando "isOpen" es verdadero, mostramos la ventana

88
00:04:40,860 --> 00:04:44,280
en pantalla, y si es falso lo ocultamos.

89
00:04:44,280 --> 00:04:46,230
Sencillo, ¿verdad?

90
00:04:46,230 --> 00:04:48,120
Entonces, cuando quieras cambiar

91
00:04:48,120 --> 00:04:50,430
la forma en que se ve un componente,

92
00:04:50,430 --> 00:04:52,440
o los datos que muestra,

93
00:04:52,440 --> 00:04:55,590
simplemente actualice su estado, lo que suele hacer

94
00:04:55,590 --> 00:04:58,530
dentro de una función de controlador de eventos.

95
00:04:58,530 --> 00:05:01,620
Ahora, cuando estás construyendo tus componentes,

96
00:05:01,620 --> 00:05:05,880
Será útil imaginar siempre la vista de componentes,

97
00:05:05,880 --> 00:05:09,540
entonces el componente representado en la pantalla, como un reflejo

98
00:05:09,540 --> 00:05:12,663
del estado cambiando y evolucionando con el tiempo.

99
00:05:13,680 --> 00:05:16,200
Finalmente, hay un error común.

100
00:05:16,200 --> 00:05:19,740
que hacen muchos principiantes, que es usar estado

101
00:05:19,740 --> 00:05:23,820
para cada variable que necesita en un componente,

102
00:05:23,820 --> 00:05:26,280
pero eso realmente no es necesario.

103
00:05:26,280 --> 00:05:29,160
Entonces, no uses el estado para las variables.

104
00:05:29,160 --> 00:05:32,670
eso no debería provocar una nueva renderización, ¿vale?

105
00:05:32,670 --> 00:05:36,030
Porque eso sólo provocará re-renderizaciones innecesarias.

106
00:05:36,030 --> 00:05:38,670
lo que puede causar problemas de rendimiento.

107
00:05:38,670 --> 00:05:40,170
Entonces, es muy común necesitar

108
00:05:40,170 --> 00:05:42,870
algunas variables que no son de estado.

109
00:05:42,870 --> 00:05:44,700
Y para esos, puedes usar

110
00:05:44,700 --> 00:05:47,670
variables regulares definidas con "const."

111
00:05:47,670 --> 00:05:50,523
Pero volveremos a esto en la siguiente sección.

112
00:05:51,390 --> 00:05:54,540
Muy bien, este es mi primer conjunto de pautas.

113
00:05:54,540 --> 00:05:58,740
sobre el Estado, que debería ser más que suficiente por ahora.

114
00:05:58,740 --> 00:06:01,170
Entonces, si realmente internalizas esto,

115
00:06:01,170 --> 00:06:03,900
luego construir aplicaciones React en el futuro

116
00:06:03,900 --> 00:06:06,510
Debería ser mucho más fácil para ti.

117
00:06:06,510 --> 00:06:09,300
Y digo esto porque realmente creo

118
00:06:09,300 --> 00:06:13,020
Ese estado de dominio es la parte más difícil.

119
00:06:13,020 --> 00:06:16,650
de aprender React, pero una vez que superes este obstáculo

120
00:06:16,650 --> 00:06:19,680
e interiorizar verdaderamente cuando necesites estado

121
00:06:19,680 --> 00:06:21,300
y cómo funciona todo,

122
00:06:21,300 --> 00:06:24,510
desbloqueará el desarrollo de React para usted.

123
00:06:24,510 --> 00:06:27,630
Y por eso pasé tanto tiempo aquí.

124
00:06:27,630 --> 00:06:29,733
mostrándote cómo funciona el estado.