Tutorial Reagir Parte 13: Componentes baseados em classe

Hoje estamos publicando uma tradução do próximo tutorial do React. Ele se concentra nos componentes baseados em classe. Esses componentes são criados usando a palavra-chave da classe.



→ 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 24. Componentes Baseados em Classe

→ Original

Se você, antes de começar a dominar este curso de treinamento, estudou o React com base em outros cursos, pode ter uma dúvida sobre o fato de usarmos componentes funcionais aqui. O fato é que em muitos outros cursos esse tópico não é abordado ou os componentes funcionais são mencionados como algo que não é particularmente necessário. Alguns autores vão ainda mais longe e dizem que é melhor não usar componentes funcionais, preferindo componentes baseados em classes. Isso, na opinião deles, economiza o programador de carga desnecessária. Acredito que quem estuda o React achará útil ver a imagem completa e aprender sobre abordagens componentes que são populares atualmente. Em particular, agora a direção é relevante, segundo a qual os componentes funcionais são usados ​​sempre que possível e os componentes baseados em classe apenas onde são realmente necessários. Note-se que tudo isso é apenas uma recomendação. Cada desenvolvedor decide exatamente como ele projetará seus aplicativos.

Quando ensino os cursos React, prefiro começar com componentes funcionais, porque as funções são construções claras. Uma simples olhada em um componente funcional é suficiente para entender exatamente quais ações ele executa. Digamos, aqui está o código de um componente funcional, que é uma função regular que retorna um elemento <div> que contém um elemento <h1> com algum texto.

 function App() {   return (       <div>           <h1>Code goes here</h1>       </div>   ) } 

Mas, à medida que nos aprofundamos no estudo do React, nos familiarizamos com seus recursos, verifica-se que os componentes funcionais não são capazes de nos oferecer tudo o que precisamos dos componentes do React. Portanto, hoje falaremos sobre componentes baseados em classe. Ou seja, vamos começar criando um componente com base em uma classe que executa as mesmas ações que o componente funcional acima. Na próxima lição, abordaremos os recursos adicionais que nos fornecem componentes baseados em classe. Em particular, estamos falando sobre a possibilidade de trabalhar com o estado dos componentes e com os métodos do seu ciclo de vida.

Converta um componente funcional em um componente com base em uma classe. Se você não estiver familiarizado com a palavra-chave class , que apareceu no ES6, e com as possibilidades que ela abre para os desenvolvedores, é recomendável que você reserve um tempo para conhecer melhor as classes .

As descrições de componentes com base em class começam com a palavra-chave class . Em seguida, vem o nome do componente, compilado de acordo com as mesmas regras que os nomes dos componentes funcionais. Ao mesmo tempo, depois de uma construção como um class App não será algo como um suporte, mas uma construção do formulário extends React.Component . Depois coloque um par de chaves nos quais o corpo da classe será descrito.

As classes em JavaScript são um complemento para o modelo tradicional de herança de protótipo. A essência da construção da class App extends React.Component é que declaramos uma nova classe e salientamos que seu protótipo deve ser React.Component . A presença desse protótipo em nosso componente nos permite usar todos os recursos úteis disponíveis no React.Component neste componente.

Portanto, nesta fase do trabalho em um componente baseado em classes, seu código se parece com o seguinte:

 class App extends React.Component {  } 

Um componente baseado em classe deve ter pelo menos um método. Este é o método render() . Este método deve retornar o mesmo que normalmente retornamos dos componentes funcionais. Aqui está a aparência do código completo de um componente baseado em classe que implementa os mesmos recursos que o componente funcional acima.

 class App extends React.Component {   render() {       return (           <div>               <h1>Code goes here</h1>           </div>       )   } } 

Trabalhe com componentes baseados em classe da mesma maneira que componentes funcionais. Ou seja, no nosso caso, basta substituir o código do componente funcional pelo novo código e o aplicativo funcionará como antes.

Vamos falar sobre o método render() . Se, antes de formar os elementos retornados por este método, você precisar executar alguns cálculos, eles serão executados neste método, antes do comando de return . Ou seja, se você tiver algum código que determine a ordem em que a apresentação visual do componente é formada, esse código deverá ser colocado no método de render . Por exemplo, aqui você pode personalizar estilos se usar estilos internos. Também haverá código que implementa o mecanismo de renderização condicional e outras construções semelhantes.
Se você estiver familiarizado com as classes, poderá criar seu próprio método e colocar o código que prepara o componente para visualização nele, e depois chamar esse método no método de render . É assim:

 class App extends React.Component {     yourMethodHere() {         }     render() {       const style = this.yourMethodHere()       return (           <div>               <h1>Code goes here</h1>           </div>       )   } } 

Ou seja, aqui procedemos da suposição de que, no método yourMethodHere() estilos são gerados e que ele retorna é gravado na constante de style declarada no método render() . Observe que a palavra this chave this usada para acessar nosso próprio método. Mais tarde, falaremos sobre os recursos dessa palavra-chave, mas, por enquanto, vamos nos concentrar no design apresentado aqui.

Agora, vamos falar sobre como trabalhar com as propriedades passadas para as classes ao criar instâncias delas em componentes baseados em classes.

Ao usar componentes funcionais, declaramos uma função correspondente com o parâmetro props , que é um objeto que recebeu o que foi passado para o componente quando foi instanciado. É assim:

 function App(props) {   return (       <div>           <h1>{props.whatever}</h1>       </div>   ) } 

Ao trabalhar com um componente baseado em uma classe, a mesma coisa se parece com isso:

 class App extends React.Component {   render() {       return (           <div>               <h1>{this.props.whatever}</h1>           </div>       )   } } 

Sumário

Como já mencionado, os componentes baseados em classe oferecem ao desenvolvedor muitas opções. Falaremos mais sobre esses recursos. E agora você pode experimentar o que aprendeu hoje e se preparar para uma lição prática sobre componentes baseados em aulas.

Caros leitores! Se você estiver usando o React profissionalmente, informe-nos em quais situações você usa componentes funcionais e em quais componentes baseados em classe.