O padrão HOC (componente de ordem superior) é muito popular entre os desenvolvedores do React. Mas os desenvolvedores do Vue de alguma forma o ignoram. Muito vaidoso. Vamos tentar descobrir.
O que é um HOC?
Um componente de ordem superior (HOC) é uma função que pega um componente existente e retorna outro componente que envolve o original, adicionando nova lógica.
HOC vs mixins
Talvez muitos se perguntem por que usar HOC quando existem impurezas? Eles também adicionam novas funcionalidades aos componentes. O que HOC quais impurezas não sabem?
Primeiro, lembre-se de quais impurezas existem no Vue (definição retirada da documentação do Vue):
Os mixins são uma ferramenta flexível de reutilização de código nos componentes do Vue. O objeto de impureza pode conter qualquer opção de componente. Quando uma impureza é usada por um componente, todas as opções de impureza são “misturadas” com as próprias opções do componente.
Parece que o objetivo das impurezas e do HOC é o mesmo - eles permitem expandir a funcionalidade de diferentes componentes. E lá fora (usando o componente final), pode até parecer o mesmo.
Mas a diferença está no próprio princípio do HOC e das impurezas. As impurezas são “misturadas” ao declarar um componente - qualquer instância do componente as conterá.
Usando o HOC, agrupamos uma instância de um componente que não altera o componente em si, mas cria um novo onde é necessário. Isso significa que afetamos apenas o trecho de código em que o usamos. Devido a isso, reduzimos a coerência do código, o tornamos mais legível e flexível.
HOC é um pouco como um padrão de design decorador .
Criação de HOC
Bem então. Vamos dar uma olhada em tudo isso com um exemplo.
Portanto, temos um componente de botão:
Depois de algum tempo, subitamente precisamos registrar a pressão de alguns botões (mas não todos). Podemos fazer isso através de impurezas misturando o código para efetuar login no componente de botão e, no lugar certo, habilitar ou desabilitar o registro através de alguma propriedade do componente. Mas concorda, isso não é muito conveniente? E se houver muitas dessas funcionalidades? Um erro - e todos os botões podem parar de funcionar corretamente.
HOC neste caso seria uma ótima solução. Apenas envolvemos o botão em alguns lugares com o HOC correspondente.
É hora de conhecer o HOC na prática.
Etapa 1. Crie uma função HOC
Lembramos que o HOC é uma função que recebe um componente como entrada e retorna outro. Então, vamos criar essa função. Vamos chamá-lo com LoggerButton.
É habitual começar a nomear funções HOC - este é um tipo de marca de identificação de HOCs.
O resultado é uma função que usa um componente Button como entrada e, em seguida, retorna um novo componente. Na função render, usamos o componente original, mas com uma alteração - adicionamos um evento para clicar no nó DOM, e a saída da inscrição clicou no console.
Se você não entender o que está acontecendo aqui, o que são he contexto, leia primeiro a documentação do vue sobre como as funções de renderização funcionam.
No exemplo atual, usei o componente funcional, porque Eu não preciso de uma condição. Ninguém o proibe de retornar um componente regular em vez de um funcional, mas não esqueça que os componentes funcionais são muito mais rápidos que os comuns.
Etapa 2. Usando HOC
Agora, usando a função resultante, simplesmente criamos um novo componente.
A única coisa que resta é conectar o componente recebido onde precisamos do log de clique.
Exemplo final:
Composição:
Tudo isso é certamente ótimo, mas e se você precisar de um botão que não apenas faça login, mas também realize alguma outra ação?
Tudo é simples. Estamos transformando um HOC em outro. Podemos misturar quantos HOCs quisermos.
Também para composição, existem muitas funções e bibliotecas prontas que facilitam a composição.
HOC é um padrão simples, mas muito poderoso. É usado na base de muitas bibliotecas. Não é uma bala de prata ou um substituto completo para mixins e o mecanismo de herança de componentes. Use-o sabiamente em combinação com outros padrões e seus aplicativos Vue se tornarão verdadeiramente flexíveis.
Post cruzado