ReactJS - Componentes de orden superior

Los componentes de orden superior son funciones de JavaScript que se utilizan para agregar funcionalidades adicionales al componente existente. Estas funciones sonpure, lo que significa que están recibiendo datos y devolviendo valores de acuerdo con esos datos. Si los datos cambian, las funciones de orden superior se vuelven a ejecutar con una entrada de datos diferente. Si queremos actualizar nuestro componente de retorno, no tenemos que cambiar el HOC. Todo lo que tenemos que hacer es cambiar los datos que utiliza nuestra función.

Higher Order Component(HOC) envuelve el componente "normal" y proporciona una entrada de datos adicional. En realidad, es una función que toma un componente y devuelve otro componente que envuelve el original.

Echemos un vistazo a un ejemplo sencillo para entender fácilmente cómo funciona este concepto. losMyHOC es una función de orden superior que se utiliza solo para pasar datos a MyComponent. Esta función tomaMyComponent, lo realza con newData y devuelve el componente mejorado que se renderizará en la pantalla.

import React from 'react';

var newData = {
   data: 'Data from HOC...',
}

var MyHOC = ComposedComponent => class extends React.Component {
   componentDidMount() {
      this.setState({
         data: newData.data
      });
   }
   render() {
      return <ComposedComponent {...this.props} {...this.state} />;
   }
};
class MyComponent extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}

export default MyHOC(MyComponent);

Si ejecutamos la aplicación, veremos que los datos se pasan a MyComponent.

Note- Los componentes de orden superior se pueden utilizar para diferentes funcionalidades. Estas funciones puras son la esencia de la programación funcional. Una vez que esté acostumbrado, notará cómo su aplicación se vuelve más fácil de mantener o actualizar.