Incluso para el programador o desarrollador web más experto, existen líneas de código que son muy complicadas de leer. Por ello, el mundo de la programación ha establecido diferentes métodos para hacer estas líneas de código más legibles, ya sea a través de herramientas de traducción o de técnicas específicas para un lenguaje de programación. En este post, te enseñaremos qué es y cómo funciona el destructuring de componentes en React, una técnica que le da mucha más legibilidad a estas funciones.
¿Qué es el destructuring de componentes en React?
El destructuring de componentes en React es una técnica utilizada en esta librería JavaScript para, como su nombre indica, descomponer estos objetos con el fin de darles mucha más legibilidad. Esta técnica se relaciona especialmente con los componentes, porque son funciones que manejan el objeto props.
Como puedes haber leído en nuestro post sobre los atributos de un elemento React, el objeto props es uno de los atributos de un elemento. Este objeto encierra las propiedades que le pasemos. Unas de las propiedades más comunes en un elemento son aquellas que cambian su estilo. Para conocer más sobre este tema, te recomendamos leer nuestro artículo sobre añadir estilos a un elemento React.
Entonces, el destructuing de componentes en React funciona especialmente cuando tenemos un objeto props con varias propiedades. Supongamos que tenemos una interfaz de diez propiedades distintas. Entonces, podríamos tener un componente en donde tratamos estas propiedades de distintas maneras en una función. A continuación, te ponemos un ejemplo de un componente tipo función que manipula al objeto props para hacer que su propiedad msg se encierre en un span:
const Message = props => <span> {props.msg} </span>
Con base al ejemplo anterior, imaginemos que este objeto props tiene las propiedades text, color, backgroundColor, lineHeight, width, height, etc. Entonces, acceder a estas propiedades puede volverse tedioso. Aunque es algo muy corto, escribir cada vez props.propiedad en un proyecto a gran escala puede recortar nuestro tiempo. Por este motivo, se utiliza el destructuring de componentes en React.
El destructuring de componentes en React se maneja directamente en el objeto props. Para ello, el primer paso es insertar los símbolos ({ }) para encerrar este objeto. Allí donde estaba el objeto props llamaremos a la variable o propiedad que queremos utilizar directamente. Como la función de un componente siempre maneja al objeto props, esta función no dejará de acceder a este objeto, simplemente llama a su variable más rápido.
A continuación, puedes ver cómo se ve este primer paso, tomando en cuenta la línea de código de ejemplo que tratamos anteriormente:
const Message = ({msg}) => <span> {props.msg} </span>
Después de desestructurar el objeto props e insertar en su lugar el nombre de la variable a la que vamos a acceder, podemos eliminar el props.propiedad de la función y simplemente llamar a la variable que estamos manipulando. A continuación, puedes ver la línea de código desestructurada:
const Message = ({msg}) => <span> {msg} </span>
Como puedes ver, esta es una manera mucho más fácil y conveniente de tratar con los componentes. Así, el destructuring de componentes en React es una forma de acceder a las propiedades que queremos manipular de manera directa cuando estamos declarando el argumento del componente tipo función. Como mencionamos antes, esto se da porque el argumento de una función componente siempre es el objeto props.
¡Esperamos que este post te haya servido para aprender sobre una nueva técnica de programación! Para conocer más sobre el destructuring de componentes en React, te recomendamos leer este post titulado Destructuring en JavaScript. Este post te servirá para entender un poco mejor cómo React toma como referencia a JavaScript.
Al leer este post, no solo has aprendido qué es el destructuring de componentes en React, sino que, al mismo tiempo, también has dado un paso en tu camino hacia dominar esta herramienta y ser un experto del desarrollo web. Ahora, el siguiente paso es dedicarte por completo al aprendizaje de esta y otras herramientas de programación para la web. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensivo e íntegro donde aprenderás a desarrollar con herramientas como CSS, HTML, JavaScript y React. ¡Conseguirás especializarte en pocos meses! ¡No esperes más y matricúlate ahora!
