HOC en React.js: ¬ŅC√≥mo utilizar los High Order Component (HOC) ?

Bienvenido viajero, espero que mi curso de React JS te este siendo de gran ayuda, hoy traigo un nuevo episodio donde te mostrare como utilizar los HOCs conocidos así por sus siglas en ingles Higher Order Component.

Como siempre lo har√© a trav√©s de un ejemplo que espero ilustre correctamente el ¬ŅPor qu√© y para qu√© de este tipo de componente?

  • Te invito a revisar el cap√≠tulo anterior donde te hable de la comunicaci√≥n de componentes mediante API Context.

Bien, no olvides en suscribirte a mi canal en YouTube con lo cual apoyar√°s este curso.

Juan Carlos García
by Juan Carlos García24-Ag-20223

¬ŅQu√© aprender√°s de los HOCs?

  • ¬ŅQu√© son y para qu√© sirven?
  • Como declararlos.
  • Como envolver componentes mediante tu HOC.
  • Comunicaci√≥n componente padre a hijo.
  • Comunicaci√≥n componente hijo a padre.

Repositorio:

  • Puedes acceder al c√≥digo descargando lo directamente aqu√≠ "hoc".
  • O puedes clonar el repositorio con los siguientes comandos, el c√≥digo se encuentra en la rama "hoc".
git clone https://github.com/EWebik/react-js.git
git checkout hoc

 

¬ŅQu√© son los Higher Order Components HOCs en React?

Lo primero que debes saber es que los HOCs no forman parte de la API de React como tal, más bien, son una especie de patrón que es resultante de la misma lógica de componentes de la librería de React.

No obstante, te dejo una definición que te puede ayudar a comprender mejor qué son.

Técnicamente es una función con la capacidad de recibir un componente como entrada y regresar un componente nuevo como salida.

 

¬ŅPara qu√© sirven los HOCs?

Utilizar HOCs es considerado una técnica avanzada de React, que permite reutilizar lógica y trasmitirla a nuestros componentes que conformen nuestro proyecto.

En pocas palabras mientras la mayoría de componentes convierten propiedades a interfaz de usuario:

Los HOCs transforman un componente en otro componente agregando información a sus propiedades.

Entonces, mediante un HOC podemos reutilizar lógica y transmitirla a los componentes que serán envueltos con nuestro HOC.

 

Librerías de terceros que utilizan HOC

Muchas librerías de terceros utilizan esta técnica, por ejemplo:

  • Redux
  • Relay

 

Aplicación de ejemplo: Crea un HOC y envolver un componente con el.

En esta clase vamos a crear nuestro primer HOC, y lo haremos creando la aplicación de la siguiente imagen.

Aplicación ejemplo de la utilización de HOCs

Suscribirme

Gracias por tu calificación:

3

Categorías


  • EWebik
  • React JS
  • SQL
  • Base de datos
  • PHP - MySQL
  • P√°gina Web
  • Servidores
  • Flexbox
  • NodeJS
  • WordPress
  • POO

ūü•á Creaci√≥n de p√°ginas web

‚ö°ÔłŹ Quiero mi p√°gina web ūüí™ūüŹľ

Donde:

  • Ser√° capaz de calcular el impuesto a un pago o precio dado.
  • Nuestro HOC recibir√° una configuraci√≥n de entrada.
  • Internamente har√° los c√°lculos y se las pasaremos al componente de salida mediante su propiedades.

No olvides en ver el vídeo para comprender mejor este post y para ver el paso a paso de la implementación de Higher Order Component.

 

¬ŅC√≥mo crear un HOC?

Bien, te mencione que este tipo de componente es una función, así que para declararlo lo haremos de la siguiente manera.

const withImpuestos = (Component) =>{
        return class extends React.Component{
             render(){
                      return(
                            <Component />
                      )
             }
        }
}

En esencia:

  • Se declara como una funci√≥n tipo flecha.
  • En el nombre se recomienda utilizar la palabra "with" seguido de la palabra que m√°s represente la funci√≥n que tendr√° el HOC.
  • Dicha funci√≥n retorna una clase an√≥nima, la cual debe extender de React.Component.
  • Al regresar un componente de clase, este debe poseer un m√©todo render, tal y como hemos visto en otros tutoriales.
  • Nuestro m√©todo render regresar√° el Component que ha recibido como par√°metro.

Y listo con todo esto ya has creado tu primer HOC.

 

Creando nuestro HOC completo

const withImpuestos = (Component) =>{
  return (config)=> class extends React.Component{
    state={
      sucursal: config.sucursal,
      pago: "$" + config.pago,
      impuesto: 
        "$" + (config.pago * config.impuesto) 
        + " al " + (config.impuesto*100) + "%",
      ganancia: "$" + (config.pago - (config.pago * config.impuesto))
    }

    calcularImpuesto = (pago)=>{
      this.setState({
        pago: "$" + pago,
        impuesto: 
          "$" + (pago * config.impuesto) 
          + " al " + (config.impuesto*100) + "%",
        ganancia: "$" + (pago - (pago * config.impuesto))
      })
    }

    render(){
      return(
        <Component
          sucursal={this.state.sucursal}
          pago={this.state.pago}
          impuesto={this.state.impuesto}
          ganancia={this.state.ganancia}
          calcularImpuesto={this.calcularImpuesto} />
      )
    }
  }
}

