Tutorial Reagir Parte 20: Primeira lição de renderização condicional

Hoje, na tradução da próxima parte do tutorial do React, falaremos sobre renderização condicional.



→ Parte 1: visão geral do curso, razões para a popularidade do React, ReactDOM e JSX
→ Parte 2: componentes funcionais
→ Parte 3: arquivos de componentes, estrutura do projeto
→ Parte 4: componentes pai e filho
→ Parte 5: início do trabalho em um aplicativo TODO, noções básicas de estilo
→ Parte 6: sobre alguns recursos do curso, JSX e JavaScript
→ Parte 7: estilos embutidos
→ Parte 8: trabalho contínuo na aplicação TODO, familiaridade com as propriedades dos componentes
→ Parte 9: propriedades do componente
→ Parte 10: Workshop sobre como trabalhar com propriedades e estilo de componentes
→ Parte 11: geração dinâmica de marcação e método de matrizes de mapas
→ Parte 12: workshop, terceira etapa do trabalho em uma aplicação TODO
→ Parte 13: componentes baseados em classe
→ Parte 14: workshop sobre componentes baseados em classe, status dos componentes
→ Parte 15: oficinas de saúde componentes
→ Parte 16: a quarta etapa do trabalho em um aplicativo TODO, manipulação de eventos
→ Parte 17: quinta etapa do trabalho em um aplicativo TODO, modificando o estado dos componentes
→ Parte 18: a sexta etapa do trabalho em um aplicativo TODO
→ Parte 19: métodos do ciclo de vida dos componentes
Parte 20: a primeira lição sobre renderização condicional
→ Parte 21: segunda lição e workshop sobre renderização condicional
→ Parte 22: sétima etapa do trabalho em um aplicativo TODO, baixando dados de fontes externas
→ Parte 23: primeira lição sobre como trabalhar com formulários
→ Parte 24: Segunda lição sobre formulários
→ Parte 25: Workshop sobre como trabalhar com formulários
→ Parte 26: arquitetura do aplicativo, padrão Container / Component
→ Parte 27: projeto do curso

Lição 36. Renderização Condicional, Parte 1

→ Original

As tecnologias de renderização condicional são usadas nos casos em que algo precisa ser exibido em uma página de acordo com uma determinada condição. Nesta lição, falaremos sobre como exibir uma mensagem especial (pode muito bem ser representada por algo como uma tela de carregamento) enquanto o aplicativo está se preparando para o trabalho, carregando dados e, depois de pronto, como substituir esta mensagem é para outra coisa.

Hoje, experimentaremos um aplicativo criado usando as ferramentas create- App.js -app, no arquivo App.js que contém o seguinte código:

 import React, {Component} from "react" import Conditional from "./Conditional" class App extends Component {   constructor() {       super()       this.state = {           isLoading: true       }   }     componentDidMount() {       setTimeout(() => {           this.setState({               isLoading: false           })       }, 1500)   }     render() {       return (           <div>               <Conditional isLoading={this.state.isLoading}/>           </div>       )   } } export default App 

Além disso, na mesma pasta em que o arquivo App.js está App.js , há um arquivo de componente Conditional.js com o seguinte conteúdo:

 import React from "react" function Conditional(props) {   return (         ) } export default Conditional 

Nesta fase do trabalho, esse aplicativo ainda não funcionará, no processo de análise do material que será corrigido.

Um dos desafios enfrentados pelos desenvolvedores do React é que eles precisam aprender muitas ferramentas que podem ser usadas de várias maneiras. Um programador não está necessariamente limitado a apenas uma maneira de usar uma determinada ferramenta. Isso é influenciado pelo fato de o desenvolvimento do React estar extremamente próximo do desenvolvimento em JavaScript simples.

Portanto, temos a oportunidade de usar abordagens diferentes para resolver os mesmos problemas, para que as mesmas ferramentas possam ser usadas de maneiras diferentes. A renderização condicional é a área de React na qual as idéias mencionadas acima se manifestam de maneira especialmente forte. Na verdade, antes de começarmos, gostaria de observar que, embora analisemos várias abordagens para a aplicação dessa tecnologia, as opções reais para seu uso não se limitam a elas.

Vamos falar sobre o código com o qual experimentaremos agora. Nós, no arquivo App.js , temos um componente com base na classe. Seu construtor inicializou um estado que contém a propriedade isLoading configurada como true . Esse design é frequentemente usado nos casos em que, para colocar um componente em condições de trabalho, é necessário, por exemplo, executar solicitações para uma determinada API e, enquanto o componente está aguardando a chegada dos dados e a analisa, algo precisa ser mostrado na tela. Pode levar de três a quatro segundos para concluir a chamada da API e você não deseja que o usuário que está olhando para a tela pense que seu aplicativo travou. Como resultado, o estado possui uma propriedade que indica se o aplicativo está executando atualmente determinadas ações de serviço. E a renderização condicional será usada para exibir algo que diz ao usuário que o aplicativo está carregando algo em segundo plano.

O código do componente App possui um método componentDidMount() , que discutiremos em breve. Enquanto isso, vamos prestar atenção ao método render() . Aqui, produzimos o componente Condition , que é importado no código localizado na parte superior do arquivo App.js O componente isLoading passado para esse componente, que é o valor atual da propriedade isLoading do estado do componente App . O código do componente Conditional não retorna nada que possa ser exibido na tela; trataremos desse componente um pouco mais tarde. Enquanto isso, voltemos ao método componentDidMount() partir do código do componente do App .

Lembre-se de que o método componentDidMount() nos permite executar algum código imediatamente após o componente, no nosso caso, o componente App , ser exibido pela primeira vez. No código desse método, simulamos um apelo a uma determinada API. Aqui, ajustamos o cronômetro por um segundo e meio. Quando esse tempo passar, o código da função passada para setTimeout() será iniciado. Nesta função, com base no pressuposto de que sua chamada simboliza o final do carregamento de dados da API, uma alteração de estado é realizada. Ou seja, sua propriedade isLoading está definida como false . Isso indica que o download dos dados foi concluído e, depois disso, o aplicativo pode funcionar normalmente. Nas aulas futuras, falaremos sobre o uso da função fetch() para carregar dados, por enquanto nos limitaremos à simulação acima deste processo.

A propósito, será apropriado aqui, mais uma vez, abordar o tópico dos métodos do ciclo de vida dos componentes. O fato é que, assim que a propriedade do estado isLoading muda de true para false , o componente Conditional recebe um novo valor de propriedade. Primeiro, na primeira vez em que o componente é exibido, ele recebe, na propriedade isLoading , true e, depois que o estado muda, ele recebe a mesma propriedade com o novo valor. De fato, quando o estado muda, o método render() é chamado novamente, como resultado, o componente Conditional também será exibido novamente. Lembre-se de que Conditional é um componente funcional comum, ou seja, sua nova renderização significa a chamada repetida da função à qual é apresentada. Mas o que retornamos dessa função quando renderizamos novamente o componente pode diferir do que foi retornado anteriormente. O motivo dessa mudança é a mudança no que passamos para o componente.

Portanto, o componente Conditional aceita a propriedade isLoading . Antes de começarmos a trabalhar no código, verificaremos se os mecanismos que já existem nele funcionam. Para fazer isso, retornaremos algumas marcações do componente e exibiremos o valor props.isLoading no console. Depois disso, o código do componente ficará assim:

 import React from "react" function Conditional(props) {   console.log(props.isLoading)   return (       <h1>Temp</h1>   ) } export default Conditional 

A página do aplicativo a seguir será semelhante à mostrada na figura a seguir.


Página do aplicativo no navegador

Observe que true é exibido no console imediatamente após o carregamento do aplicativo e false - após 1,5 segundos. Isso ocorre devido à operação do mecanismo acima no método componentDidMount() do componente App .

Agora vamos falar sobre renderização condicional. Sua essência está no fato de exibirmos algo na tela somente se uma determinada condição for atendida. Nesse caso, em vez de exibir a string Temp na página, nós, no componente Conditional , podemos verificar o valor de props.isLoading e, se for true , exibir o texto Loading... na página. Se esse valor for false , o que indica o final do download, você poderá retornar outro texto do componente. No código, ficará assim:

 import React from "react" function Conditional(props) {   if(props.isLoading === true) {       return (           <h1>Loading...</h1>       )   } else {       return (           <h1>Some cool stuff about conditional rendering</h1>       )   }  } export default Conditional 

Tente executar esse código em sua casa, atualize a página e observe como, quando a página é carregada, um texto é exibido e depois de um tempo - outro.

Dado os recursos JavaScript, podemos simplificar o código acima desta maneira:

 import React from "react" function Conditional(props) {   if(props.isLoading === true) {       return (           <h1>Loading...</h1>       )   }   return (       <h1>Some cool stuff about conditional rendering</h1>   ) } export default Conditional 

Se a condição marcada no bloco if for verdadeira, a return nesse bloco funcionará, após o que a função será concluída. Se a condição for falsa, a expressão de return desse bloco não será satisfeita e a função retornará o que está especificado na segunda return da função.

Agora vamos falar sobre como você pode resolver os problemas de renderização condicional usando o operador ternário . Essa construção existe em JavaScript há muito tempo. É frequentemente usado no React para resolver tarefas de renderização condicional. Aqui está o que parece:

  ? 1 : 2 

O valor da expressão 1 é retornado se a condição for verdadeira, o valor da expressão 2 será retornado se a condição for falsa.

No nosso caso, usando o operador ternário, o código do componente Conditional pode ser reescrito da seguinte maneira:

 import React from "react" function Conditional(props) {   return (       props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>   )  } export default Conditional 

Esse design, embora funcione, parece incomum. O fato é que geralmente os componentes retornam projetos mais complexos. Portanto, envolva tudo em um elemento <div> :

 import React from "react" function Conditional(props) {   return (       <div>           props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>       </div>   )  } export default Conditional 

Esse código também funciona, embora não seja mais como deveria. Tudo o que está incluído no <div&gtl; . Para corrigir isso, lembramos que as construções JS usadas na marcação retornada dos componentes devem ser colocadas entre chaves e reescrever o código adequadamente:

 import React from "react" function Conditional(props) {   return (       <div>                 {props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}       </div>   )  } export default Conditional 

Agora tudo funciona como deveria novamente.

Deve-se notar que no componente real a marcação retornada por eles pareceria mais complicada. Aqui, por exemplo, na parte superior do que o componente exibe, uma barra de navegação pode estar presente, na parte inferior, um "rodapé" da página pode ser fornecido e assim por diante. Pode ser assim:

 import React from "react" function Conditional(props) {   return (       <div>           <h1>Navbar</h1>                     {props.isLoading === true ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}                     <h1>Footer</h1>       </div>   )  } export default Conditional 

Além disso, a presença na marcação retornada pelo componente de elementos adicionais não interfere nos mecanismos de renderização condicional. Além disso, esses elementos serão exibidos quando props.isLoading for true e quando essa propriedade for false .

Outra melhoria que pode ser feita nesse código é baseada no fato de que, como props.isLoading é uma propriedade booleana que leva o valor true ou false , ela pode ser usada diretamente sem usar o operador de comparação estrita com true . O resultado é o seguinte:

 import React from "react" function Conditional(props) {   return (       <div>           <h1>Navbar</h1>                     {props.isLoading ? <h1>Loading...</h1> : <h1>Some cool stuff about conditional rendering</h1>}                     <h1>Footer</h1>       </div>   )  } export default Conditional 

Agora chegamos a um exemplo prático do uso da tecnologia de renderização condicional, mas os mesmos resultados podem ser alcançados de várias maneiras. Por exemplo, geralmente em componentes como o nosso, os painéis de navegação e os rodapés das páginas não são exibidos. Esses elementos da página geralmente são exibidos pelo próprio componente do App ou por componentes especiais exibidos pelo componente do App .

Além disso, deve-se notar que aqui toda a lógica da renderização condicional está localizada dentro do método render() do componente funcional, que foi feito apenas para demonstrar o código compacto montado em um único local. Mas, provavelmente, o componente App deve ser responsável pela renderização condicional, e um componente semelhante ao nosso componente Conditional deve exibir simplesmente o que foi passado para ele. Se o componente App for responsável por descobrir se algo está carregando em um determinado momento e, quando essa operação for concluída, provavelmente será responsável por determinar o que deve ser exibido na página. Ou seja, no nosso caso, o código pode ser reorganizado verificando a propriedade isLoading no método render() do componente App e exibindo o texto como Loading... caso o download não seja concluído ou exibindo um componente semelhante ao componente Conditional em Se o download estiver concluído. Ao mesmo tempo, o componente Conditional pode não aceitar propriedades do App , exibindo apenas o que deve ser produzido em qualquer caso.

Veja como é o código do componente do aplicativo, convertido de acordo com estas considerações:

 import React, {Component} from "react" import Conditional from "./Conditional" class App extends Component {   constructor() {       super()       this.state = {           isLoading: true       }   }     componentDidMount() {       setTimeout(() => {           this.setState({               isLoading: false           })       }, 1500)   }     render() {       return (           <div>               {this.state.isLoading ?               <h1>Loading...</h1> :               <Conditional />}           </div>       )   } } export default App 

E aqui está o código atualizado do componente Conditional , no qual agora não há verificação de nenhuma condição:

 import React from "react" function Conditional(props) {   return <h1>Some cool stuff about conditional rendering</h1> } export default Conditional 

Aqui, no entanto, removemos a barra de navegação e o "porão", mas isso não é importante neste caso.

Sumário

Nesta lição, sua primeira introdução às tecnologias de renderização condicional ocorreu. Da próxima vez, continuaremos a lidar com eles. Em particular, você terá uma segunda lição sobre renderização condicional e trabalho prático sobre este tópico.

Caros leitores! Se você estiver desenvolvendo aplicativos React, solicitamos que você nos conte como você executa a renderização condicional.