Componentes de orden superior de React.js

Los componentes de orden superior o HOC es el método avanzado de reutilización de la lógica de funcionalidad del componente. Simplemente toma el componente original y devuelve el componente mejorado.

Sintaxis:

const EnhancedComponent = higherOrderComponent(OriginalComponent);

Razón para usar el componente de orden superior:

• Facil de manejar
• Deshazte de copiar la misma lógica en cada componente
• Hace que el código sea más legible

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando.

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

  cd foldername

Estructura del proyecto:

Ejemplo 1: digamos que necesitamos reutilizar la misma lógica, como pasar el nombre a cada componente.

import React from 'react'
  
const EnhancedComponent = (OriginalComponent) => {
    class NewComponent extends React.Component {
  
        // Logic here
  
        render() {
            // Pass the callable props to Original component
            return <OriginalComponent name="GeeksforGeeks"  /> 
        }
    }
    // Returns the new component
    return NewComponent
}
  
export default EnhancedComponent;

import React from "react";
import "./App.css"
import EnhancedComponent from './Name'
   
class App extends React.Component {
  render() {
    // Call the props from originalComponent
    return <h1>{this.props.name}</h1> 
  }
}
   
// Passed the originalcomponent 
export default EnhancedComponent(App);

Salida: aquí, pasamos el nombre como accesorio con el valor para llamar desde diferentes componentes.

Ejemplo 2: En este ejemplo, implementemos algo de lógica. Hagamos una aplicación de contador. En HighOrder.js, pasamos handleclick y mostramos accesorios para llamar a la funcionalidad del componente.

Estructura del proyecto:

import React from 'react'
  
const EnhancedComponent = (OriginalComponent) => {
    class NewComponent extends React.Component {
  
        constructor(props) {
            super(props);
            // Set initial count to be 0
            this.state = { count: 0 }; 
        }
  
        handleClick = () => {
            // Incrementing the count
            this.setState({ count: this.state.count + 1 }); 
        }
  
        render() {
  
            // passed a handleclick and count in the originalComponent
            // as a props for calling and adding the functionality
            return <OriginalComponent
                handleclick={this.handleClick} 
                show={this.state.count} /> 
        }
    }
    // Returns the new component
    return NewComponent 
}
// Export main Component
export default EnhancedComponent 

import React from 'react'
import "./App.css"
// importing HighOrder file
import EnhancedComponent from './HighOrder' 
  
class App extends React.Component {
  render() {
    // Destructuring the props
    const { show, handleclick } = this.props
  
    // Calling out the props
    return <button onClick={handleclick}>{show}
    </button> 
  }
}
  
  
export default EnhancedComponent(App);

Producción:

Referencia: https://reactjs.org/docs/higher-order-components.html