El código anterior:

  • En primer lugar modificamos el return, ahora regresa una funci√≥n an√≥nima, que a su vez, regresara un componente de clase.
  • Por otra parte, en nuestro componente de clase tenemos que declarar un state para poder actualizar las propiedades que enviaremos en el componente que vamos a regresar.
state={
      sucursal: config.sucursal,
      pago: "$" + config.pago,
      impuesto: 
        "$" + (config.pago * config.impuesto) 
        + " al " + (config.impuesto*100) + "%",
      ganancia: "$" + (config.pago - (config.pago * config.impuesto))
    }

 

Suscribirme

Gracias por tu calificación:

3

Categorías


  • EWebik
  • React JS
  • SQL
  • Base de datos
  • PHP - MySQL
  • P√°gina Web
  • Servidores
  • Flexbox
  • NodeJS
  • WordPress
  • POO

ūü•á Creaci√≥n de p√°ginas web

‚ö°ÔłŹ Quiero mi p√°gina web ūüí™ūüŹľ
  • Tambi√©n declaramos el m√©todo calcularImpuesto, el cual recibir√° las actualizaciones desde el componente que vamos a envolver, para analizar el dato y actualizar el state.
    calcularImpuesto = (pago)=>{
      this.setState({
        pago: "$" + pago,
        impuesto: 
          "$" + (pago * config.impuesto) 
          + " al " + (config.impuesto*100) + "%",
        ganancia: "$" + (pago - (pago * config.impuesto))
      })
    }

 

  • Y finalmente en el m√©todo render regresamos el componente que envolvemos y le agregamos las propiedades que deseamos.
render(){
      return(
        <Component
          sucursal={this.state.sucursal}
          pago={this.state.pago}
          impuesto={this.state.impuesto}
          ganancia={this.state.ganancia}
          calcularImpuesto={this.calcularImpuesto} />
      )
    }

Excelente, hasta este punto ya tienes tu HOC completo y posee la l√≥gica que deseas reutilizar cada vez que envuelvas a otro componente, ahora toca dise√Īar el componente que deseamos envolver.

 

Creando el componente a envolver por el HOC

En el siguiente componente dise√Īaremos la interfaz que vimos en la imagen de este ejemplo.

function App(props) {
  const {sucursal, pago, impuesto, ganancia, calcularImpuesto} = props;
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>Impuestos sucursal {sucursal}</h1>
        <input type="number" onChange={(e)=>{
            calcularImpuesto(e.target.value)
          }
        } />
        <p>{"Pago: " + pago}</p>
        <p>{"Impuesto: " + impuesto}</p>
        <p>{"Ganancia: " + ganancia}</p>
        <a
          className="App-link"
          href="https://ewebik.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          Tutorial React JS EWebik
        </a>
      </header>
    </div>
  );
}

 

  • Donde por destructuraci√≥n obtenemos las propiedades que agrega el HOC.
const {sucursal, pago, impuesto, ganancia, calcularImpuesto} = props;

 

  • Como vez en las propiedades viene el m√©todo calcularImpuesto, el cual se lo pasamos al onChange del input para recuperar lo que escriba el usuario.
<input type="number" onChange={(e)=>{
         calcularImpuesto(e.target.value)
     }
 } />

 

  • Y finalmente rendereamos las propiedades mediante una etiqueta "p".
<p>{"Pago: " + pago}</p>
<p>{"Impuesto: " + impuesto}</p>
<p>{"Ganancia: " + ganancia}</p>

 

Y listo ya tienes tu aplicación funcionando, cada vez que introduzcas un dato en el input, se calculara el impuesto y veras tu HOC en acción. Recuerda que toda la explicación viene en el vídeo paso a paso y puedes clonar el repositorio para analizar el código.

Espero te haya sido √ļtil y hayas comprendido el por qu√© y para qu√© utilizar Higher Order Component en React, nos vemos en el siguiente post.

 

Suscribirme

Gracias por tu calificación:

3

Categorías


  • EWebik
  • React JS
  • SQL
  • Base de datos
  • PHP - MySQL
  • P√°gina Web
  • Servidores
  • Flexbox
  • NodeJS
  • WordPress
  • POO

ūü•á Creaci√≥n de p√°ginas web

‚ö°ÔłŹ Quiero mi p√°gina web ūüí™ūüŹľ

ūüßź Autoevaluaci√≥n: Higher Order Component

1 ¬ŅQu√© son los Higher Order Components HOC en React?

2 ¬ŅPara qu√© sirven los HOC?

3 Son ejemplos de HOC:

Juan Carlos García

Juan Carlos García

Durante a√Īos he desarrollado plataformas dedicadas al rastreo satelital y varios sitios web que se encuentran en la primera p√°gina de Google, y hoy quiero compartir contigo lo que se en tecnolog√≠as como: Node JS, PHP, C# y Bases de datos.

Si quieres apoyarme sígueme en mis redes sociales y suscríbete a mi canal de YouTube.

Desarrollador de software

© 2022 EWebik

Dise√Īo de p√°ginas web y aplicaciones moviles.