Nesta parte da tradução do curso de treinamento do React, sugerimos que você conclua a tarefa prática de trabalhar com componentes baseados em classe. Depois disso, começaremos a dominar um conceito tão importante de React como o estado dos componentes.
→
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 componentesParte 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 cursoLição 25. Oficina. Componentes Baseados em Classe
→
Original▍Job
Abaixo está o código que precisa ser colocado no arquivo
index.js de um aplicativo React padrão criado por
create-react-app . Converta os componentes funcionais que você encontrará neste código em componentes baseados em classe e, além disso, encontre e corrija um pequeno erro.
O código para o arquivo
index.js :
import React from "react" import ReactDOM from "react-dom"
▍Solução
Primeiro, vejamos o que o aplicativo fornece em sua forma original abrindo-o em um navegador.
Página de origem do navegadorVocê pode ver que a linha superior que aparece na página não parece correta. Após a vírgula que segue o Welcome, obviamente deve haver algo como um nome de usuário.
Se analisarmos o código do aplicativo, verifica-se que o componente
Header exibe essa linha, esperando obter a propriedade de
username que é definida ao criar sua instância. Uma instância deste componente é criada no componente
App . Tendo descoberto isso, poderemos corrigir o mesmo erro mencionado na designação.
Deve-se notar que os componentes geralmente são colocados em arquivos diferentes, mas, neste caso, os descrevemos todos em um arquivo.
Passamos a transformar o componente funcional do
App em um componente com base na classe. Para fazer isso, basta trazer seu código para este formulário:
class App extends React.Component { render() { return ( <div> <Header username="vschool"/> <Greeting /> </div> ) } }
Agora a palavra-chave da
class vem antes do nome do componente, seguida pelo
extends React.Component , após o qual o corpo da classe é descrito entre colchetes. Deve haver um método
render() retornando o que retornamos do componente funcional. Outros componentes são processados da mesma maneira. Preste atenção na construção de
<Header username="vschool"/> . Aqui, passamos a propriedade
username com o valor de
vschool componente
Header , corrigindo o erro que está no aplicativo original.
Como você já sabe, o componente
Header espera obter a propriedade
username , e no componente funcional essa propriedade é acessada usando a construção
props.username (
props , nesse caso, é um argumento para a função que descreve o componente). Nos componentes baseados em classe, o mesmo se parece com
this.props.username . Aqui está o código reprojetado para o componente
Header :
class Header extends React.Component { render() { return ( <header> <p>Welcome, {this.props.username}!</p> </header> ) } }
O terceiro componente,
Greeting , é um pouco diferente dos outros. O fato é que, antes do comando de
return , alguns cálculos são realizados. Ao convertê-lo em um componente com base em uma classe, esses cálculos devem ser colocados no método
render() antes do comando de retorno. Aqui está o código para o componente
Greeting reprojetado:
class Greeting extends Component { render() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) { timeOfDay = "morning" } else if (hours >= 12 && hours < 17) { timeOfDay = "afternoon" } else { timeOfDay = "night" } return ( <h1>Good {timeOfDay} to you, sir or madam!</h1> ) } }
Observe que este componente foi usado na declaração deste componente: a
class Greeting extends Component . Isso geralmente é feito por questões de brevidade, mas, para que isso funcione, precisamos refinar o comando de importação
react , trazendo-o para este formato:
import React, {Component} from "react"
Veja como é a página do aplicativo reciclado em um navegador.
Página de aplicativo redesenhada no navegadorNa verdade, parece o mesmo que a página do aplicativo original, e a única diferença perceptível entre essas páginas é que o nome de usuário passado para o componente
Header agora é exibido na primeira linha.
Aqui está o código completo para o arquivo
index.js processado:
import React, {Component} from "react" import ReactDOM from "react-dom"
Se a implementação desta tarefa prática não lhe causou dificuldades - ótimo. Se você ainda não se sente bem com componentes baseados em classes, experimente-os. Por exemplo, você pode refazer os componentes baseados em classe novamente em componentes funcionais e executar a transformação inversa.
Lição 26. Status do Componente
→
OriginalEstado é um conceito React incrivelmente importante. Se o componente precisar armazenar seus próprios dados e gerenciar esses dados (em contraste com a situação em que o componente pai transfere dados para ele usando o mecanismo de propriedade), use o estado do componente. Hoje, examinamos os conceitos básicos sobre o estado dos componentes.
Um estado é apenas os dados que o componente controla. Em particular, isso significa que o componente pode alterar esses dados. Ao mesmo tempo, as propriedades que já são familiares para nós, obtidas pelo componente do componente pai, não podem ser alteradas pelo componente receptor. Eles, de acordo com a
documentação do React, são imutáveis (imutáveis). Por exemplo, se tentarmos, em um componente baseado em uma classe, usar uma construção como
this.props.name = "NoName" , encontraremos uma mensagem de erro.
Deve-se notar que, se algum componente precisar trabalhar com o estado, deverá ser um componente com base na classe. Vamos falar sobre como equipar o componente com o estado iniciando com o seguinte fragmento de código, que é o conteúdo do arquivo
App.js de um projeto padrão criado por
create-react-app App.js create-react-app :
import React from "react" class App extends React.Component { render() { return ( <div> <h1>Is state important to know?</h1> </div> ) } } export default App
É assim que a página do aplicativo se parece em um navegador.
Página do aplicativo no navegadorPara equipar um componente com o estado, você primeiro precisa criar um construtor de classe. Parece um método de classe
constructor() . Depois disso, o código do componente ficará assim:
class App extends React.Component { constructor() { } render() { return ( <div> <h1>Is state important to know?</h1> </div> ) } } Constructor()
Este é um método especial incorporado ao JavaScript, projetado para criar e inicializar objetos com base em classes. Na verdade, se você precisar inicializar algo ao criar um objeto, as operações correspondentes serão executadas exatamente no método
constructor() .
A primeira coisa a fazer no código do construtor é chamar o construtor da classe pai. Isso é feito usando a função
super() . No construtor da classe pai, certas operações de inicialização podem ser executadas, cujos resultados serão úteis para o nosso objeto. Aqui está a aparência do nosso construtor de classe:
constructor() { super() }
Agora, para equipar o componente com state, precisamos, no construtor, adicionar a propriedade
state à instância da classe. Esta propriedade é um objeto:
constructor() { super() this.state = {} }
Aqui nós o inicializamos com um objeto vazio. Você pode trabalhar com o estado no código do componente usando a construção
this.state . Adicione uma nova propriedade ao estado:
constructor() { super() this.state = { answer: "Yes" } }
Agora vamos pensar em como usar o que está armazenado no estado no código. Lembre-se de que o componente exibe a pergunta
Is state important to know? . O estado armazena a resposta para esta pergunta. Para adicionar esta resposta após a pergunta, você precisa fazer o mesmo que normalmente fazemos adicionando construções JavaScript ao código JSX. Ou seja, adicione a construção
{this.state.answer} ao final da linha. Como resultado, o código completo do componente ficará assim:
class App extends React.Component { constructor() { super() this.state = { answer: "Yes" } } render() { return ( <div> <h1>Is state important to know? {this.state.answer}</h1> </div> ) } }
E aqui está como a página do aplicativo ficará no navegador.
Página do aplicativo no navegadorAqui, gostaria de observar que o estado que o componente recebe durante a inicialização pode ser alterado durante a operação do componente. Além disso, os componentes podem passar do estado para os componentes descendentes usando o mecanismo de trabalhar com propriedades que você já conhece. Por exemplo, no nosso caso, se assumirmos que existe um determinado componente de
ChildComponent , os dados do estado podem ser transferidos para ele assim:
<ChildComponent answer={this.state.answer}/>
Embora não falemos detalhadamente sobre como alterar os dados armazenados no estado do componente. Observamos apenas que quando você chama o método
setState() , usado para resolver esse problema, não apenas o estado do componente será alterado, mas também os dados do estado transmitidos pelo mecanismo de propriedade para seus componentes filhos serão atualizados. Além disso, a alteração do estado fará com que os dados do estado exibido na página do aplicativo sejam alterados automaticamente.
Sumário
Hoje você teve a oportunidade de trabalhar com componentes baseados em classe. Além disso, sua introdução ao conceito de status do componente começou aqui. Da próxima vez, você encontrará tarefas práticas para trabalhar com o estado.
Caros leitores! Se você usar o React na prática, informe-nos sobre como você gerencia o estado dos componentes. Você usa ferramentas padrão do React ou algo mais?
