Comprensión de los componentes de orden superior en React.js (HOC)

Bienvenido, me llamo Luis y para hoy les traigo este nuevo tutorial.

Como debe saber, React.js se trata de componentes y gran parte del código en una aplicación React típica consiste en crear componentes autónomos, pasarlos y así sucesivamente.

React.js sigue el principio de no repetirse, que se sigue evitando escribir el mismo código dos veces. Nos gustaría estructurar todo en componentes, pero, por supuesto, no de tal manera que creemos un componente separado para cada color de texto diferente, por ejemplo, eso sería demasiado trabajo y demasiado difícil de mantener.

React.js sigue el principio de no repetirse, que se sigue evitando escribir el mismo código dos veces.

Nos gustaría estructurar todo en componentes, pero, por supuesto, no de tal manera que creemos un componente separado para cada color de texto diferente, por ejemplo, eso sería demasiado trabajo y demasiado difícil de mantener.

Por ejemplo, los accesorios nos ayudan a mostrar nuestro texto en un componente y luego simplemente pasar el color del texto como un accesorio al componente según sea necesario.

¿Qué es un componente de orden superior?

Los componentes de orden superior van en una dirección similar a la del uso de accesorios descritos anteriormente para mantener nuestro código esbelto.
Los HOC son una forma más radical de pasar componentes completos como accesorios a un componente de envoltura.

También es importante saber que los componentes de orden superior no son una función separada en la API de React, como useState, useEffect o React.lazy, que pertenecen a la API.

Los componentes de orden superior son un concepto mucho más que funciona porque son la conclusión lógica de la arquitectura React.

Dado que la declaración con las tomas y el retorno suena un poco abstracta, podríamos pensar en los HOC como una especie de envoltorio, y eso es exactamente para lo que estamos creando un ejemplo de código.

Finalmente un ejemplo

Creemos un HOC para proporcionar un color de fuente CSS a un componente, que se pasó al HOC. Solo como un ejemplo.

Hacemos esto al devolver nuestro componente envuelto y envolver un div alrededor de él, para lo cual podemos establecer un color como una cadena, usando el estilo en línea de React.

Dado que los componentes de orden superior o como los llamamos HOC, son componentes que devuelven el componente, pasado a ellos, nuestra sintaxis parece un poco extraña.

Comencemos con el HOC en sí, lo llamé ProvideColor.js ya que proporciona un color para el componente envuelto.

import React from 'react'const ProvideColor = (WrappedComponent, colorName) => () => (
<div style= color: colorName >
<WrappedComponent />
</div>
)export default ProvideColor

Nuestro HOC tiene dos accesorios: primero, el componente que envuelve y, como segundo accesorio, queremos pasarle el color.
Por supuesto, no está limitado a un número máximo de accesorios, puede colocar varias cosas, tal como lo necesite.

Entonces, todo lo que hace nuestro HOC es ser un nuevo componente, que luego se usa bajo el capó en todas partes para nuestro componente de aplicación.

Esto se puede ver en el hecho de que también podemos simplemente ingresar

Un className en el div de nuestro HOC, o renderizar más elementos HTML allí, que luego aparecen en el DOM de la aplicación en ejecución. Y envolvió el componente que le pasamos.

Porque en nuestro index.js, el punto en cada aplicación React.js donde todos los hilos se juntan, simplemente importamos y renderizamos el app.js como de costumbre, pero no el HOC, como podemos ver en nuestro código:

import React from ‘react’
import ReactDOM from ‘react-dom’
import App from ‘./App’ReactDOM.render(<App />, document.getElementById(‘root’))

Como siempre, es mejor que echemos un vistazo a la última pieza que falta del rompecabezas: App.js.

import React from ‘react’
import ProvideColor from ‘./ProvideColor’function App() 
return <p>Our Wrapped Text</p>
export default ProvideColor(App, ‘red’)

Para usar el HOC, debemos importarlos, luego escribir el componente de la aplicación como de costumbre y luego exportarlo.

Pero exportamos la aplicación dentro del HOC, que también obtiene el accesorio para el color de la fuente.

Eso es todo, debería ver lo siguiente, ya que pasamos en «rojo» como nuestro color de texto:

Espero que te haya sido de utilidad. Gracias por leer este tutorial.