Componentes de Alto Nível ReactJS

O componente de ordem superior é uma função JavaScript usada para adicionar funcionalidades adicionais a componentes existentes. Essas funções são funções puras, o que significa que elas recebem dados e retornam valores com base nesses dados. Se os dados mudarem, a função de ordem superior usará diferentes dados de entrada para executar novamente. Se quisermos atualizar o componente retornado, não precisamos alterar o HOC. Tudo o que precisamos fazer é mudar os dados que nossa função está usando.

O componente de ordem superior (Higher Order Component, HOC) envolve o componente 'comum' e fornece dados de entrada adicionais. Na verdade, é uma função que aceita um componente e retorna outro componente que envolve o componente original.

Vamos ver um exemplo simples para entender como esse conceito funciona. MyHOC é uma função de alto nível, usada apenas para passar dados para MyComponent. A função aceita MyComponent, o fortalece com newData e retorna o componente fortalecido que será exibido 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 foram passados paraMyComponent.

NotaOs componentes de alto nível podem ser usados para diferentes funcionalidades. Essas funções puras são a essência da programação funcional. Assim que você se acostuma, perceberá que seu aplicativo se torna cada vez mais fácil de manter ou atualizar.