Renderização condicional no React

A abordagem de renderização declarativa do React permite que você escreva rapidamente componentes ricos combinando layout, apresentação e lógica. No entanto, pode tornar mais complicado renderizar condicionalmente as seções da IU. Aqui estão alguns métodos que você pode usar para mostrar componentes sob demanda.

Compreendendo o problema

Os sistemas de modelos tradicionais facilitam a implementação da renderização condicional. Veja como você pode fazer isso no Handlebars, um mecanismo de modelagem JavaScript:

< div class = " perfil " > {{#if usuário}} < p > Você está conectado! < / p > {} < a href = " / login " > Login < / a > < / div > {{/ if}}

Ao trabalhar no React, você geralmente escreverá JSX. Embora JSX se pareça com HTML, ele é transpilado pelo processo de construção do React em JavaScript normal. Ele termina como uma série de chamadas React. createElement ().

Isso significa que você não pode usar condicionais JavaScript inalterados dentro de JSX. Tentar fazer algo assim causará um erro de compilação:

const MyComponent = props = > & # 123; return & # 40; < div > if & # 40; props. user & # 41; & # 123; < p > Você está conectado! < / p > & # 125; else < a href = " / login " > Login < / a > < / div > & # 41 ;; & # 125 ;;

As declarações If em JSX requerem um pouco mais de reflexão. Existem várias abordagens que você pode escolher. A opção que você escolher varia de acordo com a complexidade da condição, se há um branch else e se isso prejudicará a legibilidade do seu código.

Levantando do JSX

A maneira mais básica de corrigir o código acima é retirar o if da instrução return:

const MyComponent = props = > & # 123; if & # 40; props. user & # 41; & # 123; return < p > Você está conectado! < / p & gt ;; & # 125; else & # 123; return < a href = " / login " > Login < / a & gt ;; & # 125; & # 125 ;;

A condição foi removida do JSX. Em vez disso, são usados ​​dois nós JSX independentes, com aquele a ser retornado determinado por uma instrução if no corpo da função. Essa abordagem é claramente compreensível e mantém os dois ramos completamente separados.

Usando expressões condicionais

A solução acima normalmente só funcionará nos componentes mais simples. Você tende a acabar duplicando o código, como a tag de nível superior < div > presente em ambos os nós JSX no exemplo.

Na maioria das vezes, você precisará de algo mais elegante. JSX suporta expressões JavaScript que são colocadas entre chaves ({}). Você pode usar comparações booleanas e o operador ternário para obter renderização condicional embutida.

const MyComponent = props = > & # 123; return & # 40; < div > & # 123; props. user? < p > Você está conectado! < / p >: < a href = " / login " > Login < / a > & # 125; < / div > & # 41 ;; & # 125 ;;

Este exemplo funciona conforme o esperado, sem qualquer duplicação de código. Quando o usuário for autenticado, o texto de login será exibido. Quando o usuário é desconectado, a expressão é avaliada como falsa para que o link de login apareça.

Expressões embutidas são a técnica de renderização condicional JSX mais comumente usada. Eles podem ser cognitivamente exigentes, entretanto, especialmente se os valores de retorno verdadeiro e falso forem eles próprios expressões. Quando uma expressão se torna difícil de controlar, você pode estendê-la por várias linhas. Isso pode melhorar a legibilidade e ajudar a manter seu arquivo dentro dos limites de comprimento de linha impostos pelo seu linter.

Cenários onde não há “ mais ”

Vamos agora adaptar o exemplo acima removendo o “ você está conectado ” texto. Nosso gerente de produto decidiu que não é necessário nesta seção do aplicativo. O contêiner < div > agora deve estar vazio quando o usuário estiver conectado.

React permite retornar nulo para indicar que não há nada para renderizar. Ajuste a expressão condicional do componente de acordo.

const MyComponent = props = > & # 123; return & # 40; < div > & # 123; props. user? null: < a href = " / login " > Login < / a > & # 125; < / div > & # 41 ;; & # 125 ;;

O React também suporta falso com o mesmo significado que nulo. Isso significa que você pode encurtar o texto acima usando JavaScript &’ s & & (e) operador para fazer uma comparação booleana.

const MyComponent = props = > & # 123; return & # 40; < div > & # 123;! props. user & & < a href = " / login " > Login < / a > & # 125; < / div > & # 41 ;; & # 125 ;;

O lado esquerdo da expressão será avaliado como falso quando o usuário estiver conectado. Como os dois lados são unidos por um e, a expressão geral também é avaliada como falsa. Consequentemente, nada é renderizado quando o usuário está conectado.

Quando desconectado, o lado esquerdo é avaliado como verdadeiro. O lado direito sempre será verdadeiro, pois resolve para um objeto JavaScript quando o JSX é transpilado. Esta forma de avaliação retorna o lado direito da expressão para que o link de login acabe sendo renderizado.

As avaliações de JavaScript estão “ em curto-circuito. ” Isso significa que o JSX do lado direito não será construído desnecessariamente se a expressão do lado esquerdo for avaliada como falsa.

Valores prop condicionais

Você pode tornar os valores dos props condicionais usando expressões incorporadas no mesmo estilo que os mostrados acima. Use uma avaliação condicional ou ternária para determinar o valor a fornecer. Retornar um valor de indefinido é equivalente a não especificar a prop.

const MyComponent = props = > & # 123; return & # 40; < div > < a href = & # 123; & # 40; props. user. loggedIn === true & # 41;? " / painel ": " / home " & # 125; > Página inicial < / a > < / div > & # 41 ;; & # 125 ;;

Neste exemplo, o destino da “ Casa ” o link é ajustado dinamicamente dependendo se o usuário está conectado. Lembre-se de que os adereços de um componente em JSX são transpilados para um objeto JavaScript simples, e é por isso que essa técnica funciona. Você está realmente escrevendo o seguinte:

React. createElement & # 40; " a ", & # 123; href: & # 40; props. user. loggedIn === true & # 41;? " / dashboard ": " / home " & # 125; & # 41 ;;

JSX é apenas uma extensão de sintaxe JavaScript que permite declarar componentes React em um formato que lembra HTML.

Condicionais usando componentes lógicos

Outra forma de obter a renderização condicional é incorporar a chamada “ lógica ” componentes em seu projeto. Esses são componentes simples que só renderizam seus filhos se uma condição for atendida.

const IfComponent = props = > & # 123; if & # 40; props. condition & # 41; return props. children; elsereturnnull; & # 125;   const MyComponent = props = > & # 40; < IfComponent condition = & # 123; props. user. isLoggedIn & # 125; > < a href = " / logout " > Logout < / a > < / IfComponent > & # 41 ;;

Este padrão pode tornar o código em sua função render () mais intuitivo. No entanto, há um grande problema — o elemento a sempre será renderizado, mesmo se a condição if não for atendida. Você poderia resolver isso adaptando IfComponent para que ele chame uma função em vez de renderizar os filhos diretamente.

const IfComponent = props = > & # 123; if & # 40; props. condition & # 41; return props. renderChildren & # 40; & # 41 ;; elsereturnnull; & # 125;   const renderContent = & # 40; & # 41; = > < a href = " / logout " > Logout < / a & gt ;;   const MyComponent = props = > & # 40; < IfComponent condition = & # 123; props. user. isLoggedIn & # 125; renderContent = & # 123; renderContent & # 125; / > & # 41 ;;

Agora, o elemento a só é construído quando a condição é realmente atendida. Isso reduz renderizadores desnecessários, o que melhorará o desempenho ao usar componentes complexos.

Uma variação desse padrão é criar um componente de ordem superior (HOC). Isso permite que você envolva um componente com funcionalidade condicional.

const ifHoc = & # 40; condição, componente & # 41; = > & # 123; return props = > & # 123; if & # 40; condição & # 40; & # 41; & # 41; componente de retorno & # 40; props & # 41 ;; elsereturnnull; & # 125 ;; & # 125;   const LogoutLink = & # 40; & # 41; = > < a href = " / logout " > Logout < / a & gt ;;   const LogoutLinkOnlyWhenLoggedIn = ifHoc & # 40; props = > props. loggedIn, LoginLink & # 41 ;; - const ComponentUsingLoginLink = props = > & # 40; < LogoutLinkOnlyWhenLoggedIn loggedIn = & # 123; props. user. isLoggedIn & # 125; / > & # 41 ;;

Essa abordagem pode ser um pouco mais difícil de entender no início. É melhor quando você deseja manter o componente a ser renderizado completamente separado da lógica condicional. Ele também permite a reutilização de lógica complexa, pois qualquer componente pode ser agrupado com ifHoc (). O HOC envolve o componente original e apenas o renderiza quando o funcional condicional passado retorna verdadeiro.

Problemas de desempenho

Algumas considerações gerais de desempenho se aplicam a todas as renderizações condicionais no React. O mais importante é limitar a renegociação tanto quanto possível. Tente não substituir grandes pedaços de IU nos componentes de apresentação. Muita renderização pode criar rapidamente um “ parece lento ” sensação.

Da mesma forma, esteja ciente de que suas expressões condicionais geralmente serão avaliadas cada vez que seu componente for renderizado. Se as próprias condições forem complexas (como mapear uma série de objetos em novos objetos), isso também pode criar uma lentidão, especialmente em hardware de baixo custo.

Conclusão

O React requer que você aborde a renderização condicional de forma ligeiramente diferente dos sistemas de modelos tradicionais. Isso ocorre porque JSX se parece apenas com HTML. É transpilado de volta para objetos JavaScript, que são então usados ​​com chamadas de função React.

No entanto, você tem uma variedade de opções disponíveis quando precisa renderizar condicionalmente um componente. A opção mais direta geralmente é escrever expressões condicionais dentro de seu JSX, usando & & ou a sintaxe ternária. Você pode voltar para um real se estiver na raiz do seu método render () ou adotar um componente de ordem superior se as expressões JSX tornarem seu fluxo de renderização mais difícil de entender.