Consejos Tecnológicos

¿Cuáles son los componentes de orden superior en React?

En React, High-Order Component (HOC) se considera una tecnología avanzada para reutilizar la lógica de los componentes. No forman parte de la API de React, pero son modelos que parten de la naturaleza compositiva de React.

Las funciones de orden superior aceptan una función como parámetro y devuelven una función. HOC no es una función de React ni de ningún otro lenguaje de programación.Es un patrón que surge de la naturaleza de los componentes. reacción.Ejemplos de funciones de orden superior son; .map, .filter, etc.

Cómo definir funciones de orden superior

Ejemplo 1: una función que toma otra función como parámetro

object FunctionThatTakesFunction extends App {  
  def math(a:Int, b:Int, fun:(Int,Int)=>Int):Int = fun(a,b)  
  val sum = math(5, 6, (a,b) => a+b)  
  val diff = math(10, 4, (a,b) => a-b)  
  println(s"sum is $sum")  
  println(s"diff is $diff")  
 

Producción:

sum is 11  
diff is 6  

Ejemplo 2: Función para sumar una matriz de números:

function calculate(numbers) { 
  let sum = 0;  
 for (const number of numbers) {  
 sum = sum + number;  
  }  
return sum;  
 
calculate([1, 2, 4]); // => 7  

Producción

Sum = 7  

Función anónima

Antes de comenzar a discutir las funciones de orden superior, analicemos las funciones anónimas. El uso de funciones anónimas en JavaScript facilita la lectura del código. Las funciones anónimas se pueden asignar a variables o pasar a otras funciones, como funciones de orden superior.

Función anónima, a veces llamada Lambda Por lo general, se usa cuando se declaran funciones de orden superior o cuando la función solo se usa una vez. El último caso es importante cuando se considera el rendimiento porque ahorra tiempo y memoria porque no es necesario almacenar funciones anónimas para su uso posterior.

Publicaciones relacionadas

Por ejemplo, una función anónima simple se ve así:

x -> x + 1

Aquí, la entrada de la función es x y la salida es x + 1.

La sintaxis de las funciones anónimas es ligeramente diferente en todos los lenguajes, pero generalmente se escribe como (entrada) → (salida).

Las funciones anónimas se utilizan a menudo porque evitan el código repetitivo asociado con las declaraciones de funciones con nombre. Por lo tanto, para funciones simples que no necesitan reutilizarse en varios lugares, como el anterior, las funciones anónimas pueden ser más apropiadas.

Funciones comunes de orden superior

Hay algunas funciones de orden superior que son esenciales para las bases de código modernas.Estos proporcionan un método iterativo o resumido Lista datos. Hacen que el código sea más conciso al manejar operaciones de lista comunes sin tener que crear mucho código auxiliar para operaciones de lista básicas. La claridad de la intención de utilizarlos también es muy útil.

filtrar

El filtro es una función que acepta una función de prueba como parámetro. La función debe devolver un valor booleano y devolver una nueva matriz que contenga solo aquellos elementos para los que la función de prueba devuelve verdadero.

mapa

El mapeo es una función que transforma un componente en otro agregando una función a cada elemento. El trabajo del usuario es describir cómo reemplazar cada elemento.

reducir

La función de reducción es ligeramente diferente a la tarea anterior. Toma todos los componentes de un grupo y usa valores / operaciones binarios para sumarlos y producir un valor único.

¿Qué son los componentes de alta gama?

Los componentes de orden superior (HOC) son elementos únicos para reutilizar la lógica Componente de reacción. El miembro usa uno o más elementos como parámetros y devuelve una nueva función mejorada. Suena familiar, ¿verdad? Son similares a las funciones de orden superior, tomando algunas funciones como parámetros y generando una nueva función.

HOC se usa generalmente para combinar componentes con comportamiento compartido.Es diferente de la combinación regular. Expresar-llegar-Accesorios modelo.

Componentes de alta gama (hechos de HOCS)

  1. No modifica ni muta componentes, sino que crea nuevos componentes.
  2. Se utilizan en ensamblajes y se pueden reutilizar.
  3. Una función pura sin efectos secundarios, solo devolviendo una nueva característica.

Ejemplos de HOC del mundo real:

Reducción de reacciones Conexión (mapStateToProps, mapDispatchToProps) (página de usuario)
Enrutador de reacción withRouter (UserPage)
Material withStyles (estilos) (UserPage)

Estructura de componentes de alta gama

El siguiente fragmento de código muestra la estructura HOC en React:

import React from 'react'; 
// Take in a component as argument InsideWrappedComponent
const higherOrderwrappedComponent = (InsideWrappedComponent) => { 
// And return another component 
  class HOC extends React.Component { 
    render() { 
      return ; 
    } 
  } 
  return HOC; 
}; 

Los componentes de orden superior usan un componente (InsideWrappedComponent) y devuelven otra parte del mismo. Debido a la lógica de este componente, puede crear un HOC a partir de este componente, y se puede utilizar y ampliar donde sea necesario.

Algunos puntos para recordar

Antes de usar HOC, las personas siempre deben tener en cuenta ciertas cosas. Estos incluyen los siguientes:

Los componentes deben ser puros

Deben evitarse los efectos secundarios de HOC. HOC debe formar un componente para su reutilización. Evite la tentación de pasar componentes como parámetros. Si el componente muta, el nuevo comportamiento también se reflejará fuera del componente mejorado, por lo que el componente se vuelve no reutilizable. Utilice combinaciones en lugar de mutaciones.

Nomenclatura de la convención HOC

Elegir el nombre para mostrar le ayudará a depurar / leer el código correctamente. Por ejemplo, si el HOC es conLoadingIndicator y el componente de entrada es Component, entonces el nombre para mostrar del componente devuelto puede ser conLoadingIndicator (Component).

Evite llamar a HOC en el método de representación

Llamar a HOC durante la renderización se refiere a cada vez que se renderiza / llama al componente HOC. Esto provocará una degradación del rendimiento. Es mejor llamar a HOD desde componentes externos.

ejemplo

render(){  
  const RenderedComponentDegrade = HOC(Component);  
  return  
};   

La creación de un HOC en el renderizado dará como resultado la creación de un nuevo componente. Esto conduce a la desinstalación y reinstalación de componentes, provocando que las generaciones futuras pierdan su estado.

Copiar método estático

Es importante declarar métodos estáticos en la clase.Al vincular el componente que define el método estático, el componente no podrá acceder al método estático

Pasar referencia

pasar por Accesorios Es imposible usar refs, porque los refs no son manejados por React como los accesorios normales. Deberíamos usar la API forwardRef para resolver este problema.

Ventajas de utilizar componentes de alta gama

  • El uso adecuado y eficaz de componentes de alta gama es fácil de manejar.
  • Los componentes de orden superior ayudan a deshacerse de la mutación o fusionan la misma lógica en cada componente creado
  • Utilice componentes de alto nivel para hacer que el código sea más legible y eficiente. Gracias a su convención de nomenclatura correcta, la depuración del código se vuelve fácil.

Creación de componentes de gama alta a través de ejemplos (2-3 ejemplos)

Los componentes de orden superior (HOC) se refieren a los componentes «normales» circundantes. Es una función que toma un componente como entrada y devuelve otro componente que envuelve el componente original.

El siguiente ejemplo simple nos ayudará a comprender fácilmente cómo funciona este concepto.

Ejemplo 1:

Paso 1: Crea el proyecto React.js.

npm install -g create-react-app 
create-react-app my-app-react 
cd my-app-react 
npm start 

Paso 2: Crea un archivo llamado HOC.js en la carpeta src.

// HOC.js 
import React, {Component} from 'react'; 
export default function HocExample(HocComponentExample){ 
    return class extends Component{ 
        render(){ 
            return ( 
                
                                       
                );          }      }   }    Include function HocExample in the file App.js file  // App.js  import React, { Component } from 'react';  import HocExample from './HOC';  class AppExample extends Component {      render() {      return (       
          Higher-Order Component First Example        
      )    }  }  AppExample = HocExample(AppExample);  export default AppExample; 

