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.
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.
Añadir comentario