O que são componentes de apresentação e de contêiner no React?

O React tem uma arquitetura baseada em componentes que o encoraja a dividir sua base de código em unidades reutilizáveis ​​de funcionalidade. Nem todos os componentes são criados iguais. Vejamos as diferenças entre dois tipos comuns, componentes de apresentação e de contêiner (também conhecidos como componentes “ com estado ”).

Existe algum estado?

Para começar, deve ser enfatizado que esses termos não se referem a nenhum recurso específico do React. Eles descrevem um estilo de escrever componentes React que ajuda a manter a modularidade e separar interesses. A existência dos dois tipos de componentes surge de escolhas feitas em sua base de código.

Há apenas um fator distintivo: os componentes do contêiner têm estado e os componentes de apresentação não. Na prática, isso significa que um componente de contêiner sempre faz uma chamada para o método setState () do React. Um componente de apresentação nunca fará uso de estado.

Observando os exemplos

Este é um componente de apresentação simples:

importar React de " react & quot ;;   classe Presentational estende React. Component & # 123;   renderizar & # 40; & # 41; & # 123; return < h1 > & # 123; this. props. title & # 125; < / h1 & gt ;; & # 125;   & # 125;   exportdefault Apresentacional;

O componente é extremamente simples. Ele renderiza uma única tag h1 que exibe o texto passado para o componente por meio de seu prop de título. Vejamos agora um componente de contêiner com estado:

importar React de " react & quot ;;   a classe Container estende React. Component & # 123;   construtor & # 40; adereços & # 41; & # 123; super & # 40; adereços & # 41 ;;   this. state = & # 123;   hora: & # 40; newDate & # 40; & # 41; & # 41; . toString & # 40; & # 41;   & # 125 ;;   & # 125;     componentDidMount & # 40; & # 41; & # 123; setInterval & # 40; & # 40; & # 41; = > & # 123; this. setState & # 40; & # 123; time: & # 40; newDate & # 40; & # 41; & # 41; . toString & # 40; & # 41; & # 125; & # 41 ;; & # 125;, 1000 & # 41 ;; & # 125;     renderizar & # 40; & # 41; & # 123; return < h1 > & # 123; this. state. time & # 125; < / h1 & gt ;; & # 125;   & # 125;   Exportdefault Container;

O método de renderização do componente contêiner é quase idêntico ao do componente de apresentação. A diferença é que o componente do contêiner origina seu texto de dentro dele mesmo, em vez de depender de um valor externo passado como uma propriedade.

A cada segundo, o componente do contêiner chama setState () para atualizar a chave de tempo em seu estado. Isso faz com que o React renderize novamente o componente e exiba a nova hora. Nosso contêiner possui seu próprio estado.

Características de cada tipo

Várias características exclusivas tendem a surgir nos componentes de apresentação e contêiner. Olhando primeiro para os componentes de apresentação, a maior parte de seu código provavelmente existe no método de renderização. Eles conterão muito pouca lógica, pois seu comportamento é definido pelo mundo externo.

Os componentes de apresentação felizmente não sabem de onde seus dados estão vindo. Eles não sabem quando (ou se) isso vai mudar. Alguns exemplos podem nem aceitar acessórios. Este é um elemento de decoração que simplesmente renderiza um arquivo de imagem específico:

export () = > < img src = "/ logo. png" / >

Os componentes do contêiner são o oposto de suas contrapartes de apresentação. Normalmente, você descobrirá que a maior parte da lógica do seu site termina em um componente de contêiner. O método de renderização pode ser comparativamente curto, pois você gastará muito mais linhas buscando dados de fontes externas, transformando-os para atender às suas necessidades e, em seguida, armazenando-os no estado.

O método de renderização de um componente de contêiner pode consistir em uma única linha que renderiza um componente de apresentação. Agora você tem uma forte separação de interesses, com ambos os componentes tendo uma função distinta que respeita totalmente os outros. O componente do contêiner origina os dados; o componente de apresentação o coloca na tela.

Veja como isso funciona na prática:

importar React de " react & quot ;;   visualização const = & # 40; & # 123; título, corpo & # 125; & # 41; = > & # 40; < div > < h1 > & # 123; título & # 125; < / h1 > & lt ; p > & # 123; body & # 125; < / p > < / div > & # 41 ;;   a classe BlogPostComponent estende React. Component & # 123;   construtor & # 40; adereços & # 41; & # 123; super & # 40; adereços & # 41 ;;   this. state = & # 123;   blog: null   & # 125 ;;   & # 125;     componentDidMount & # 40; & # 41; & # 123; buscar & # 40; " /blog-post. json" & # 41; . então & # 40; response = > response. json & # 40; & # 41; & # 41 ;; . então & # 40; blog = > this. setState & # 40; & # 123; blog & # 125; & # 41; & # 41 ;; & # 125;     renderizar & # 40; & # 41; & # 123; return & # 40; < Exibir título = & # 123; this. state. blog. headline & # 125; body = & # 123; this. state. blog. content & # 125; / > & # 41 ;; & # 125;   & # 125; & # 125;

BlogPostComponent é nosso componente de contêiner. Ele carrega uma postagem na rede. Os dados são então fornecidos ao componente View para renderização. O modo de exibição não se importa de onde obtém seus dados – no futuro, poderemos reutilizá-lo para exibir postagens obtidas de uma API de terceiros, como Facebook ou Twitter.

Os componentes do contêiner são assim chamados porque tendem a encapsular áreas funcionais inteiras de seu aplicativo. Eles fazem seu projeto funcionar e representam os sistemas de back-end do aplicativo.

Em uma base de código real, BlogPostComponent teria ainda mais responsabilidade. Seria necessário rastrear se a postagem foi carregada e tratar os erros durante a busca pela rede. Consequentemente, o método de renderização pode incorporar alguma lógica básica para alterar o que é exibido – uma mensagem de erro, uma barra de progresso ou nosso componente de visualização de apresentação. Os componentes de apresentação nunca têm maior responsabilidade do que renderizar uma seção específica da IU no DOM.

Vantagens de separar componentes de apresentação e de contêiner

Usar esse padrão ajuda a organizar sua base de código e evita que os componentes se tornem muito pesados. Embora não seja uma regra rígida e rápida, a separação diligente dos dois tipos melhora a capacidade de manutenção à medida que a contagem de componentes do seu projeto aumenta.

Tente procurar oportunidades para refatorar conforme o método de renderização de um componente de contêiner cresce. É provável que você possa pegar muito de seu conteúdo e dividi-lo em um novo componente de apresentação. Isso torna mais fácil reutilizar o código de apresentação no futuro. Ele acaba sendo independente e capaz de operar independentemente de qualquer fonte de dados específica.

Componentes com estado são menos prováveis ​​de serem reutilizados. Comportamentos não triviais se acumulam naturalmente dentro deles, resultando em dependências do mundo externo. Isso não quer dizer que eles não possam ser reutilizados, embora – um botão de confirmação de dois estágios conterá um estado interno (para determinar se exibir “ Redefinir senha do usuário &’ ou “ Tem certeza? ”), mas também será implantado em todo sua base de código.

Talvez mais do que tudo, distinguir intencionalmente entre os componentes Presentional e Container mantém você ciente de onde está o estado do seu aplicativo. Minimizar o número de componentes com estado contribui para uma base de código sustentável e ajuda a separar as preocupações.

Se você não conseguir &’ decidir se um componente deve manter o estado, continue codificando e refatorando mais tarde – provavelmente é muito cedo no ciclo de vida do seu projeto para saber onde a complexidade (e, portanto, o estado) se concentrará.