ReactJS - Componentes de ordem superior

Componentes de ordem superior são funções JavaScript usadas para adicionar funcionalidades adicionais ao componente existente. Essas funções sãopure, o que significa que eles estão recebendo dados e retornando valores de acordo com esses dados. Se os dados mudarem, as funções de ordem superior serão executadas novamente com entrada de dados diferente. Se quisermos atualizar nosso componente de retorno, não precisamos alterar o HOC. Tudo o que precisamos fazer é alterar os dados que nossa função está usando.

Higher Order Component(HOC) envolve o componente "normal" e fornece entrada de dados adicionais. Na verdade, é uma função que pega um componente e retorna outro componente que envolve o original.

Vamos dar uma olhada em um exemplo simples para entender facilmente como esse conceito funciona. oMyHOC é uma função de ordem superior que é usada apenas para passar dados para MyComponent. Esta função levaMyComponent, aumenta com newData e retorna o componente aprimorado que será renderizado na tela.

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);

Se executarmos o aplicativo, veremos que os dados são passados ​​para MyComponent.

Note- Componentes de ordem superior podem ser usados ​​para diferentes funcionalidades. Essas funções puras são a essência da programação funcional. Depois de se acostumar, você notará como seu aplicativo está se tornando mais fácil de manter ou atualizar.