Como usar componentes de ordem superior para reutilizar a lógica no React

Componentes de ordem superior (HOCs) são um tipo de componente React que o ajuda a reutilizar a lógica em seu aplicativo. A terminologia pode parecer complexa, mas os HOCs são fáceis de entender e podem tornar sua base de código mais simples de manter.

Um componente de ordem superior sempre envolve os componentes filho com funcionalidade adicional. Um HOC é definido como uma função que aceita um componente como parâmetro. Em seguida, ele retorna um novo componente, que normalmente renderizará o componente de entrada embrulhado com adereços extras.

Um exemplo simples

A melhor maneira de avaliar quando os HOCs fazem sentido é vê-los em ação. Vamos considerar um sistema de checkout simples, em que o estado da cesta do usuário é armazenado centralmente no aplicativo. Nossos exemplos mostram Redux como o armazenamento de estado, mas isso apenas para fins ilustrativos.

Suponha que este objeto represente o estado do nosso aplicativo:

{checkout: {items: [{label: " Product 1 & quot ;, price: 150,00, quantidade: 2}, {label: " Product 2 & quot ;, price: 75,00, quantidade: 1}]}}

Temos uma matriz simples que representa os itens na cesta do usuário. Nossos componentes de checkout derivarão valores adicionais desse estado, como o valor total do pedido e os impostos a serem aplicados.

Nosso sistema de checkout provavelmente precisará mostrar o valor total em vários componentes independentes. Pode haver um widget da barra lateral mostrando a cesta, uma tela de revisão pós-pagamento e uma calculadora de custos de envio. Um sistema ingênuo que simplesmente passou os itens do checkout como adereços arriscaria a duplicação da lógica – cada componente precisaria calcular o valor total do pedido por si mesmo.

Apresentando o HOC

Vejamos como um HOC pode ajudar:

importar React de " react & quot ;; importar & # 123; conectar & # 125; de? react-redux ?;   const withCheckout = ComponentToWrap = > & # 123;   const ComponentWithCheckout = classextends React. Component & # 123;   renderizar & # 40; & # 41; & # 123; return & # 40; < ComponentToWrap checkoutItems = & # 123; this. props. checkout. items & # 125; checkoutTotal = & # 123; this. total & # 125; & # 123; ... this. props & # 125; / > & # 41 ;; & # 125;   obter & # 40; & # 41; & # 123; const prices = this. props. checkout. items. map & # 40; i = > & # 40; i. quantity * i. price & # 41; & # 41; ; retornar preços. reduzir & # 40; & # 40; a, b & # 41; = > & # 40; a + b & # 41;, 0 & # 41 ;; & # 125;   & # 125;   return connect & # 40; & # 40; & # 123; checkout & # 125; & # 41; = > & # 40; & # 123; checkout & # 125; & # 41; & # 41; & # 40; ComponentWithCheckout & # 41 ;;   & # 125;   exportdefault withCheckout;

O arquivo exporta uma única função, withCheckout, que leva um componente React como seu único parâmetro (ComponentToWrap). Dentro da função, criamos uma nova classe anônima que é um componente React.

O método de renderização deste novo componente cria uma instância do ComponentToWrap que passamos para a função. Agora temos a oportunidade de definir os adereços da instância. Encaminhamos a matriz de itens de checkout como checkoutItems e disponibilizamos o valor total pré-calculado como checkoutTotal.

Quaisquer props passados ​​para o HOC são encaminhados para o componente interno, garantindo que ele receba todos os dados necessários. A função retorna a classe anônima recém-criada que está pronta para ser renderizada em todo o seu aplicativo.

Usamos o método de conexão de react-redux para que o checkout prop dentro do HOC receba o valor da chave checkout no estado de nossa loja Redux. Este é um detalhe de implementação – seu HOC pode manter seu próprio estado ou recorrer a algum outro serviço dentro de seu aplicativo.

Usando o HOC

Agora é hora de colocar nosso HOC em uso.

importar React de " react & quot ;; importar withCheckout de " ./ withCheckout. js & quot ;;   a classe CheckoutReviewScreen estende React. Component & # 123;   renderizar & # 40; & # 41; & # 123; return & # 40; < h1 > Checkout < / h1 > < h2 > & # 123; this. props. checkoutTotal & # 125; < / h2 > & # 41; ; & # 125;   & # 125;   exportdefault withCheckout & # 40; CheckoutReviewScreen & # 41 ;;

Presumimos que nosso withCheckout HOC é salvo em withCheckout. js no mesmo diretório que nosso novo componente de tela de revisão de checkout. Envolvendo o componente com nosso withCheckout HOC, podemos acessar e exibir o valor total do pedido. Não precisamos computá-lo ou armazená-lo no estado do aplicativo. Se quisermos atualizar a forma como o total é calculado (por exemplo, adicionar uma taxa de manuseio fixa), só precisamos fazer a alteração em um lugar – em nosso HOC.

Agora você pode renderizar < CheckoutReviewScreen / > em qualquer lugar do seu aplicativo. Nosso exemplo empacotado não precisa passar por nenhum adereço, uma vez que obtém seus dados de nossa loja Redux. Por estar empacotado com withCheckout, ele próprio empacotado com conexão do Redux &’ a tela de revisão recebe automaticamente um checkoutTotal prop que soma os preços de todos os itens no estado do aplicativo.

Agora vale a pena mencionar como denominamos nosso HOC: withCheckout. Por convenção, os nomes HOC normalmente têm um prefixo with porque acrescentam algo aos componentes que envolvem. Em nosso caso, o HOC fornece acesso conveniente à nossa cesta de compras que, de outra forma, precisaríamos implementar em cada componente.

Vantagens dos HOCs

Usar um HOC permite abstrair comportamentos comuns de componentes, minimizando a duplicação de código e aumentando a capacidade de manutenção. Os HOCs permitem uma forma de injeção de dependência. Eles ajudam a manter seus componentes mais simples, permitindo que mais sejam transmitidos do mundo externo.

HOCs são comuns no ecossistema React. Na verdade, vimos um neste artigo – connect (), parte do react-redux, que inscreve seus componentes nas mudanças de estado do Redux.

HOCs são populares porque fornecem um método de reutilização de código que não quebra a autocontenção de componentes. O padrão utiliza a capacidade de composição do React para permitir que você acrescente funcionalidade extra sem o risco de efeitos colaterais.

Você pode passar qualquer componente em seu aplicativo para withCheckout sem quebrar nada – o HOC apenas anexa alguns acessórios extras. É por isso que é tão importante que seus HOCs encaminhem todos os adereços que recebem ({... this. props} em nosso exemplo). Eles não devem fazer nada que possa interferir na operação normal do componente encapsulado.

Pode parecer que seus componentes agora dependem do seu HOC. Este não é o caso. Você pode exportar uma segunda versão do seu componente que não esteja empacotada, dando aos consumidores a escolha de qual usar.

Na verdade, seu componente só insiste em receber certos acessórios – checkoutTotal em nosso caso. Isso pode ser fornecido pelo HOC ou passando um valor onde quer que o componente seja renderizado. Nosso HOC torna o desenvolvimento mais simples, mas não mudou fundamentalmente a natureza de nossos componentes renderizados.