Ahora que ya sabemos qué son los accesorios
y cómo los usamos en la práctica, repasémoslos rápidamente
e incluso aprender algunas cosas adicionales importantes sobre accesorios.
Como acabamos de aprender, usamos accesorios en React para pasar datos.
desde componentes principales a componentes secundarios.
Básicamente, pasar información por el árbol de componentes.
Esto significa que esencialmente usamos accesorios para comunicarnos.
entre los componentes padre e hijo.
Por lo tanto, los accesorios son una herramienta esencial de React.
para configurar y también para personalizar componentes.
Entonces podemos imaginar los accesorios como escenarios que
se puede utilizar para hacer que un componente principal controle cómo
Su componente secundario debería verse y cómo debería funcionar.
En ese sentido, los accesorios son simplemente
como argumentos pasados ​​a funciones regulares de JavaScript.
Además, podemos pasar cualquier cosa a funciones de JavaScript, ¿verdad?
Y lo mismo ocurre con los accesorios.
Entonces podemos pasar cualquier tipo de valor como accesorio.
Entonces podemos pasar valores únicos, objetos de matriz, funciones.
e incluso otros componentes de React, lo cual es realmente
poderosa técnica que exploraremos un poco más adelante.
Entonces esos son los fundamentos de los accesorios en React.
pero ahora profundicemos un poco más.
Pero antes de hacerlo, primero debemos dar un paso atrás.
Entonces, a estas alturas del curso, ya hemos aprendido
sobre la apariencia de los componentes y su lógica,
entonces escribiendo ambos JSX
y lógica JavaScript dentro de los componentes.
Ahora, también he estado diciendo desde el principio
del curso que React renderiza un componente basado
en sus datos actuales y esa interfaz de usuario siempre se mantendrá sincronizada
con esos datos no?
Pero ahora es el momento de ser un poco más específico.
sobre cuáles son realmente esos datos.
Entonces estos datos que los usuarios de React usan para renderizar un componente se crean
fuera de accesorios y estado
y en realidad hay aún más tipos de datos
pero lo que importa por ahora son los accesorios y el estado.
Ahora, el estado son básicamente datos de componentes internos.
que puede ser actualizado por la lógica del componente,
entonces por el componente en sí, mientras que los accesorios
por otro lado están los datos que vienen
del componente principal,
así que desde afuera básicamente.
Entonces es el componente principal quien posee esos datos.
y por lo tanto no se puede modificar
por el componente hijo.
En cambio, los accesorios solo se pueden actualizar
por el propio componente principal.
Y esto nos lleva a una de las pocas reglas estrictas
que nos da React, que es que los accesorios son inmutables.
Por lo tanto no se pueden cambiar, son de sólo lectura.
Y si en algún momento sientes que necesitas mutar los accesorios
en realidad lo que necesitas es estado
porque el estado es para datos que cambian con el tiempo
como aprenderemos pronto.
¿Pero por qué es eso en realidad?
¿Por qué los accesorios son inmutables en React?
Bueno, para empezar, los accesorios son sólo un objeto.
Por lo tanto, si cambia el objeto props en su componente
también afectarías el componente principal
porque así es como funcionan los objetos en JavaScript.
Entonces, cuando copias un objeto y mutas la copia,
el objeto original también será mutado.
Ahora, si cambias un objeto que se encuentra
fuera de la función del componente,
esa función ha creado entonces el llamado efecto secundario.
Entonces, en general,
un efecto secundario ocurre cada vez que cambias algo
datos que se encuentran fuera de la función actual.
React, sin embargo, tiene que ver con funciones puras,
por lo que funciona sin efectos secundarios,
al menos cuando se trata de datos de componentes.
Por lo tanto, los componentes tienen que ser puros en términos de su
props y state, porque esto permite que React
Optimice su aplicación y evite algunos problemas extraños.
Errores que pueden aparecer al manipular datos externos.
Y de hecho, podemos extender esta idea de inmutabilidad
Reaccionar el desarrollo en general.
Por lo tanto, un componente nunca debe mutar ningún dato que
escribimos fuera de su alcance funcional
como en este ejemplo aquí.
Y ahora para terminar, es importante entender.
que React utiliza el llamado flujo de datos unidireccional.
Ahora bien, ¿qué tiene eso que ver con los accesorios?
Bueno, en términos simples, el flujo de datos unidireccional significa que
en aplicaciones React, los datos solo se pueden pasar desde el padre
a componentes secundarios, lo que sucede mediante el uso de accesorios.
En otras palabras, los datos pueden fluir de padres a hijos.
pero nunca al revés.
Y por lo tanto tenemos un flujo de datos unidireccional, por lo que solo desde arriba
hasta la parte inferior del árbol de componentes.
Ahora bien, esto puede parecerte obvio,
pero otros marcos como Angular en realidad emplean
un flujo de datos bidireccional.
Entonces, si ya conoces uno de esos marcos
Esto podría suponer un gran cambio para usted.
Pero en realidad hay una razón o varias razones por las cuales
React utiliza un flujo de datos unidireccional como este.
La primera es que hace que las aplicaciones sean mucho más
más predecible y mucho más fácil de entender
para desarrolladores porque es mucho más fácil
Para entender de dónde provienen los datos.
si solo fluye en una dirección.
En un sentido similar,
hace que las aplicaciones sean mucho más fáciles de depurar,
nuevamente porque tenemos mucho más control sobre los datos
y entendemos exactamente cómo fluyen esos datos.
Y, por último, el enlace de datos bidireccional suele ser menos eficiente.
por lo que es menos eficaz de implementar.
Bien, eso suena genial, pero quizás te preguntes:
"¿Qué pasaría si realmente quisiera pasar algunos datos, por ejemplo
algún estado, hasta un componente principal?
Bueno, en realidad hay una manera muy inteligente de hacerlo.
pero, como suele ocurrir, aprenderemos sobre esto un poco más adelante.
Y de hecho, en la siguiente sección, para ser específicos,
así que no está muy lejos.
Hay tantas piezas en movimiento
en aprender una biblioteca completa como React,
que por supuesto no puedes aprenderlo todo de una vez,
pero créeme, llegarás allí
y al final todo encajará perfectamente.