Como desenvolver suas superpotências React com o padrão HOC

Eduardo Vedes Blocked Unblock Seguir Seguindo 27 de dezembro de 2018 Foto de Fatos Bytyqi no Unsplash

Ei pessoal! ? Espero que você tenha um Feliz Natal e um Feliz Ano Novo!

2018 chegou ao fim e faz sentido para mim começar o novo ano com um artigo sobre Componentes de Ordem Superior!

Eu prometi a você para escrever sobre isso, já que abordamos o assunto quando falamos sobre os suportes de renderização e os padrões de contêineres, então faz sentido mergulhar um pouco e prestar atenção nele!

Pessoalmente não é um dos meus padrões favoritos, mas é uma ferramenta poderosa para conhecer, dominar e pendurar no seu cinto de ferramentas.

Apenas tenha em mente que você não deve abusar dela. Quase tudo o que você pode encapsular em um HOC, você certamente pode implementar usando o padrão de render props – confira meu artigo sobre render props aqui – e vice-versa.

01. O que é um componente de ordem superior?

Um componente de ordem superior (HOC) é uma técnica avançada no React para reutilizar a lógica do componente. Os HOCs não fazem parte da API React. Eles são um padrão que deriva da natureza do React que privilegia a composição sobre a herança.

JavaScript é uma linguagem bem adequada para programação funcional, pois aceita funções de ordem superior. Uma função de ordem superior é uma função que pode assumir outra função como argumento e / ou que retorna uma função como resultado.

Da mesma forma, um componente de ordem superior é uma função que recebe (encapsula) um componente e retorna um novo componente .

Funções de ordem superior nos permitem abstrair sobre ações, não apenas valores.

HOCs são comuns em bibliotecas React de terceiros, como Redux ou React Router. Aposto que você usou alguns deles, talvez sem estar ciente disso.

O principal objetivo de um componente de ordem superior no React é compartilhar funcionalidade comum entre componentes sem repetir o código.

02. Tipos de componentes de ordem superior

Basicamente, existem dois tipos principais de implementação de HOC: Props Proxy e Inversion Inheritance .

Adereços Proxy (ppHOC)

Props Proxy HOCs são elementarmente expressos assim:

propsProxyHOC (implementação padrão)

Não é nada mais que uma função, propsProxyHOC, que recebe um Component como um argumento (nesse caso, chamamos o argumento WrappedComponent) e retorna um novo componente com o WrappedComponent.

Tenha em mente que quando retornamos o WrappedComponent, também passamos pelos adereços que o COH recebe. Isso explica o nome dado a esse tipo: props proxy .

Quando retornamos o Componente Agrupado, temos a possibilidade de manipular adereços e abstrair o estado, mesmo passando o estado como um adereço no Componente Agrupado.

Você também pode agrupar o Componente Agrupado com outros elementos JSX, alterando sua interface de acordo com as necessidades do seu aplicativo.

Props Proxy HOCs são úteis para as seguintes situações:

  1. Manipulando adereços
  2. Acessando a instância via Refs (tenha cuidado, evite usar refs )
  3. Estado Abstrativo
  4. Embrulho / compondo o WrappedComponent com outros elementos

Inversão de herança (iiHOC)

HOCs de herança invertida são elementarmente expressos assim:

inheritanceInversionHOC (implementação padrão)

Nessa situação, a classe retornada estende o WrappedComponent. É chamado Inversão de herança, porque em vez de o WrappedComponent estender alguma classe de Enhancer, ele é passivamente estendido. Desta forma, a relação entre eles parece inversa .

Inversão de herança fornece o acesso HOC à instância WrappedComponent via isso , o que significa que você pode usar o estado, adereços, ciclo de vida do componente e até mesmo o método de renderização .

Herança de Inversão Os HOCs são úteis para as seguintes situações:

  1. Renderização de Highjacking
  2. Manipulando o estado

03. Sujando as mãos

Ok todos ? para ilustrar um pouco os conceitos apresentados acima, vamos fazer algum código.

Se você quiser jogar mais tarde com o código que estamos fazendo, você pode puxá-lo aqui deste repo meu ?.

