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:
Índice
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 Nativ
e (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…