1
00:00:01,050 --> 00:00:04,530
Ahora que ya sabemos qué son los accesorios

2
00:00:04,530 --> 00:00:08,190
y cómo los usamos en la práctica, repasémoslos rápidamente

3
00:00:08,190 --> 00:00:12,453
e incluso aprender algunas cosas adicionales importantes sobre accesorios.

4
00:00:14,700 --> 00:00:19,410
Como acabamos de aprender, usamos accesorios en React para pasar datos.

5
00:00:19,410 --> 00:00:22,770
desde componentes principales a componentes secundarios.

6
00:00:22,770 --> 00:00:27,510
Básicamente, pasar información por el árbol de componentes.

7
00:00:27,510 --> 00:00:31,620
Esto significa que esencialmente usamos accesorios para comunicarnos.

8
00:00:31,620 --> 00:00:34,920
entre los componentes padre e hijo.

9
00:00:34,920 --> 00:00:38,580
Por lo tanto, los accesorios son una herramienta esencial de React.

10
00:00:38,580 --> 00:00:43,200
para configurar y también para personalizar componentes.

11
00:00:43,200 --> 00:00:46,230
Entonces podemos imaginar los accesorios como escenarios que

12
00:00:46,230 --> 00:00:49,860
se puede utilizar para hacer que un componente principal controle cómo

13
00:00:49,860 --> 00:00:54,120
Su componente secundario debería verse y cómo debería funcionar.

14
00:00:54,120 --> 00:00:56,820
En ese sentido, los accesorios son simplemente

15
00:00:56,820 --> 00:01:00,898
como argumentos pasados ​​a funciones regulares de JavaScript.

16
00:01:00,898 --> 00:01:05,898
Además, podemos pasar cualquier cosa a funciones de JavaScript, ¿verdad?

17
00:01:06,150 --> 00:01:10,260
Y lo mismo ocurre con los accesorios.

18
00:01:10,260 --> 00:01:14,010
Entonces podemos pasar cualquier tipo de valor como accesorio.

19
00:01:14,010 --> 00:01:18,570
Entonces podemos pasar valores únicos, objetos de matriz, funciones.

20
00:01:18,570 --> 00:01:21,930
e incluso otros componentes de React, lo cual es realmente

21
00:01:21,930 --> 00:01:25,113
poderosa técnica que exploraremos un poco más adelante.

22
00:01:26,040 --> 00:01:29,700
Entonces esos son los fundamentos de los accesorios en React.

23
00:01:29,700 --> 00:01:33,475
pero ahora profundicemos un poco más.

24
00:01:33,475 --> 00:01:38,343
Pero antes de hacerlo, primero debemos dar un paso atrás.

25
00:01:39,180 --> 00:01:42,660
Entonces, a estas alturas del curso, ya hemos aprendido

26
00:01:42,660 --> 00:01:46,320
sobre la apariencia de los componentes y su lógica,

27
00:01:46,320 --> 00:01:48,540
entonces escribiendo ambos JSX

28
00:01:48,540 --> 00:01:51,303
y lógica JavaScript dentro de los componentes.

29
00:01:52,140 --> 00:01:54,630
Ahora, también he estado diciendo desde el principio

30
00:01:54,630 --> 00:01:57,758
del curso que React renderiza un componente basado

31
00:01:57,758 --> 00:02:02,758
en sus datos actuales y esa interfaz de usuario siempre se mantendrá sincronizada

32
00:02:02,970 --> 00:02:05,520
con esos datos no?

33
00:02:05,520 --> 00:02:08,460
Pero ahora es el momento de ser un poco más específico.

34
00:02:08,460 --> 00:02:12,390
sobre cuáles son realmente esos datos.

35
00:02:12,390 --> 00:02:16,671
Entonces estos datos que los usuarios de React usan para renderizar un componente se crean

36
00:02:16,671 --> 00:02:19,771
fuera de accesorios y estado

37
00:02:19,771 --> 00:02:22,953
y en realidad hay aún más tipos de datos

38
00:02:22,953 --> 00:02:27,480
pero lo que importa por ahora son los accesorios y el estado.

39
00:02:27,480 --> 00:02:31,350
Ahora, el estado son básicamente datos de componentes internos.

