Introdução
Algo que é muito útil e abrangente no mundo do React são os seus design patterns, pois eles ajudam a manter o código escalável e adicionam significado aos componentes que criamos.
Existem vários padrões, e neste artigo falaremos sobre Compound Components, um padrão avançado que é especialmente útil para criar interfaces flexíveis e compostas.
O Que é Compound Components?
O Compound Components é um padrão avançado em React. Tem como objetivo criar um design mais flexível, permitindo o compartilhamento de estado e lógica entre um grupo de componentes, onde a comunicação entre o componente pai e os componentes filhos devem ser feitas de maneira flexível.
Os componentes devem trabalhar juntos para realizarem algum comportamento sem criar árvores de props embaraçosas ou uma lógica complexa demais para ser refatorado ou compreendido futuramente.
Esse padrão nos ajuda a eliminar inflamações de props, onde temos que passar uma árvore de props entre os componentes. Essa injeção de props é um problema, pois pode causar vários re-renders desnecessários a cada estado que for atualizado, já que cada estado irá atualizar todos os componentes filho.
Temos um exemplo de Compound Components na estrutura do select
e option
das tags em HTML:
O select funciona como um gerenciador de estados da inferface, enquanto o option são configurados em como o select deve funcionar.
Exemplo utilizando Compound Components
Neste exemplo, vamos criar um Modal
, que é dividida em dois componentes compostos: Toggle
e Content
. Onde vão compartilhar o estado de abrir e fechar o modal entre eles.
Vamos ver como seria criar esse componente passo a passo:
Podemos começar criando a context responsável por gerênciar o state de abrir e fechar o modal
Criando a base do componente Modal
Perceba que estamos usando children, para pegar os componentes que serão inseridos dentro do Modal, vamos querer usa-lo assim:
Agora precisamos criar o componente toggle, que vai ser responsável por abrir o Modal
Também precisamos do componente content que vai ser responsável por exibir o conteúdo do Modal
Por fim, podemos atribuir os dois ao nosso componente Modal e já ta no jeito (:
Utilizando
Resultado
Assim, a gente torna a criação e o uso de modais extremamente flexíveis e reutilizáveis. Modal.Toggle
é responsável por ativar a exibição do modal, enquanto Modal.Content
deve exibir o conteúdo do nosso modal.
Essa estrutura permite que os desenvolvedores personalizem facilmente o comportamento e o conteúdo dos modais de acordo com as necessidades específicas de suas aplicações, tornando o código mais limpo e organizado.
Outros exemplos
Também podemos utilizar Compound Components em outros contextos, por exemplo:
Componentes de Accordion:
Componentes de Menu:
Todos são flexivéis e adptavéis, facilitando o desenvolvimento, escalabilidade e uso do componente.
Exercício
Vimos que o botão de fechar ficou dentro do componente do conteúdo, seria interessante ter um componente para gerenciar o fechamento do modal, algo que poderíamos usar como <Modal.Close>Fechar</Modal.Close/>
, vale a pena dar uma brincada e incluir esse componente também.
Conclusão
Vimos o quanto escrever componentes no padrão Compound Components pode ser útil em nossas aplicações, vimos também como utilizar e alguns exemplos em que esse padrão pode encaixar.
Fique à vontade para explorar e brincar criando componentes com Compoud Components, use com sabedoria e veja se realmente faz sentido aplicar no seu contexto, as vezes, se não for bem aplicado, ele pode mais atrapalhar doque ajudar.
OBS: Postei esse mesmo conteúdo no react4noobs, repositório destinado a agrupar artigos criados por desenvolvedores no universo do react. Vale a pena conferir =).
Top comments (2)
Que cara bom
<3