explique

  • Primero, creamos una función HocExample en el archivo HOC.js.
  • La función HocExample acepta un parámetro como componente.
  • El componente es AppExample
  • AppExample = HocExample (AppExample);
  • Este componente está envuelto en otro componente de React. Es fácil de ampliar y se puede modificar. Es la principal aplicación de componentes de alta gama.

Ejemplo dos:

import React from 'react';  
 var newDataHOC = {  
   data: 'Example for high order component.',  
 
 
 var MyHOCExample = ComposedComponent => class extends React.Component {  
   componentDidMount() {  
      this.setState({  
         data: newDataHOC.data  
      });  
   }  
   render() {  
      return  
   }  
};  
class MyComponent extends React.Component {  
   render() {  
      return (  
         
               < h1 >{this.props.data}            
 
        )      }   }    export default MyHOCExample(MyComponent);  

Nota: los datos se pasan a MyComponent. MyHOCExample es una función de orden superior que pasa datos a MyComponent. Esta función usa MyComponent, usa newDataHOC para mejorar y devuelve el componente mejorado presentado en la pantalla.

El uso de HOC puede ayudar a que nuestras aplicaciones se mantengan de manera fácil y eficiente, y también puede ayudar a las actualizaciones.

Ejemplo tres:

  • Utilice HOC para verificar la autenticación
  • Los componentes que se mostrarán si el usuario está conectado. Cree un componente HOC para verificar la autenticación en cada render ():
  • AuthenticatedUserComponent.js
import React from "react"; 
export function requireAuthenticationExample(Component) { 
    return class AuthenticatedExampleComponent extends React.Component { 
        isAuthenticated() { 
            return this.props.isAuthenticated; 
        } 
 
        /** 
         * Render 
         */ 
        render() { 
            const loginErrorMessage = ( 
                
                      Please login To view this part of the application.                 
              );                return (                 
                      { this.isAuthenticated === true ? : loginErrorMessage }                 
              );          }      };  } 

Exporte el requireAuthenticationExample predeterminado;

Utilice componentes de alto nivel en nuestros componentes ocultos de usuarios anónimos:

import React from "react"; 
import {requireAuthenticationExample} from "./AuthenticatedExampleComponent"; 
export class MyPrivateComponentExample extends React.Component { 
    /** 
     * Render 
     */ 
    render() { 
        return ( 
            
                  Viewable only to anonymous users. This is a secret search and hidden from other users.             
          );      }  } 

Exporte el requireAuthenticationExample predeterminado (MyPrivateComponentExample);

Depurar HOC

La depuración de HOC incluye la declaración printf Edite el código fuente de la aplicación para registrar el estado de la aplicación en el punto apropiado a través de una declaración de impresión o un marco de registro.

Compila y ejecuta la aplicación Ver las declaraciones de depuración emitidas por la aplicación en tiempo de ejecución

La depuración con declaraciones impresas es aproximada, pero rápida y sencilla. Una desventaja es que agregar declaraciones impresas cambiará inherentemente el flujo del programa, lo que puede ser importante o no. Además, una sola declaración de impresión en sí misma no da una indicación de en qué parte del código se emite. Utilice una pequeña cantidad de declaraciones de impresión de depuración, esto puede no ser un problema. Debido a la gran cantidad de declaraciones impresas, pueden resultar difíciles de organizar y comprender.

Una Marco de registro Hay varias ventajas sobre las declaraciones impresas. El marco de registro generalmente proporciona algún tipo de rutinas de registro para emitir mensajes con la prioridad correspondiente. El marco en sí mismo dirige la salida a un destino determinado, así como información útil como una marca de tiempo, el nombre de la clase o el archivo fuente que contiene la declaración de registro e incluso el número de línea del código.

De manera similar, el marco de registro puede filtrar los mensajes de registro según la prioridad o el nivel de registro o deshabilitar el registro por completo. Por esta razón, contrariamente a la naturaleza transitoria de las sentencias printf, las sentencias de registro generalmente se guardan en la base del código de manera indefinida, lo que permite decidir si se registran en un archivo durante la implementación.

Agregar

Las funciones de orden superior en JS son funciones especiales que aceptan funciones como parámetros o las devuelven. Además, si la función / componente solo usa primitivas como parámetros o valores de retorno, entonces estas son funciones de primer orden. HOC proporciona el beneficio de la reutilización: las funciones de orden superior en sí mismas proporcionan un comportamiento básico y, al aceptar las funciones como parámetros, puede extender ese comportamiento.

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba