1.7 KiB
1.7 KiB
title | localeTitle |
---|---|
Higher-Order Components | Componentes de orden superior |
Componentes de orden superior
En React, un componente de orden superior (HOC) es una función que toma un componente y devuelve un nuevo componente. Los programadores utilizan HOC para lograr la reutilización de la lógica de los componentes .
Si ha utilizado la connect
de Redux, ya ha trabajado con componentes de orden superior.
La idea central es:
const EnhancedComponent = enhance(WrappedComponent);
Dónde:
enhance
es el componente de orden superior;WrappedComponent
es el componente que desea mejorar; yEnhancedComponent
es el nuevo componente creado.
Este podría ser el cuerpo de la enhance
HOC:
function enhance(WrappedComponent) {
return class extends React.Component {
render() {
const extraProp = 'This is an injected prop!';
return (
<div className="Wrapper">
<WrappedComponent
{...this.props}
extraProp={extraProp}
/>
</div>
);
}
}
}
En este caso, la enhance
devuelve una clase anónima que extiende React.Component
. Este nuevo componente está haciendo tres cosas simples:
- Renderizar el
WrappedComponent
dentro de un elementodiv
; - Pasando sus propios apoyos al
WrappedComponent
; y - Inyectando un apoyo extra al
WrappedComponent
.
Los HOC son solo un patrón que utiliza el poder de la naturaleza compositiva de React. Añaden características a un componente . ¡Hay muchas más cosas que puedes hacer con ellos!