40
00:02:31,350 --> 00:02:34,470
que puede ser actualizado por la lógica del componente,

41
00:02:34,470 --> 00:02:38,190
entonces por el componente en sí, mientras que los accesorios

42
00:02:38,190 --> 00:02:40,920
por otro lado están los datos que vienen

43
00:02:40,920 --> 00:02:42,570
del componente principal,

44
00:02:42,570 --> 00:02:45,123
así que desde afuera básicamente.

45
00:02:46,020 --> 00:02:49,470
Entonces es el componente principal quien posee esos datos.

46
00:02:49,470 --> 00:02:52,230
y por lo tanto no se puede modificar

47
00:02:52,230 --> 00:02:53,940
por el componente hijo.

48
00:02:53,940 --> 00:02:56,820
En cambio, los accesorios solo se pueden actualizar

49
00:02:56,820 --> 00:02:59,040
por el propio componente principal.

50
00:02:59,040 --> 00:03:02,190
Y esto nos lleva a una de las pocas reglas estrictas

51
00:03:02,190 --> 00:03:06,690
que nos da React, que es que los accesorios son inmutables.

52
00:03:06,690 --> 00:03:10,440
Por lo tanto no se pueden cambiar, son de sólo lectura.

53
00:03:10,440 --> 00:03:14,790
Y si en algún momento sientes que necesitas mutar los accesorios

54
00:03:14,790 --> 00:03:17,550
en realidad lo que necesitas es estado

55
00:03:17,550 --> 00:03:20,795
porque el estado es para datos que cambian con el tiempo

56
00:03:20,795 --> 00:03:23,520
como aprenderemos pronto.

57
00:03:23,520 --> 00:03:25,530
¿Pero por qué es eso en realidad?

58
00:03:25,530 --> 00:03:28,890
¿Por qué los accesorios son inmutables en React?

59
00:03:28,890 --> 00:03:32,004
Bueno, para empezar, los accesorios son sólo un objeto.

60
00:03:32,004 --> 00:03:36,521
Por lo tanto, si cambia el objeto props en su componente

61
00:03:36,521 --> 00:03:39,262
también afectarías el componente principal

62
00:03:39,262 --> 00:03:43,590
porque así es como funcionan los objetos en JavaScript.

63
00:03:43,590 --> 00:03:46,620
Entonces, cuando copias un objeto y mutas la copia,

64
00:03:46,620 --> 00:03:50,250
el objeto original también será mutado.

65
00:03:50,250 --> 00:03:53,100
Ahora, si cambias un objeto que se encuentra

66
00:03:53,100 --> 00:03:55,240
fuera de la función del componente,

67
00:03:55,240 --> 00:03:59,981
esa función ha creado entonces el llamado efecto secundario.

68
00:03:59,981 --> 00:04:01,530
Entonces, en general,

69
00:04:01,530 --> 00:04:04,230
un efecto secundario ocurre cada vez que cambias algo

70
00:04:04,230 --> 00:04:08,610
datos que se encuentran fuera de la función actual.

71
00:04:08,610 --> 00:04:12,360
React, sin embargo, tiene que ver con funciones puras,

72
00:04:12,360 --> 00:04:15,090
por lo que funciona sin efectos secundarios,

73
00:04:15,090 --> 00:04:18,420
al menos cuando se trata de datos de componentes.

74
00:04:18,420 --> 00:04:21,690
Por lo tanto, los componentes tienen que ser puros en términos de su

75
00:04:21,690 --> 00:04:24,930
props y state, porque esto permite que React

76
00:04:24,930 --> 00:04:28,410
Optimice su aplicación y evite algunos problemas extraños.

77
00:04:28,410 --> 00:04:32,880
Errores que pueden aparecer al manipular datos externos.

78
00:04:32,880 --> 00:04:36,208
Y de hecho, podemos extender esta idea de inmutabilidad

79
00:04:36,208 --> 00:04:39,330
Reaccionar el desarrollo en general.

80
00:04:39,330 --> 00:04:43,050
Por lo tanto, un componente nunca debe mutar ningún dato que

81
00:04:43,050 --> 00:04:45,930
escribimos fuera de su alcance funcional

82
00:04:45,930 --> 00:04:47,763
como en este ejemplo aquí.

83
00:04:49,965 --> 00:04:52,500
Y ahora para terminar, es importante entender.

84
00:04:52,500 --> 00:04:56,722
que React utiliza el llamado flujo de datos unidireccional.

85
00:04:56,722 --> 00:05:00,240
Ahora bien, ¿qué tiene eso que ver con los accesorios?

86
00:05:00,240 --> 00:05:03,827
Bueno, en términos simples, el flujo de datos unidireccional significa que

87
00:05:03,827 --> 00:05:08,507
en aplicaciones React, los datos solo se pueden pasar desde el padre

88
00:05:08,507 --> 00:05:13,507
a componentes secundarios, lo que sucede mediante el uso de accesorios.

89
00:05:13,680 --> 00:05:18,240
En otras palabras, los datos pueden fluir de padres a hijos.

90
00:05:18,240 --> 00:05:20,550
pero nunca al revés.

91
00:05:20,550 --> 00:05:25,550
Y por lo tanto tenemos un flujo de datos unidireccional, por lo que solo desde arriba

92
00:05:25,710 --> 00:05:27,903
hasta la parte inferior del árbol de componentes.

93
00:05:28,770 --> 00:05:31,410
Ahora bien, esto puede parecerte obvio,

94
00:05:31,410 --> 00:05:35,340
pero otros marcos como Angular en realidad emplean

95
00:05:35,340 --> 00:05:37,560
un flujo de datos bidireccional.

96
00:05:37,560 --> 00:05:40,500
Entonces, si ya conoces uno de esos marcos

97
00:05:40,500 --> 00:05:43,320
Esto podría suponer un gran cambio para usted.

98
00:05:43,320 --> 00:05:47,460
Pero en realidad hay una razón o varias razones por las cuales

99
00:05:47,460 --> 00:05:51,120
React utiliza un flujo de datos unidireccional como este.

100
00:05:51,120 --> 00:05:53,790
La primera es que hace que las aplicaciones sean mucho más

101
00:05:53,790 --> 00:05:56,820
más predecible y mucho más fácil de entender

102
00:05:56,820 --> 00:06:00,450
para desarrolladores porque es mucho más fácil

103
00:06:00,450 --> 00:06:03,120
Para entender de dónde provienen los datos.

104
00:06:03,120 --> 00:06:06,090
si solo fluye en una dirección.

105
00:06:06,090 --> 00:06:07,320
En un sentido similar,

106
00:06:07,320 --> 00:06:10,440
hace que las aplicaciones sean mucho más fáciles de depurar,

107
00:06:10,440 --> 00:06:14,010
nuevamente porque tenemos mucho más control sobre los datos

108
00:06:14,010 --> 00:06:18,450
y entendemos exactamente cómo fluyen esos datos.

109
00:06:18,450 --> 00:06:22,830
Y, por último, el enlace de datos bidireccional suele ser menos eficiente.

110
00:06:22,830 --> 00:06:26,190
por lo que es menos eficaz de implementar.

111
00:06:26,190 --> 00:06:30,457
Bien, eso suena genial, pero quizás te preguntes:

112
00:06:30,457 --> 00:06:34,260
"¿Qué pasaría si realmente quisiera pasar algunos datos, por ejemplo

113
00:06:34,260 --> 00:06:37,826
algún estado, hasta un componente principal?

114
00:06:37,826 --> 00:06:41,850
Bueno, en realidad hay una manera muy inteligente de hacerlo.

115
00:06:41,850 --> 00:06:45,570
pero, como suele ocurrir, aprenderemos sobre esto un poco más adelante.

116
00:06:45,570 --> 00:06:48,690
Y de hecho, en la siguiente sección, para ser específicos,

117
00:06:48,690 --> 00:06:50,608
así que no está muy lejos.

118
00:06:50,608 --> 00:06:53,430
Hay tantas piezas en movimiento

119
00:06:53,430 --> 00:06:56,190
en aprender una biblioteca completa como React,

120
00:06:56,190 --> 00:06:59,580
que por supuesto no puedes aprenderlo todo de una vez,

121
00:06:59,580 --> 00:07:01,590
pero créeme, llegarás allí

122
00:07:01,590 --> 00:07:05,673
y al final todo encajará perfectamente.