Reaccionar componentes de orden superior

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. Esas son funciones que aceptan funciones como argumentos y / o devuelven funciones.

Dos ejemplos de esas funciones sonArray.map()oArray.filter().

En React, ampliamos este concepto a los componentes, por lo que tenemos unaComponente 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 le 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 unReduxtienda por ejemplo.

Es posible que desee utilizar componentes de orden superior cuando desee mejorar un componente existente, operar en el estado o los accesorios, o su marcado renderizado.

Existe una convención de anteponer un componente de orden superior con elwithcadena (es una convención, por lo que no es obligatorio), por lo que si tiene unButtoncomponente, su contraparte HOC debe llamarsewithButton.

Creemos uno.

El ejemplo más simple de un HOC es uno que devuelve el componente inalterado:

const withElement = Element => () => <Element />

Hagamos esto un poco más útil y agreguemos una propiedad a ese elemento, además de todos los accesorios con los que ya venía, el color:

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

Usamos este HOC en un componente JSX:

const Button = () => {
  return <button>test</button>
}

const ColoredButton = withColor(Button)

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

function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
      <ColoredButton />
    </div>
  )
}

Este es un ejemplo muy simple, pero es de esperar que pueda obtener la esencia de las HOC antes de aplicar esos conceptos a escenarios más complejos.

Descarga mi gratisReact Handbook


Más tutoriales de react: