1
00:00:01,080 --> 00:00:03,780
Entonces aprendimos cómo usar controladores de eventos,

2
00:00:03,780 --> 00:00:04,980
pero ahora los queremos

3
00:00:04,980 --> 00:00:08,580
realmente hacer algo útil, ¿verdad?

4
00:00:08,580 --> 00:00:11,400
Por eso queremos que el componente sea interactivo.

5
00:00:11,400 --> 00:00:12,360
y por eso,

6
00:00:12,360 --> 00:00:15,513
Como ya he mencionado, necesitamos Estado.

7
00:00:16,890 --> 00:00:18,660
Ahora, sin duda,

8
00:00:18,660 --> 00:00:22,530
El estado es el concepto más importante en React.

9
00:00:22,530 --> 00:00:27,120
Básicamente, todo gira en torno al estado en React.

10
00:00:27,120 --> 00:00:29,730
Y así seguiremos aprendiendo sobre el estado.

11
00:00:29,730 --> 00:00:32,250
a lo largo de todo el curso.

12
00:00:32,250 --> 00:00:34,830
Por lo tanto, comencemos con una descripción general.

13
00:00:34,830 --> 00:00:37,590
de qué exactamente aprenderás sobre el estado

14
00:00:37,590 --> 00:00:40,140
mientras realiza este curso.

15
00:00:40,140 --> 00:00:43,380
Primero, aprenderemos qué es realmente el estado,

16
00:00:43,380 --> 00:00:46,080
qué hace y por qué lo necesitamos,

17
00:00:46,080 --> 00:00:49,710
de eso se trata esta sección.

18
00:00:49,710 --> 00:00:53,850
Entonces, necesitamos aprender cómo usar el estado en la práctica.

19
00:00:53,850 --> 00:00:57,270
usando los ganchos useState o useReducer,

20
00:00:57,270 --> 00:01:02,250
la API de contexto, o incluso herramientas externas como Redux.

21
00:01:02,250 --> 00:01:04,500
También necesitaremos comprender profundamente

22
00:01:04,500 --> 00:01:07,320
cómo pensar en el estado en React.

23
00:01:07,320 --> 00:01:11,040
Y estos son temas para secciones futuras.

24
00:01:11,040 --> 00:01:13,320
Bien, y con esto fuera del camino,

25
00:01:13,320 --> 00:01:16,683
Ahora estamos listos para aprender qué es realmente el estado.

26
00:01:18,210 --> 00:01:19,260
Entonces, hemos aprendido

27
00:01:19,260 --> 00:01:23,460
cómo pasar datos a un componente mediante el uso de accesorios,

28
00:01:23,460 --> 00:01:25,380
que, recuerda, son datos

29
00:01:25,380 --> 00:01:28,800
eso viene desde fuera del componente.

30
00:01:28,800 --> 00:01:33,330
Pero, ¿qué pasa si un componente necesita contener sus propios datos?

31
00:01:33,330 --> 00:01:35,940
¿Y también mantenerlo en el tiempo?

32
00:01:35,940 --> 00:01:40,170
Además, ¿qué pasa si realmente queremos que nuestra aplicación sea interactiva?

33
00:01:40,170 --> 00:01:43,650
¿Cambiar la interfaz de usuario como resultado de una acción?

34
00:01:43,650 --> 00:01:48,360
Bueno, ahí es donde finalmente entra en juego el Estado.

35
00:01:48,360 --> 00:01:50,820
Entonces el estado es básicamente datos.

36
00:01:50,820 --> 00:01:53,700
que un componente puede resistir en el tiempo,

37
00:01:53,700 --> 00:01:55,740
y lo usamos para información

38
00:01:55,740 --> 00:02:00,120
que un componente necesita recordar a lo largo de su ciclo de vida.

39
00:02:00,120 --> 00:02:02,310
Por lo tanto, podemos pensar en el estado.

