Feliz Viernes, en breve comenzamos el fin de semana y podremos tomar un merecido descanso. Hoy quiero hablaros con otro de los temas que más confusión produce en los novatos de React, me refiero al «Prop Drilling» algo así como la «inyección de propiedades» desde un componente padre hacia otros componentes hijos dentro de nuestra jerarquía de componentes y que realmente es relativamente sencillo de entender.
El «prop drilling» es una situación en la que se pasa datos desde un componente padre a un componente hijo, luego a un componente nieto, y así sucesivamente, hasta que llega a un componente más distante más abajo en el árbol de componentes, donde se requieren estos datos. Por ejemplo, aquí tenemos una aplicación muy simple que se enfoca en el proceso de pasar props a través de varios componentes.
Por favor, tener en cuenta que el objetivo aquí no es construir una aplicación que exista en el mundo real. El objetivo de esta aplicación es examinar la práctica de «prop drilling», para que puedas enfocarte en ella y entenderla más facilmente.
Aquí está el código para la aplicación:
function Main(props) {
return <Header msg={props.msg} />;
};
function Header(props) {
return (
<div style={{ border: "10px solid whitesmoke" }}>
<h1>Header here</h1>
<Wrapper msg={props.msg} />
</div>
);
};
function Wrapper(props) {
return (
<div style={{ border: "10px solid lightgray" }}>
<h2>Wrapper here</h2>
<Button msg={props.msg} />
</div>
);
};
function Button(props) {
return (
<div style={{ border: "20px solid orange" }}>
<h3>This is the Button component</h3>
<button onClick={() => alert(props.msg)}>Click me!</button>
</div>
);
};
function App() {
return (
<Main msg="I passed through the Header and the Wrapper and I reached the Button component"/>
);
};
export default App;Esta aplicación es lo suficientemente simple como para que puedas entenderla por ti mismo. Abordemos los puntos principales para resaltar lo que está sucediendo en el código anterior.
- El componente más alto de esta aplicación es el componente App. El componente App devuelve el componente Main. El componente Main acepta un solo atributo, llamado msg, como «mensaje».
- En la parte superior de la aplicación, la función Main declara cómo debe comportarse el componente Main. El componente Main es responsable de renderizar el componente Header. Note que cuando el componente Header se renderiza desde dentro de Main, también recibe el prop msg.
- La declaración de la función del componente Header renderiza un h1 que dice «Header aquí», luego otro componente llamado Wrapper. Note que la nomenclatura aquí es irrelevante – los componentes Header y Wrapper tienen nombres para que parezca un poco más como si aparecieran en una aplicación real – pero en última instancia, el enfoque está en tener múltiples componentes, en lugar de describir los nombres de componentes específicos adecuadamente. Por lo tanto, la declaración de la función del componente Header tiene una declaración de retorno, que renderiza el componente Wrapper con el prop msg pasado a él.
- En la declaración de la función del componente Wrapper, hay un h2 que dice «Wrapper aquí», además de la renderización del componente Button, que también recibe el atributo msg.
- Por último, la declaración de la función del componente Button está codificada para recibir el objeto props, luego dentro del div envolvente, mostrar un h3. El h3 dice «Este es el componente Button», y luego, debajo de eso, hay un elemento button con un atributo de manejo de eventos onClick. Esto se pasa a una función de flecha que debería alertar la cadena que proviene del prop msg.
Como hemos visto esto del «prop drilling» significa pasar un prop a través de objetos props a través de varias capas de componentes. Cuantas más capas haya, más repetitivo e innecesario será.
Esperando que haya sido de ayuda, happy coding!!
Más sobre React: