Componentes de orden superior de React

Descubra qué son los componentes de orden superior y cómo son útiles al programar una aplicación React

Es posible que esté familiarizado con las funciones de orden superior en JavaScript. Se trata de funciones que aceptan funciones como argumentos y/o devuelven funciones.

Dos ejemplos de estas funciones son Array.map()o Array.filter().

En React, extendemos este concepto a los componentes, y así tenemos un componente de orden superior (HOC) cuando el componente acepta un componente como entrada y devuelve un componente como salida.

En general, los componentes de orden superior permiten crear código componible y reutilizable, y también más encapsulado.

Podemos usar un HOC para agregar métodos o propiedades al estado de un componente, o una tienda Redux , por ejemplo.

Es posible que desees utilizar componentes de orden superior cuando quieras mejorar un componente existente, operar en el estado o las propiedades, o su marcado representado.

Existe una convención de anteponer un Componente de Orden Superior con la withcadena (es una convención, por lo que no es obligatorio), por lo que si tiene un Buttoncomponente, su contraparte HOC debe llamarse withButton.

Vamos a crear uno

El ejemplo más simple de un HOC es aquel que devuelve el componente sin modificaciones:Te recomendamos Viajes y turismo

const withElement = Element = () = Element /

Hagamos esto un poco más útil y agreguemos una propiedad a ese elemento, además de todas las propiedades que ya trae, el color:

const withColor = Element = props = Element {...props} color="red" /

Usamos este HOC en un componente JSX:

const Button = () = { return buttontest/button}const ColoredButton = withColor(Button)

y finalmente podemos renderizar el componente WrappedButton en nuestra aplicación JSX:

function App() { return ( div className="App" h1Hello/h1 ColoredButton / /div )}

Este es un ejemplo muy simple, pero esperamos que puedas comprender la esencia de los HOC antes de aplicar esos conceptos a escenarios más complejos.

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

Componentes de orden superior de React

Descubra qué son los componentes de orden superior y cómo son útiles al programar una aplicación React

programar

es

2025-01-17

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente