Quando estamos começando a trabalhar com React Native hoje, é bem provável que nos deparemos com dois jeitos diferentes de se escrever componentes.

Que são os componentes funcionais e os componentes tipo classe.

Mas como é o formato de cada um desses componentes, qual a diferença entre eles e por que é importante conhecer esses dois jeitos?

É por isso que nesse artigo vamos explorar um pouco desses tópicos:

  • Componentes Funcionais;
  • Componentes Tipo Classe;
  • Por que usar um componente tipo classe?;
  • O que mudou na versão 0.59 do React Native?;

Que irão nos ajudar a esclarecer melhor nossas dúvidas. Então continua com agente nesse artigo e não deixe de assistir o vídeo sobre o assunto:

Componentes Funcionais

Os componentes em React que declarados em formato de função Javascript, são chamados de Componentes Funcionais, estes assumem o seguinte formato:

import React from 'react';
import {View, Text} from 'react-native';

const App = () => {
  return (
    <View>
      <Text>Hello Samurai</Text>
    </View>
  );
};

export default App;

Tendo como notáveis características, ser uma função Javascript que retorna um componente visual para ser exibido na tela.

Componentes tipo Classe

Os componentes em React que declarados em formato de classe Javascript, são chamados de Componentes tipo Classe e assumem o seguinte formato:

import React, {Component} from 'react';
import {Text, View} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View>
        <Text> Hello Samurai </Text>
      </View>
    );
  }
}

Tendo como notáveis características, ser uma classe Javascript que deve herdar sempre de React.Component (no exemplo acima, importamos o Component de react, por isso podemos utilizar apenas o extends Component invés de `extends React.Component`, porém as duas formas estão corretas) e sempre deve declarar um método render() que deve retornar um componente visual para ser exibido na tela.

Por que usar um componente tipo classe?

Como pudemos ver com os exemplos acima, o componente tipo classe é mais verboso e tem uma complexidade extra para se utilizar com relação ao componente funcional.

Então por que utilizá-lo afinal?

Bom, temos que ter em mente que a questão aqui se trata de versões anteriores a 0.59 do React Native (e 16.8 do React), antes dessas versões, nós só podíamos utilizar os states e alguns outros recursos do React em componentes do tipo classe.

Porque não podemos declarar um objeto state em um componente funcional e nem mesmo utilizar os métodos de ciclo de vida do React.

Por isso os componentes do tipo classe são chamados de Stateful Component (ou componente com state) e os componentes funcionais chamados de Stateless Component (ou componente sem state).

Então se quisermos fazer uma tela com um `TextInput` que ao receber algum texto, exibe logo abaixo em tempo real, precisamos utilizar os states, veja um exemplo:

import React from 'react';
import {View, Text, TextInput, StyleSheet} from 'react-native';

class App extends React.Component {
  state = {
    myText: 'Meu Texto',
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>ENTRADA:</Text>
        <TextInput
          value={this.state.myText}
          onChangeText={text => {
            this.setState({
              myText: text,
            });
          }}
        />
        <Text>SAÍDA:</Text>
        <Text>{this.state.myText}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

O que mudou na versão 0.59 do React Native?

Já sabemos o que é um componente funcional e um componente do tipo classe e pudemos perceber que o tipo classe tem uma complexidade a mais e é mais verboso, porém antes das versão 0.59 do React Native, o tipo classe era o único tipo de componente capaz de lidar com os states e outros recursos do React.

Então para melhorar o uso dos componentes, reduzir a complexidade do uso dos states e outros recursos, o core team do React adicionou uma nova api de recursos chamada Hooks.

Os Hooks trouxeram uma nova forma de se trabalhar com os states e alternativas de se trabalhar com os ciclos de vida do React, possibilitando agora utilizar desses recursos, nos Componentes Funcionais.

Então agora se quisermos reproduzir o exemplo do componente tipo classe utilizando os states em um componente funcional, fica assim:

import React, {useState} from 'react';
import {View, Text, TextInput, StyleSheet} from 'react-native';

const App = () => {
  const [myText, setMyText] = useState('Meu texto');

  return (
    <View style={styles.container}>
      <Text>ENTRADA:</Text>
      <TextInput
        value={myText}
        onChangeText={text => {
          setMyText(text);
        }}
      />
      <Text>SAÍDA:</Text>
      <Text>{myText}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Ou seja, bem mais enxuto e mais fácil de entender, porém, o resultado prático é o mesmo, quer dizer que esse componente escrito como funcional faz a mesma coisa que o componente anterior escrito como classe.

Conclusão

Como toda ferramenta amplamente utilizada pela comunidade está sempre em evolução, o core team do React fica sempre de olho nas possibilidades de melhorar suas formas de uso, observando algumas dores da comunidade, e testando novas maneiras, por isso trouxeram os Hooks para nos dar alternativas de melhorar o uso dos componentes em React, diminuindo a complexidade ao trabalhar com os states e outros recursos.

O core team do React não depreciou a utilização dos componentes tipo classe, eles mesmo tem esses componentes em suas aplicações, a recomendação é que toda nova aplicação ou nova implementação, usemos os componentes funcionais com os Hooks, visto que, as novas versões são compatíveis com o uso de componentes tipo classe.

Então é importante conhecer esses dois tipos de componentes e ficar ligado que é provável encontrar aplicações que utilizem ainda os componentes do tipo classe, mas agora você já sabe a diferença entre eles e não precisa mais ficar confuso quanto a isso =).

Se quiser ver mais um conteúdo da série React Native Basics acesse o nosso: React Native Basics: Props & States

Nesse conteúdo você vai aprender sobre Props e States, que são conceitos essenciais para se trabalhar com o React Native.

Então é isso ai, se tiver alguma dúvida com relação ao conteúdo, coloca ai nos comentários. Diz ai também se você gostou do artigo e o que mais gostaria de aprender…