Vamos tentar implementar um componente que retorna uma mensagem de boas vindas de acordo com o usuário que está logado no sistema.

componente principal do App.js

Eu ajustei meu componente App.js para mostrar algum texto e para renderizar um componente chamado Bem-vindo ao qual eu passei o usuário prop.

Ok, podemos fazer isso com um componente simples como este:

Componente de Boas Vindas

Mas…

E se eu quiser que o componente retorne o Welcome Guest se nenhum usuário estiver logado?

Bem… eu posso fazer isso no mesmo componente Bem-vindo, com um simples se isso verificar se o usuário prop existe e se não ele simplesmente retorna “Bem-vindo Convidado”.

Mas suponha que eu queira encapsular essa lógica para usar com vários / diferentes componentes de boas-vindas.

Então o caminho a percorrer é fazer um Props Proxy HOC:

propsProxy HOC

O que fizemos aqui? Mantivemos nosso componente Bem-vindo simples e criamos uma função JavaScript chamada withUser, que obtém o componente Welcome (WrappedComponent) como um argumento e verifica se o usuário prop existe. Se isso não acontecer, apenas retornará uma simples mensagem “Bem-vindo Visitante!”.

Isso é muito útil. Imagine que você tivesse 30 componentes de boas-vindas em diferentes idiomas (exemplo bobo, mas faz questão de encapsular a lógica em um HOC).

Bom, agora temos um HOC para verificar se há um usuário logado, senão ele envia uma Mensagem de Boas Vindas!

Vamos imaginar agora que a informação do usuário é proveniente de uma API externa (Auth0 por exemplo) e está entrando em nosso aplicativo frontend através de um redutor Redux que gerencia o estado do aplicativo.

Portanto, antes de verificar se há um usuário, precisamos verificar se os dados estão carregados no sistema!

Uau! Desta forma, poderíamos mostrar uma mensagem de carregamento enquanto os dados não são carregados!

Então… para este caso de uso, eu acho que nós queremos fazer algum render highjacking e renderizar outra coisa se os dados não forem carregados.

Para render highjacking, precisamos usar um iiHOC. Uau! Tal coincidência! Então, vamos fazer isso e compor os dois HOCs juntos todos ? Isso vai bater duro na cabeça da unha.

propsProxy + inheritanceInversion HOCs composto

Preste atenção ao que fizemos:

Criamos um withLoader iiHOC que estende o WrappedComponent. Desta forma, ele pode acessar seus adereços e acionar diferentes renderizações.

Nesta situação nós estamos recebendo o suporte isLoaded e se ele não estiver carregado, nós simplesmente retornamos uma mensagem de carregamento! Caso contrário, deixamos o WrappedComponent renderizar simplesmente retornando super.render ().

Na declaração de exportação, estamos apenas compondo duas funções JavaScript, como f1 (f2 (f3))). Nada mais que isso!

Existem ferramentas para compor funções de uma maneira mais bonita, mas essa é outra história para outro artigo!

04. Por último mas não menos importante

Eu tentei usar exemplos simples para você entender os conceitos da maneira mais limpa possível.

Meu conselho para você é que, se você não dominar esses conceitos, por favor, puxe meu repo aqui e brinque um pouco com ele.

Verifique o código e tente entendê-lo linha por linha.

Leva algum tempo para se acostumar e se sentir confortável fazendo esse tipo de abstração, então não perca sua motivação ou seu foco com os HOCs.

Além disso, como eu disse antes, tudo que fizemos aqui pode ser obtido com props de renderização ou padrão de contêiner, então não é necessário escolher um HOC ou dois para fazer código limpo com esse tipo de encapsulamento!

Espero que você tenha se divertido tanto lendo este artigo quanto eu escrevi! Se você realmente gostou, por favor, me dê algumas palmas (não menos que 50 por favor) ? e lembre-se sempre de "Seja forte e siga em frente!"

Além disso, se você quiser explicações mais profundas e complexas, por favor, sinta-se livre para ler os links que eu adicionei à seção Bibliografia abaixo.

05. Bibliografia

  1. Reagir Documentação

2. Eloquente Javascrip t

3. Reagir componentes de ordem superior em profundidade

Muito obrigado!

evedes, dez 2018