Concepto de React: Composición

¿Qué es la composición y por qué es un concepto clave en tus aplicaciones React?

En programación, la composición permite crear una funcionalidad más compleja combinando funciones pequeñas y específicas.

Por ejemplo, piense en usar map()para crear una nueva matriz a partir de un conjunto inicial y luego filtrar el resultado usando filter():

const list = ['Apple', 'Orange', 'Egg']list.map(item = item[0]).filter(item = item === 'A') //'A'

En React, la composición te permite tener algunas ventajas bastante interesantes.

Creas componentes pequeños y sencillos y los usas para agregar más funciones a partir de ellos. ¿Cómo?

Crear una versión especializada de un componente

Utilice un componente externo para expandir y especializar un componente más genérico:

const Button = props = { return button{props.text}/button}const SubmitButton = () = { return Button text="Submit" /}const LoginButton = () = { return Button text="Login" /}

Pasar métodos como accesorios

Un componente puede centrarse en el seguimiento de un evento de clic, por ejemplo, y lo que realmente sucede cuando se produce el evento de clic depende del componente contenedor:Te recomendamos Horoscopos y tarot de amor

const Button = props = { return button onClick={props.onClickHandler}{props.text}/button}const LoginButton = props = { return Button text="Login" onClickHandler={props.onClickHandler} /}const Container = () = { const onClickHandler = () = { alert('clicked') } return LoginButton onClickHandler={onClickHandler} /}

Utilizando niños

La props.childrenpropiedad le permite inyectar componentes dentro de otros componentes.

El componente debe generar props.childrensu salida en JSX:

const Sidebar = props = { return aside{props.children}/aside}

y le incorpora más componentes de forma transparente:

Sidebar Link / Link //Sidebar

Componentes de orden superior

Cuando un componente recibe un componente como propiedad y devuelve un componente, se denomina componente de orden superior.

Puede obtener más información sobre los componentes de orden superior en mi artículo Componentes de orden superior de React.

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Concepto de React: Composición

Crear una versión especializada de un componentePasar métodos como accesoriosUtilizando niñosComponentes de orden superior

programar

es

2025-01-17