40
00:02:02,310 --> 00:02:05,250
como la memoria de un componente.

41
00:02:05,250 --> 00:02:08,760
Creo que esa puede ser una analogía bastante útil.

42
00:02:08,760 --> 00:02:12,060
Ahora bien, los ejemplos de estado pueden ser cosas simples.

43
00:02:12,060 --> 00:02:14,340
como un recuento de notificaciones,

44
00:02:14,340 --> 00:02:17,010
el contenido de texto de un campo de entrada,

45
00:02:17,010 --> 00:02:20,460
o la pestaña activa en un componente de pestaña.

46
00:02:20,460 --> 00:02:23,100
También pueden ser datos un poco más complejos,

47
00:02:23,100 --> 00:02:26,700
por ejemplo, el contenido de un carrito de compras.

48
00:02:26,700 --> 00:02:29,730
Ahora bien, ¿qué tienen en común todos estos estados?

49
00:02:29,730 --> 00:02:31,410
es que en la aplicación,

50
00:02:31,410 --> 00:02:34,440
el usuario puede cambiar fácilmente estos valores.

51
00:02:34,440 --> 00:02:36,900
Por ejemplo, cuando leen una notificación,

52
00:02:36,900 --> 00:02:39,240
la cuenta bajará en uno,

53
00:02:39,240 --> 00:02:41,400
o cuando hacen clic en otra pestaña,

54
00:02:41,400 --> 00:02:43,860
esa pestaña se activará.

55
00:02:43,860 --> 00:02:46,170
Y, por tanto, cada uno de estos componentes

56
00:02:46,170 --> 00:02:49,860
necesita poder retener estos datos a lo largo del tiempo,

57
00:02:49,860 --> 00:02:53,100
así durante el ciclo de vida de la aplicación.

58
00:02:53,100 --> 00:02:54,720
Y por esa razón,

59
00:02:54,720 --> 00:02:59,460
cada una de estas piezas de información es una pieza de estado.

60
00:02:59,460 --> 00:03:03,240
Y observe cómo uso el término estado aquí,

61
00:03:03,240 --> 00:03:06,030
porque sólo el término estado en sí

62
00:03:06,030 --> 00:03:08,430
es más un término general.

63
00:03:08,430 --> 00:03:11,730
Entonces, un fragmento de estado, o una variable de estado,

64
00:03:11,730 --> 00:03:15,840
es solo una única variable real en el componente

65
00:03:15,840 --> 00:03:18,300
que podemos definir en nuestro código.

66
00:03:18,300 --> 00:03:19,350
por otro lado,

67
00:03:19,350 --> 00:03:23,310
El término estado en sí se refiere más al estado entero.

68
00:03:23,310 --> 00:03:25,380
en el que se encuentra el componente,

69
00:03:25,380 --> 00:03:29,520
como toda la condición en un momento determinado.

70
00:03:29,520 --> 00:03:32,010
Entonces, básicamente, el término general estado

71
00:03:32,010 --> 00:03:35,250
son todas las piezas del estado juntas.

72
00:03:35,250 --> 00:03:38,400
Y si esto suena confuso, no te preocupes.

73
00:03:38,400 --> 00:03:42,180
Estas son sólo algunas diferencias menores en terminología.

74
00:03:42,180 --> 00:03:45,390
En la práctica, solemos utilizar los términos estado,

75
00:03:45,390 --> 00:03:49,920
pieza de estado y variable de estado de manera bastante intercambiable.

76
00:03:49,920 --> 00:03:52,170
Pero de todos modos, sigamos adelante.

77
00:03:52,170 --> 00:03:55,050
al aspecto más importante del estado,

78
00:03:55,050 --> 00:03:59,190
cuál es el hecho de que la actualización del estado desencadena React

79
00:03:59,190 --> 00:04:01,950
para volver a renderizar el componente.

80
00:04:01,950 --> 00:04:04,680
Entonces, nuevamente, cada vez que actualizamos

81
00:04:04,680 --> 00:04:06,990
una parte de estado en un componente,

82
00:04:06,990 --> 00:04:10,050
esto hará que React vuelva a renderizar ese componente

83
00:04:10,050 --> 00:04:11,880
en la interfaz de usuario.

84
00:04:11,880 --> 00:04:16,440
Entonces creará una nueva vista actualizada para ese componente.

85
00:04:16,440 --> 00:04:20,130
Y la vista de un componente es básicamente solo el componente.

86
00:04:20,130 --> 00:04:22,440
representado visualmente en la pantalla,

87
00:04:22,440 --> 00:04:24,900
así en la interfaz de usuario.

88
00:04:24,900 --> 00:04:26,370
Ahora bien, hasta este punto,

89
00:04:26,370 --> 00:04:30,690
Siempre he usado el término genérico interfaz de usuario,

90
00:04:30,690 --> 00:04:34,710
pero ahora en realidad estamos hablando de un solo componente.

91
00:04:34,710 --> 00:04:37,410
Y cuando se renderiza un solo componente,

92
00:04:37,410 --> 00:04:39,300
A eso lo llamamos vista.

93
00:04:39,300 --> 00:04:41,850
Y así todas las vistas combinadas.

94
00:04:41,850 --> 00:04:45,390
luego cree la interfaz de usuario final.

95
00:04:45,390 --> 00:04:48,330
Ahora bien, ¿recuerdas este pequeño diagrama?

96
00:04:48,330 --> 00:04:50,970
que vimos justo al principio del curso

97
00:04:50,970 --> 00:04:53,760
cuando hablamos por primera vez sobre cómo reaccionar

98
00:04:53,760 --> 00:04:56,763
¿Mantiene automáticamente los datos sincronizados con la interfaz de usuario?

99
00:04:57,720 --> 00:05:01,680
Bueno, el estado es cómo React hace eso.

100
00:05:01,680 --> 00:05:04,920
Entonces, el estado es cómo React mantiene la interfaz de usuario.

101
00:05:04,920 --> 00:05:06,870
en sincronía con los datos.

102
00:05:06,870 --> 00:05:10,590
Cambiamos el estado, cambiamos la UI.

103
00:05:10,590 --> 00:05:14,160
Entonces, resumiendo, el estado permite a los desarrolladores

104
00:05:14,160 --> 00:05:16,680
hacer dos cosas importantes.

105
00:05:16,680 --> 00:05:20,340
Primero, el estado nos permite actualizar la vista del componente.

106
00:05:20,340 --> 00:05:22,650
volviendo a renderizar el componente.

107
00:05:22,650 --> 00:05:26,580
Entonces nos brinda una manera de cambiar parte de la interfaz de usuario.

108
00:05:26,580 --> 00:05:30,810
En segundo lugar, el estado permite a los desarrolladores conservar las variables locales.

109
00:05:30,810 --> 00:05:34,650
entre múltiples renderizados y rerenderizados.

110
00:05:34,650 --> 00:05:38,850
Entonces, si piensas en esto, el estado es básicamente una herramienta.

111
00:05:38,850 --> 00:05:41,820
Y, de hecho, es la herramienta más poderosa

112
00:05:41,820 --> 00:05:44,580
que tenemos en el mundo de React.

113
00:05:44,580 --> 00:05:48,510
Entonces, comprender cómo funciona un Estado y qué hace,

114
00:05:48,510 --> 00:05:50,940
entender así la mecánica del estado,

115
00:05:50,940 --> 00:05:54,870
desbloqueará el poder del desarrollo de React para usted.

116
00:05:54,870 --> 00:05:58,530
Pero, antes de entender la mecánica del estado,

117
00:05:58,530 --> 00:06:01,110
En realidad, primero volvamos a nuestro código.

118
00:06:01,110 --> 00:06:05,163
y utilice esta poderosa herramienta en la práctica por primera vez.